@osmo.inc/cli 0.1.15

package/runtime/packages/scene/src/shader.ts

@@ -0,0 +1,57 @@
+import type { UniformValue } from "./elements.js";
+
+interface Field { name: string; size: number; offset: number }
+
+/** Small authoring interface, not a WGSL parser. Naga validates the full program.
+ * Accept only plain f32/vec2f/vec3f/vec4f fields, with standard WGSL alignment. */
+export function prepareShader(source: string) {
+	// Preserve line numbers; handle WGSL's nested block comments.
+	let clean = "", depth = 0, line = false;
+	for (let i = 0; i < source.length; i++) {
+		const c = source[i], next = source[i + 1];
+		if (!line && c === "/" && next === "*") { depth++; clean += "  "; i++; }
+		else if (depth && c === "*" && next === "/") { depth--; clean += "  "; i++; }
+		else if (!depth && !line && c === "/" && next === "/") { line = true; clean += "  "; i++; }
+		else { clean += c === "\n" ? "\n" : depth || line ? " " : c; if (c === "\n") line = false; }
+	}
+	if (depth) throw new Error("Shader: unterminated block comment");
+	const structs = [...clean.matchAll(/\bstruct\s+Uniforms\s*\{([^}]*)\}/g)];
+	if (structs.length > 1) throw new Error("Shader: declare Uniforms only once");
+	const fields: Field[] = [];
+	let offset = 0;
+	if (structs.length) {
+		const members = structs[0][1].trim().replace(/,\s*$/, "").split(",");
+		for (const member of members) {
+			const m = /^\s*([a-zA-Z][a-zA-Z0-9_]*)\s*:\s*(f32|vec([234])f|vec([234])\s*<\s*f32\s*>)\s*$/.exec(member);
+			if (!m) throw new Error("Shader.Uniforms: use plain named f32, vec2f, vec3f or vec4f fields");
+			if (fields.some(f => f.name === m[1])) throw new Error(`Shader.Uniforms: duplicate ${m[1]}`);
+			const size = Number(m[3] ?? m[4] ?? 1);
+			const alignment = size === 3 ? 4 : size;
+			offset = Math.ceil(offset / alignment) * alignment;
+			fields.push({ name: m[1], size, offset });
+			offset += size;
+		}
+	}
+	if (fields.length > 32 || offset > 128) throw new Error("Shader.Uniforms: maximum 32 fields / 512 bytes");
+	const code = source + (fields.length ? "\n@group(3) @binding(0) var<uniform> uniforms: Uniforms;\n" : "");
+	return {
+		code,
+		pack(values: Readonly<Record<string, UniformValue>>): number[] {
+			for (const name of Object.keys(values))
+				if (!fields.some(f => f.name === name)) throw new Error(`Shader.uniforms: unknown field "${name}"`);
+			const data = Array<number>(128).fill(0);
+			for (const field of fields) {
+				if (!Object.hasOwn(values, field.name)) throw new Error(`Shader.uniforms: missing field "${field.name}"`);
+				const value = values[field.name];
+				const parts = Array.isArray(value) ? value : [value];
+				if (parts.length !== field.size || (field.size === 1 && Array.isArray(value)))
+					throw new Error(`Shader.uniforms.${field.name}: expected ${field.size === 1 ? "f32" : `vec${field.size}f`}`);
+				parts.forEach((n, i) => {
+					if (typeof n !== "number" || !Number.isFinite(Math.fround(n))) throw new Error(`Shader.uniforms.${field.name}: expected finite f32 values`);
+					data[field.offset + i] = n;
+				});
+			}
+			return data;
+		},
+	};
+}

package/src/resource-examples/example-image/landscape.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+<rect width="400" height="400" fill="#dbecb2"/>
+<path d="M-20 320L170 40L430 400H35Z" fill="#2d4636"/>
+<path d="M150 400L280 155L440 400Z" fill="#89ac74"/>
+<circle cx="310" cy="80" r="33" fill="#f8f6df"/>
+<path d="M0 334Q110 280 230 352T410 360V400H0Z" fill="#c7dba0"/>
+</svg>

package/src/resource-examples/example-image/resource.json

@@ -0,0 +1,8 @@
+{
+  "id": "example-image",
+  "kind": "image",
+  "title": "Landscape",
+  "entry": "landscape.svg",
+  "width": 400,
+  "height": 400
+}

package/src/resource-examples/example-model/preview.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 160"><rect width="240" height="160" fill="#23201e"/><path d="M120 20L174 80L120 140L66 80Z" fill="#f65323"/><path d="M120 20L119 82L66 80Z" fill="#ffad63"/><path d="M119 82L174 80L120 140Z" fill="#ac2d15"/></svg>

package/src/resource-examples/example-model/resource.json

@@ -0,0 +1,7 @@
+{
+  "id": "example-model",
+  "kind": "model",
+  "title": "Gem",
+  "entry": "gem.glb",
+  "preview": "preview.svg"
+}

package/src/resource-examples/example-scene/resource.json

@@ -0,0 +1 @@
+{"id":"example-scene","title":"Orbit scene","kind":"scene","entry":"scene.tsx"}

package/src/resource-examples/example-scene/scene.tsx

@@ -0,0 +1,8 @@
+import {Scene,Group,Text,defineMotion} from '@osmo/scene';
+const motion=defineMotion({turn:{default:0,keyframes:[{at:0,value:0},{at:3,value:180}]}});
+export default <Scene width={400} height={300} duration={3} fps={30}>
+  <Group id="orbit" label="Orbit" track={0} width={100} height={100} position={[200,150]} origin={[0,0]} rotation={motion.turn} clip={false}>
+    <Group label="Dot" width={64} height={64} position={[50,-32]} shape="ellipse" fill="#ff4a00"/>
+  </Group>
+  <Text id="title" track={1} position={[24,240]} fontSize={28} color="#ffffff">A scene inside a scene</Text>
+</Scene>;

package/src/resource-examples/example-shader/effect.wgsl

@@ -0,0 +1,7 @@
+struct Uniforms { amount: f32, }
+fn effect(uv: vec2f, time: f32) -> vec4f {
+  let c = eng_input(uv);
+  let luminance = dot(c.rgb, vec3f(0.2126, 0.7152, 0.0722));
+  let tint = mix(vec3f(0.12, 0.06, 0.3), vec3f(1.0, 0.6, 0.3), luminance);
+  return vec4f(mix(c.rgb, tint, uniforms.amount), c.a);
+}

package/src/resource-examples/example-shader/preview.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 160"><defs><linearGradient id="g" x2="1" y2="1"><stop stop-color="#20114b"/><stop offset="1" stop-color="#ff994d"/></linearGradient></defs><rect width="240" height="160" fill="url(#g)"/><circle cx="154" cy="69" r="42" fill="#ffba86"/><path d="M0 160L78 40L158 160" fill="#452344"/></svg>

package/src/resource-examples/example-shader/resource.json

@@ -0,0 +1,27 @@
+{
+  "id": "example-shader",
+  "kind": "shader",
+  "title": "Warm tint",
+  "entry": "tint.wgsl",
+  "preview": "preview.svg",
+  "uniforms": {
+    "amount": 0.7
+  },
+  "backdrop": "replace",
+  "effect": {
+    "src": "effect.wgsl",
+    "padding": 0,
+    "knobs": {
+      "amount": {
+        "type": "number",
+        "default": 0.7,
+        "min": 0,
+        "max": 1,
+        "step": 0.01
+      }
+    },
+    "values": {
+      "amount": 0.7
+    }
+  }
+}

package/src/resource-examples/example-shader/tint.wgsl

@@ -0,0 +1,7 @@
+struct Uniforms { amount: f32, }
+fn effect(uv: vec2f, time: f32) -> vec4f {
+  let c = eng_backdrop(eng_self_uv());
+  let luminance = dot(c.rgb, vec3f(0.2126, 0.7152, 0.0722));
+  let tint = mix(vec3f(0.12, 0.06, 0.3), vec3f(1.0, 0.6, 0.3), luminance);
+  return vec4f(mix(c.rgb, tint, uniforms.amount), c.a);
+}

package/src/resource-examples/example-video/resource.json

@@ -0,0 +1,9 @@
+{
+  "id": "example-video",
+  "kind": "video",
+  "title": "Ambient",
+  "entry": "ambient.mp4",
+  "width": 640,
+  "height": 400,
+  "duration": 9
+}

package/src/starter/scene.tsx

@@ -0,0 +1,20 @@
+import { Scene, Group, Text, defineMotion } from "@osmo/scene";
+
+// A small, editable animation with no external assets. Add resources when needed.
+const motion = defineMotion({
+  fade: { default: 0, keyframes: [
+    { at: 0, value: 0 },
+    { at: 0.6, value: 1, easing: "easeOut" },
+  ] },
+  position: { default: [0, 240], keyframes: [
+    { at: 0, value: [0, 260] },
+    { at: 0.8, value: [0, 240], easing: "easeOut" },
+  ] },
+});
+
+export default <Scene width={960} height={600} duration={4} fps={30} background="#141414">
+  <Group track={0} position={motion.position} opacity={motion.fade}>
+    <Text width={960} align="center" fontSize={64} fontWeight={600}>Your animation</Text>
+    <Text position={[0, 92]} width={960} align="center" fontSize={22} color="#a0a0a0">Made with Osmo</Text>
+  </Group>
+</Scene>;

package/studio/index.html

@@ -0,0 +1,2 @@
+<!doctype html>
+<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Osmo Studio</title><link rel="stylesheet" href="/src/app.css"></head><body><div id="app"></div><script type="module" src="/src/app.js"></script></body></html>

package/studio/public/check-circle-filled.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="14.25" height="14.25" viewBox="0 0 14.25 14.25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="icon" d="M7.125 0C11.06 0 14.25 3.18997 14.25 7.125C14.25 11.06 11.06 14.25 7.125 14.25C3.18997 14.25 0 11.06 0 7.125C0 3.18997 3.18997 0 7.125 0ZM10.5664 4.68262C10.3224 4.43916 9.92657 4.43913 9.68262 4.68262L6.19043 8.17383C6.15389 8.21006 6.09513 8.21005 6.05859 8.17383L5.06641 7.18262C4.82243 6.93916 4.42657 6.93913 4.18262 7.18262C3.93912 7.42659 3.9391 7.82342 4.18262 8.06738L5.68262 9.56738C5.92656 9.81087 6.32243 9.81082 6.56641 9.56738L10.5664 5.56738C10.8105 5.32331 10.8105 4.92669 10.5664 4.68262Z" fill="#FAFAFA"/>
+</svg>

package/studio/public/comment-cursor/active-outer.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Ellipse 9" d="M32 16C32 24.8366 24.8366 32 16 32C13.6079 32 8.47571 32 4.66541 32C2.08808 32 0 29.9134 0 27.3361C0 23.6798 0 18.763 0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16Z" fill="#F94305"/>
+</svg>

package/studio/public/comment-cursor/default.svg

@@ -0,0 +1,6 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="comment cursor">
+<path id="Ellipse 9" d="M16 8C16 3.58172 12.4183 0 8 0C6.83838 0 4.38449 0 2.49887 0C1.11816 0 0 1.11902 0 2.49973C0 4.30801 0 6.66032 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8Z" fill="#D9D9D9"/>
+<path id="Ellipse 10" d="M8 14.75C11.7279 14.75 14.75 11.7279 14.75 8C14.75 4.27208 11.7279 1.25 8 1.25H2.69643C1.89759 1.25 1.25 1.89759 1.25 2.69643V8C1.25 11.7279 4.27208 14.75 8 14.75Z" fill="black"/>
+</g>
+</svg>

package/studio/public/osmo-studio-logo.svg

@@ -0,0 +1,12 @@
+<svg width="70" height="17" viewBox="0 0 70 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.51157 0.00570192H5.73855C6.41687 0.00570192 7.02432 0.0469172 7.57103 0.139651C8.11773 0.222081 8.57332 0.335423 8.94792 0.479676C9.31238 0.623929 9.63636 0.799094 9.90971 1.00517C10.1932 1.21124 10.4058 1.41732 10.5577 1.6234C10.7196 1.82947 10.8411 2.05615 10.9424 2.30345C11.0335 2.55074 11.1044 2.76712 11.1246 2.96289C11.155 3.15866 11.1651 3.35443 11.1651 3.57081V3.85932C11.1651 4.06539 11.155 4.27147 11.1246 4.46724C11.1044 4.65271 11.0335 4.87939 10.9424 5.12668C10.8411 5.37397 10.7196 5.60066 10.5678 5.81704C10.4159 6.02311 10.2033 6.22919 9.91983 6.44557C9.63636 6.65164 9.31238 6.82681 8.94792 6.98136C8.58344 7.12562 8.12786 7.23896 7.57103 7.33169C7.02432 7.42443 6.41687 7.46564 5.73855 7.46564H5.51157C4.83325 7.46564 4.2258 7.42443 3.66897 7.33169C3.12226 7.23896 2.65655 7.12562 2.29208 6.98136C1.92761 6.82681 1.60364 6.65164 1.32016 6.44557C1.03669 6.22919 0.824078 6.02311 0.662091 5.81704C0.510229 5.60066 0.388738 5.37397 0.297621 5.12668C0.196379 4.87939 0.135634 4.65271 0.115386 4.46724C0.0850135 4.27147 0.0748893 4.06539 0.0748893 3.85932V3.57081C0.0748893 3.35443 0.0850135 3.15866 0.115386 2.96289C0.135634 2.77742 0.196379 2.55074 0.297621 2.30345C0.388738 2.05615 0.510229 1.82947 0.662091 1.6234C0.824078 1.41732 1.03669 1.21124 1.32016 1.00517C1.59351 0.799094 1.91749 0.623929 2.28196 0.479676C2.65655 0.335423 3.12226 0.222081 3.66897 0.139651C4.2258 0.0469172 4.83325 0.00570192 5.51157 0.00570192ZM8.63406 3.77689V3.64294C8.63406 3.45747 8.61382 3.28231 8.5632 3.12775C8.51257 2.96289 8.42146 2.79803 8.27972 2.62286C8.1481 2.4477 7.96587 2.29314 7.74314 2.1798C7.52041 2.05616 7.21668 1.95312 6.84209 1.87069C6.52824 1.79856 6.17389 1.76765 5.77905 1.75735C5.68793 1.74704 5.60268 1.74704 5.54194 1.74704C3.58798 1.78826 2.60593 2.41679 2.60593 3.64294V3.75628C2.60593 3.98296 2.64643 4.20965 2.73754 4.41572C2.81854 4.6218 2.9704 4.82787 3.17288 5.03395C3.38549 5.24002 3.69934 5.40488 4.13468 5.52853C4.53965 5.64187 5.02561 5.70369 5.58244 5.714C5.63306 5.714 5.65756 5.714 5.73855 5.714C6.25489 5.69339 6.71047 5.64187 7.08507 5.52853C7.52041 5.41519 7.84438 5.25033 8.05699 5.04425C8.26959 4.84848 8.42146 4.6424 8.50245 4.43633C8.59357 4.23025 8.63406 4.00357 8.63406 3.77689Z" fill="white"/>
+<path d="M16.5695 7.46564C15.8 7.46564 15.1217 7.40382 14.5548 7.28017C13.9777 7.15653 13.5322 7.01228 13.2184 6.83711C12.9147 6.66195 12.6616 6.44557 12.4793 6.19828C12.2971 5.95098 12.1756 5.7243 12.125 5.52853C12.0744 5.33276 12.0541 5.11638 12.0541 4.8897V4.78666H14.575C14.6256 5.54914 15.1724 5.93038 16.6505 5.93038H17.2073C17.6933 5.93038 17.8958 5.89947 18.2197 5.85825C18.5336 5.81704 18.7664 5.76552 18.9082 5.68309C19.06 5.60066 19.1511 5.52853 19.2018 5.4461C19.2524 5.36367 19.2726 5.27094 19.2726 5.15759C19.2726 5.00304 19.2321 4.87939 19.1512 4.78666C19.0702 4.70423 18.8677 4.6218 18.5639 4.54967C18.2602 4.48785 17.8249 4.44663 17.2478 4.43633L16.4885 4.41572L15.9215 4.40542C13.4107 4.34359 12.1554 3.63263 12.1554 2.29314V2.20041C12.1554 1.97372 12.1857 1.75735 12.2465 1.56157C12.3072 1.3658 12.4287 1.17003 12.6211 0.963954C12.8033 0.768182 13.0463 0.603321 13.35 0.469372C13.6537 0.335423 14.0587 0.222081 14.575 0.139651C15.0812 0.0469172 15.6786 0.00570192 16.3569 0.00570192H17.0757C17.7743 0.00570192 18.402 0.0469172 18.9385 0.139651C19.4852 0.232385 19.9105 0.345727 20.2344 0.48998C20.5584 0.634233 20.8216 0.809397 21.0241 1.01547C21.2266 1.22155 21.3683 1.42762 21.4392 1.6234C21.5202 1.82947 21.5607 2.04585 21.5607 2.28284V2.37557H19.0499C19.0297 2.30345 19.0094 2.23132 18.9892 2.1798C18.9689 2.12828 18.9082 2.05615 18.8171 1.96342C18.7259 1.87069 18.6146 1.79856 18.4627 1.73674C18.321 1.68522 18.0982 1.6337 17.8148 1.58218C17.5313 1.54097 17.3086 1.52036 16.9238 1.52036H16.5695C15.9823 1.52036 15.6178 1.55127 15.304 1.61309C15.0002 1.68522 14.8079 1.75735 14.7471 1.82947C14.6763 1.9016 14.6459 2.00464 14.6459 2.13859C14.6459 2.26223 14.6763 2.35496 14.7573 2.43739C14.8281 2.50952 15.0002 2.58165 15.2736 2.65377C15.5469 2.7156 15.9317 2.74651 16.4277 2.75681L16.9947 2.76712L17.7236 2.77742C19.1714 2.79803 20.2041 2.9835 20.8419 3.32352C21.4898 3.66355 21.8037 4.18904 21.8037 4.92061V5.05456C21.8037 5.32245 21.7733 5.55944 21.7126 5.76552C21.6518 5.97159 21.5202 6.18797 21.3278 6.41466C21.1355 6.63104 20.8824 6.8165 20.5584 6.96076C20.2344 7.11531 19.7991 7.22865 19.2423 7.32139C18.6854 7.42443 18.0274 7.46564 17.2782 7.46564H16.5695Z" fill="white"/>
+<path d="M22.7579 7.50345V0H26.19L28.8526 4.6218L31.4145 0H34.8461V7.50345H32.4568V2.34466L29.4196 7.50345H28.2701L25.1546 2.34466V7.50345H22.7579Z" fill="white"/>
+<path d="M41.3239 0.00570192L64.5584 0C65.2368 0 65.8442 0.0412152 66.3909 0.133949C66.9376 0.216379 67.3932 0.329721 67.7678 0.473974C68.1323 0.618227 68.4562 0.793392 68.7296 0.999467C69.0131 1.20554 69.2257 1.41162 69.3775 1.61769C69.5395 1.82377 69.661 2.05045 69.7623 2.29774C69.8534 2.54503 69.9242 2.76141 69.9445 2.95719C69.9749 3.15296 69.985 3.34873 69.985 3.56511V3.85362C69.985 4.05969 69.9749 4.26577 69.9445 4.46154C69.9242 4.64701 69.8534 4.87369 69.7623 5.12098C69.661 5.36827 69.5395 5.59496 69.3877 5.81133C69.2358 6.01741 69.0232 6.22349 68.7397 6.43987C68.4562 6.64594 68.1323 6.8211 67.7678 6.97566C67.4033 7.11991 66.9477 7.23326 66.3909 7.32599C65.8442 7.41872 65.2368 7.45994 64.5584 7.45994L41.3239 7.46564C40.6455 7.46564 40.0381 7.42443 39.4813 7.33169C38.9346 7.23896 38.4688 7.12562 38.1044 6.98136C37.7399 6.82681 37.4159 6.65164 37.1325 6.44557C36.849 6.22919 36.6364 6.02311 36.4744 5.81704C36.3225 5.60066 36.201 5.37397 36.1099 5.12668C36.0087 4.87939 35.9479 4.65271 35.9277 4.46724C35.8973 4.27147 35.8872 4.06539 35.8872 3.85932V3.57081C35.8872 3.35443 35.8973 3.15866 35.9277 2.96289C35.9479 2.77742 36.0087 2.55074 36.1099 2.30345C36.201 2.05615 36.3225 1.82947 36.4744 1.6234C36.6364 1.41732 36.849 1.21124 37.1325 1.00517C37.4058 0.799094 37.7298 0.623929 38.0942 0.479676C38.4688 0.335423 38.9346 0.222081 39.4813 0.139651C40.0381 0.0469172 40.6455 0.00570192 41.3239 0.00570192ZM67.4539 3.77118V3.63724C67.4539 3.45177 67.4337 3.2766 67.3831 3.12205C67.3325 2.95719 67.2413 2.79233 67.0996 2.61716C66.968 2.442 66.7858 2.28744 66.563 2.1741C66.3403 2.05045 66.0366 1.94742 65.662 1.86498C65.3481 1.79286 64.9938 1.76195 64.5989 1.75164C64.5078 1.74134 41.415 1.74704 41.3542 1.74704C39.4003 1.78826 38.4182 2.41679 38.4182 3.64294V3.75628C38.4182 3.98296 38.4587 4.20965 38.5498 4.41572C38.6308 4.6218 38.7827 4.82787 38.9852 5.03395C39.1978 5.24002 39.5116 5.40488 39.947 5.52853C40.3519 5.64187 40.8379 5.70369 41.3947 5.714C41.4453 5.714 64.4774 5.7083 64.5584 5.7083C65.0748 5.68769 65.5304 5.63617 65.905 5.52283C66.3403 5.40949 66.6643 5.24463 66.8769 5.03855C67.0895 4.84278 67.2413 4.6367 67.3223 4.43063C67.4135 4.22455 67.4539 3.99787 67.4539 3.77118Z" fill="white"/>
+<path d="M4.51538 17C3.74594 17 3.06762 16.9382 2.50067 16.8145C1.92359 16.6909 1.47813 16.5466 1.16428 16.3715C0.860554 16.1963 0.60745 15.9799 0.425215 15.7326C0.24298 15.4853 0.12149 15.2587 0.0708692 15.0629C0.0202483 14.8671 0 14.6507 0 14.4241V14.321H2.52092C2.57154 15.0835 3.11824 15.4647 4.59637 15.4647H5.1532C5.63916 15.4647 5.84164 15.4338 6.16562 15.3926C6.47947 15.3514 6.71232 15.2999 6.85406 15.2174C7.00592 15.135 7.09704 15.0629 7.14766 14.9805C7.19828 14.898 7.21853 14.8053 7.21853 14.692C7.21853 14.5374 7.17803 14.4138 7.09704 14.321C7.01605 14.2386 6.81356 14.1562 6.50984 14.084C6.20611 14.0222 5.77077 13.981 5.1937 13.9707L4.43438 13.9501L3.86743 13.9398C1.35664 13.878 0.101242 13.167 0.101242 11.8275V11.7348C0.101242 11.5081 0.131614 11.2917 0.192359 11.0959C0.253104 10.9002 0.374594 10.7044 0.566953 10.4983C0.749188 10.3025 0.992168 10.1377 1.29589 10.0037C1.59962 9.86978 2.00458 9.75644 2.52092 9.67401C3.02713 9.58127 3.62445 9.54006 4.30277 9.54006H5.02159C5.72015 9.54006 6.34785 9.58127 6.88443 9.67401C7.43114 9.76674 7.85635 9.88009 8.18033 10.0243C8.5043 10.1686 8.76753 10.3438 8.97001 10.5498C9.17249 10.7559 9.31423 10.962 9.3851 11.1578C9.4661 11.3638 9.50659 11.5802 9.50659 11.8172V11.9099H6.9958C6.97555 11.8378 6.9553 11.7657 6.93505 11.7142C6.91481 11.6626 6.85406 11.5905 6.76294 11.4978C6.67183 11.405 6.56046 11.3329 6.4086 11.2711C6.26686 11.2196 6.04413 11.1681 5.76065 11.1165C5.47717 11.0753 5.25444 11.0547 4.86972 11.0547H4.51538C3.92818 11.0547 3.56371 11.0856 3.24986 11.1475C2.94613 11.2196 2.75377 11.2917 2.69303 11.3638C2.62216 11.436 2.59179 11.539 2.59179 11.6729C2.59179 11.7966 2.62216 11.8893 2.70315 11.9718C2.77402 12.0439 2.94613 12.116 3.21949 12.1881C3.49284 12.25 3.87756 12.2809 4.37364 12.2912L4.94059 12.3015L5.66953 12.3118C7.11729 12.3324 8.14995 12.5179 8.78778 12.8579C9.43572 13.1979 9.74957 13.7234 9.74957 14.455V14.5889C9.74957 14.8568 9.7192 15.0938 9.65845 15.2999C9.59771 15.506 9.4661 15.7223 9.27374 15.949C9.08138 16.1654 8.82827 16.3509 8.5043 16.4951C8.18033 16.6497 7.74499 16.763 7.18816 16.8557C6.63133 16.9588 5.97326 17 5.22407 17H4.51538Z" fill="white"/>
+<path d="M13.6337 16.9863V11.3741H10.313V9.60009H14.8655H19.4045V11.3741H16.0736V16.9863H13.6337Z" fill="white"/>
+<path d="M27.9506 9.60009H30.3602V13.2018C30.3602 13.5006 30.3197 13.8097 30.2488 14.1188C30.178 14.4176 30.0362 14.7577 29.8236 15.108C29.611 15.4686 29.3376 15.7777 29.0036 16.0456C28.6695 16.3135 28.2139 16.5402 27.6368 16.7154C27.0496 16.9009 26.3814 16.9833 25.6322 16.9833H25.2576C24.6907 16.9833 24.1642 16.9421 23.6985 16.8493C23.2227 16.7566 22.8278 16.633 22.5038 16.4784C22.1799 16.3238 21.8863 16.1384 21.6433 15.922C21.3902 15.7056 21.1978 15.4789 21.0561 15.2626C20.9042 15.0359 20.7929 14.7989 20.6916 14.5413C20.6005 14.2837 20.5397 14.0467 20.5094 13.8406C20.479 13.6243 20.4689 13.4182 20.4689 13.2018V9.60009H22.8784V13.0679C22.8784 13.3254 22.9189 13.5624 22.9898 13.7788C23.0607 14.0055 23.1822 14.2219 23.3543 14.4383C23.5264 14.6546 23.7896 14.8195 24.1541 14.9431C24.5084 15.0668 24.9336 15.1389 25.4297 15.1389C25.9157 15.1389 26.3308 15.0668 26.6851 14.9431C27.0293 14.8195 27.2926 14.6546 27.4647 14.4383C27.6469 14.2219 27.7684 14.0055 27.8393 13.7788C27.9101 13.5624 27.9506 13.3254 27.9506 13.0679V9.60009Z" fill="white"/>
+<path d="M31.3411 9.61219H40.292H48.8915C49.6103 9.61219 50.2684 9.6534 50.8455 9.74614C51.4327 9.83887 51.9187 9.96251 52.3034 10.1377C52.6982 10.3128 53.0323 10.4983 53.3057 10.7147C53.579 10.9208 53.7916 11.1578 53.9435 11.4257C54.0852 11.6936 54.1966 11.9511 54.2573 12.2087C54.3282 12.4663 54.3586 12.7342 54.3586 13.0227V13.4864C54.3586 13.8264 54.3181 14.1459 54.227 14.4447C54.146 14.7538 53.984 15.0629 53.741 15.3823C53.4879 15.712 53.1741 15.9902 52.7893 16.2169C52.3945 16.4436 51.868 16.6291 51.1998 16.7733C50.5418 16.9279 49.7723 17 48.9017 17H31.3411V9.61219ZM33.751 11.3803L33.7607 15.2414H48.7093C50.7848 15.2414 51.8174 14.6404 51.8174 13.3937V13.1773C51.8174 11.9305 50.775 11.3494 48.6995 11.3494L33.751 11.3803Z" fill="white"/>
+<path d="M57.8094 9.60009V16.9863H55.3724V9.60009H57.8094Z" fill="white"/>
+<path d="M64.2495 9.54006H64.5734C65.2518 9.54006 65.8592 9.58127 66.4059 9.67401C66.9526 9.75644 67.4082 9.86978 67.7828 10.014C68.1473 10.1583 68.4712 10.3335 68.7446 10.5395C69.0281 10.7456 69.2407 10.9517 69.3926 11.1578C69.5545 11.3638 69.676 11.5905 69.7773 11.8378C69.8684 12.0851 69.9392 12.3015 69.9595 12.4972C69.9899 12.693 70 12.8888 70 13.1052V13.3937C70 13.5998 69.9899 13.8058 69.9595 14.0016C69.9392 14.1871 69.8684 14.4138 69.7773 14.661C69.676 14.9083 69.5545 15.135 69.4027 15.3514C69.2508 15.5575 69.0382 15.7635 68.7547 15.9799C68.4713 16.186 68.1473 16.3612 67.7828 16.5157C67.4183 16.66 66.9628 16.7733 66.4059 16.8661C65.8592 16.9588 65.2518 17 64.5734 17H64.2495C63.5712 17 62.9637 16.9588 62.4069 16.8661C61.8602 16.7733 61.3945 16.66 61.03 16.5157C60.6655 16.3612 60.3415 16.186 60.0581 15.9799C59.7746 15.7635 59.562 15.5575 59.4 15.3514C59.2481 15.135 59.1266 14.9083 59.0355 14.661C58.9343 14.4138 58.8735 14.1871 58.8533 14.0016C58.8229 13.8058 58.8128 13.5998 58.8128 13.3937V13.1052C58.8128 12.8888 58.8229 12.693 58.8533 12.4972C58.8735 12.3118 58.9343 12.0851 59.0355 11.8378C59.1266 11.5905 59.2481 11.3638 59.4 11.1578C59.562 10.9517 59.7746 10.7456 60.0581 10.5395C60.3314 10.3335 60.6554 10.1583 61.0199 10.014C61.3945 9.86978 61.8602 9.75644 62.4069 9.67401C62.9637 9.58127 63.5712 9.54006 64.2495 9.54006ZM67.469 13.3112V13.1773C67.469 12.9918 67.4487 12.8167 67.3981 12.6621C67.3475 12.4972 67.2563 12.3324 67.1146 12.1572C66.983 11.9821 66.8008 11.8275 66.578 11.7142C66.3553 11.5905 66.0516 11.4875 65.677 11.405C65.3631 11.3329 65.0088 11.302 64.6139 11.2917C64.5228 11.2814 64.3406 11.2814 64.2799 11.2814C62.3259 11.3226 61.3438 11.9511 61.3438 13.1773V13.2906C61.3438 13.5173 61.3843 13.744 61.4754 13.9501C61.5564 14.1562 61.7083 14.3622 61.9108 14.5683C62.1234 14.7744 62.4372 14.9392 62.8726 15.0629C63.2775 15.1762 63.7635 15.2381 64.3203 15.2484C64.371 15.2484 64.4924 15.2484 64.5734 15.2484C65.0898 15.2277 65.5454 15.1762 65.92 15.0629C66.3553 14.9495 66.6793 14.7847 66.8919 14.5786C67.1045 14.3828 67.2563 14.1768 67.3373 13.9707C67.4285 13.7646 67.469 13.5379 67.469 13.3112Z" fill="white"/>
+</svg>

package/studio/public/pencil-simple.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="pencil-simple">
+<path id="Union" d="M11.1719 1.375C13.0789 1.37516 14.6248 2.92109 14.625 4.82812C14.625 5.74403 14.2609 6.62286 13.6133 7.27051L12.4453 8.4375C12.444 8.43881 12.4437 8.44108 12.4424 8.44238C12.4411 8.44369 12.4388 8.44402 12.4375 8.44531L6.44238 14.4424C6.32517 14.5596 6.16576 14.625 6 14.625H2C1.65482 14.625 1.375 14.3452 1.375 14V10C1.375 9.83424 1.44041 9.67483 1.55762 9.55762L8.72949 2.38672C9.37714 1.73908 10.256 1.375 11.1719 1.375ZM2.625 10.2588V13.375H5.74023L11.1152 8L7.99902 4.88379L2.625 10.2588ZM11.1719 2.625C10.5875 2.625 10.0265 2.85729 9.61328 3.27051L8.88379 3.99902L12 7.11523L12.7295 6.38672C13.1427 5.9735 13.375 5.41251 13.375 4.82812C13.3748 3.61145 12.3886 2.62516 11.1719 2.625Z" fill="#FAFAFA"/>
+</g>
+</svg>

package/studio/src/active-outer-TVYUEURE.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Ellipse 9" d="M32 16C32 24.8366 24.8366 32 16 32C13.6079 32 8.47571 32 4.66541 32C2.08808 32 0 29.9134 0 27.3361C0 23.6798 0 18.763 0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16Z" fill="#F94305"/>
+</svg>

package/studio/src/app.css

@@ -0,0 +1,4 @@
+@font-face{font-family:Inter UI;font-style:normal;font-display:swap;font-weight:100 900;src:url("/src/inter-cyrillic-ext-wght-normal-IYF56FF6.woff2") format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter UI;font-style:normal;font-display:swap;font-weight:100 900;src:url("/src/inter-cyrillic-wght-normal-JEOLYBOO.woff2") format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter UI;font-style:normal;font-display:swap;font-weight:100 900;src:url("/src/inter-greek-ext-wght-normal-EOVOK2B5.woff2") format("woff2-variations");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter UI;font-style:normal;font-display:swap;font-weight:100 900;src:url("/src/inter-greek-wght-normal-IRE366VL.woff2") format("woff2-variations");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter UI;font-style:normal;font-display:swap;font-weight:100 900;src:url("/src/inter-vietnamese-wght-normal-CE5GGD3W.woff2") format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter UI;font-style:normal;font-display:swap;font-weight:100 900;src:url("/src/inter-latin-ext-wght-normal-HA22NDSG.woff2") format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter UI;font-style:normal;font-display:swap;font-weight:100 900;src:url("/src/inter-latin-wght-normal-NRMW37G5.woff2") format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{color-scheme:dark;--background:#141414;--panel:#1a1a1a;--card:#1f1f1f;--hover:#2a2a2a;--border:#ffffff0d;--input:#ffffff26;--text:#f5f5f5;--muted:#979797;--accent:#f94305;--review-stroke:#e73c06;--radius:8px;font:14px Inter UI,system-ui,sans-serif;color:var(--text);background:var(--background);font-synthesis:none}*{box-sizing:border-box}body{margin:0;overscroll-behavior:none;-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}.transport,.timeline,.scene-outline,.topbar{user-select:none;-webkit-user-select:none}::selection{background:#f9430540;color:var(--text)}:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:1px solid var(--accent);outline-offset:2px}button,input,textarea{color:inherit}button{border:0}textarea{resize:vertical}input,textarea{background:var(--background);border:1px solid var(--input);border-radius:6px;padding:10px;min-width:0}p{line-height:1.5;margin:0}h2,h3{margin:0;font-size:14px;font-weight:700}strong{font-weight:700}[hidden]{display:none!important}.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.subdued{color:var(--muted)}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 12px;border-radius:6px;white-space:nowrap;background:transparent;transition:background .12s,color .12s}.button:hover{background:var(--hover)}.button.primary{background:var(--accent);color:#fff;padding:0 16px}.button.primary:hover{background:#df3b04}.button.secondary{background:#ffffff08;border:1px solid var(--input)}.button.secondary:hover{background:#ffffff12}.button.icon-button{width:32px;height:32px;padding:0;color:#bcbcbc}.button.icon-button:hover{color:#fff}.button.full{width:100%}.studio-shell{height:100dvh;min-height:560px;display:grid;grid-template-rows:56px 1fr}.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 18px;border-bottom:1px solid var(--border);background:var(--panel)}.brand{display:flex;align-items:center;flex-shrink:0}.brand-logo{display:block;width:84px;height:auto}.project-title{display:flex;gap:10px;align-items:center;min-width:0}.filename{max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.local-tag{font-size:9px;letter-spacing:1px;color:#999;border:1px solid var(--input);padding:3px 5px;border-radius:4px}.header-actions{display:flex;align-items:center;gap:12px}.session-status{font-size:11px;color:#aaa;display:flex;gap:6px;align-items:center}.session-status:before{content:"";width:5px;height:5px;border-radius:50%;background:#777}.session-status.ready:before{background:#8cc38c}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 326px;min-height:0}.editor{display:grid;grid-template-rows:minmax(0,1fr) var(--timeline-height, clamp(250px, 36vh, 380px));min-width:0;min-height:0}.preview-area{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:48px 56px 58px;background:#101010}.canvas-wrap{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative;min-height:0}canvas,.preview-video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 8px 48px #0006;background:#000}.preview-placeholder{position:absolute;display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--muted);background:#101010;padding:24px;border-radius:8px}.spinner{width:22px;height:22px;border:2px solid #ffffff25;border-top-color:#ccc;border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-banner{position:absolute;z-index:5;left:16px;right:16px;top:12px;max-height:160px;overflow:auto;white-space:pre-wrap;background:#3a201a;border:1px solid #f9430540;color:#ffd4c7;padding:12px;border-radius:6px;font:11px/1.5 Inter UI,system-ui,sans-serif}.error-banner summary{cursor:pointer;white-space:normal}.error-banner pre{margin:10px 0 0;font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}.timeline{background:var(--panel);border-top:1px solid var(--border);min-width:0;display:flex;flex-direction:column}.transport{height:57px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border)}.transport-left,.transport-center{display:flex;align-items:center;gap:10px}.transport-center{gap:16px}.timecode{font:11px Inter UI,system-ui,sans-serif;font-variant-numeric:tabular-nums;min-width:63px}.frame-label{color:var(--muted);font-size:11px;min-width:60px}.ruler{height:36px;display:flex;justify-content:space-between;align-items:center;color:#858585;font-size:10px;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--border);background:repeating-linear-gradient(to right,transparent 0,transparent calc(2.5% - 1px),#ffffff0e calc(2.5% - 1px),#ffffff0e 2.5%);background-size:100% 5px;background-position:bottom;background-repeat:no-repeat}.playhead{position:absolute;top:27px;bottom:10px;width:1px;background:var(--accent);pointer-events:none;z-index:3}.playhead:before{content:"";position:absolute;top:-10px;left:50%;transform:translate(-50%);width:16px;height:16px;background:var(--timeline-playhead) left top/16px 94px no-repeat}.slider{touch-action:none;accent-color:var(--accent)}.comment-markers{position:absolute;inset:0;pointer-events:none;z-index:5}.button.timeline-marker{position:absolute;top:30px;transform:translate(-50%);width:22px;height:22px;padding:0;background:#ddd;color:#222;border-radius:4px;pointer-events:auto;box-shadow:0 1px 3px #0008}.button.timeline-marker svg{width:13px;height:13px}.button.timeline-marker:hover{background:var(--accent);color:#fff}.button.timeline-marker.resolved{background:#506850;color:#d9ead9}.comments-panel{border-left:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;min-height:0}.panel-heading{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;flex-shrink:0}.panel-heading h2{font-size:13px;display:flex;align-items:center;gap:8px}.count{font:10px Inter UI,system-ui,sans-serif;color:#aaa;background:#ffffff0a;border-radius:4px;padding:3px 5px}.panel-tools{padding:0 16px 14px}.segmented{display:flex;padding:3px;background:#111;border:1px solid var(--border);border-radius:7px;gap:3px}.segmented .button{height:27px;flex:1;font-size:11px;color:#aaa;padding:0 9px}.segmented .button.active{background:#303030;color:#fff;box-shadow:0 1px 3px #0005}.threads{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 14px 20px}.empty-state{text-align:center;display:flex;flex-direction:column;align-items:center;padding:80px 20px 30px;color:#8e8e8e;gap:13px}.empty-state>.icon{border:1px solid var(--input);width:44px;height:44px;border-radius:12px;background:#ffffff03}.empty-state h3{font-size:13px;color:#c9c9c9;line-height:1.5;max-width:190px}.empty-state p{font-size:12px;line-height:1.65;max-width:230px}.thread{background:transparent;border:0;border-radius:8px;margin-bottom:10px;padding:13px;scroll-margin-top:12px}.thread-heading{display:flex;gap:9px;align-items:center;margin-bottom:12px}.avatar{height:28px;width:28px;display:grid;place-items:center;border-radius:50%;background:#48403b;color:#e8c5af;font-size:11px}.thread-meta{display:flex;flex-direction:column;gap:3px;flex:1}.thread-meta strong{font-size:11px}.thread-meta span{font-size:10px;color:gray}.thread-heading .button{height:26px;width:26px}.timestamp{display:inline-flex;color:#ff8e66;background:#f9430510;border-radius:4px;font:10px Inter UI,system-ui,sans-serif;padding:5px 7px;height:auto}.timestamp:hover{background:#f9430525!important}.comment-text{margin-top:10px;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;color:#dedede;line-height:1.65}.revision-note{display:inline-block;font-size:10px;color:#b39370;padding-top:9px}.reply{border-left:1px solid #ffffff20;padding-left:11px;margin-top:14px;overflow-wrap:anywhere}.reply strong{font-size:10px;color:#aaa}.reply p{font-size:12px;white-space:pre-wrap;padding-top:4px}.reply-form{display:flex;align-items:flex-end;gap:5px;margin-top:15px;padding-top:10px;border-top:1px solid var(--border)}.reply-form textarea{background:transparent;border:0;padding:6px 2px;flex:1;font-size:11px;line-height:1.5;resize:vertical}.reply-form .button{height:27px;width:27px;background:#ffffff08}.dialog{width:min(470px,calc(100vw - 32px));margin:auto;padding:0;border:1px solid var(--input);border-radius:12px;background:#202020;color:#fff;box-shadow:0 25px 100px #0009}.dialog::backdrop{background:#0008;backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--border)}.dialog-heading h2{font-size:15px}.dialog-content{display:flex;flex-direction:column;gap:16px;padding:20px}.dialog-content>.timestamp{align-self:flex-start}.dialog-content textarea{width:100%;line-height:1.6}.field-label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#bdbdbd}.field-label input{width:100%;color:#eee}.dialog footer{border-top:1px solid var(--border);padding:14px 20px;display:flex;justify-content:flex-end;gap:8px}.form-error{font-size:12px;color:#ffb29c;white-space:pre-wrap}.form-error:empty{display:none}.export-progress{font-size:12px;color:#c9c9c9}.dialog-content .subdued{font-size:12px;white-space:pre-line;line-height:1.8}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,10px);opacity:0;pointer-events:none;z-index:100;background:#373737;border:1px solid #ffffff20;color:#fff;padding:12px 18px;border-radius:8px;box-shadow:0 5px 20px #0005;transition:opacity .15s,transform .15s;max-width:80vw;font-size:12px}#toast.visible{opacity:1;transform:translate(-50%)}@media(max-width:1050px){.workspace{grid-template-columns:minmax(0,1fr) 286px}.preview-area{padding:32px 24px 52px}.frame-label,.transport-left{display:none}.transport{padding:0 12px}.transport-center{gap:10px}.project-title{flex:1}.header-actions .session-status{display:none}.topbar{gap:18px}}@media(max-width:720px){.studio-shell{height:auto;min-height:100dvh}.workspace{display:flex;flex-direction:column}.editor{height:85dvh;min-height:650px;grid-template-rows:minmax(0,1fr) var(--timeline-height, 320px)}.comments-panel{border-left:0;border-top:1px solid var(--border);min-height:360px;max-height:65dvh}.topbar{height:56px;padding:0 12px;gap:12px}.local-tag{display:none}.filename{font-size:11px;max-width:160px}.header-actions{gap:4px}.preview-area{padding:24px 18px 44px}.transport .button:not(.icon-button){font-size:11px;padding:0 8px}.empty-state{padding:24px 20px}.dialog{max-height:90dvh;overflow:auto}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.spinner{animation-duration:2s}}@media(max-width:720px){.timecode{white-space:nowrap;min-width:57px}.transport>.button{width:34px;padding:0!important}.transport>.button>span:last-child:not(.icon){display:none}}.timeline{min-height:0}.transport{height:49px;flex-shrink:0}.scene-outline{display:flex;flex-direction:column;min-height:0;flex:1;--outline-label:270px}.outline-toolbar{height:38px;padding:0 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--border);flex-shrink:0}.outline-toolbar>div,.outline-tools{display:flex;align-items:center;gap:12px}.outline-toolbar strong{font-size:11px}.outline-summary{font-size:10px;color:var(--muted);white-space:nowrap}.outline-tools .button{height:25px;padding:0 7px;font-size:10px;color:var(--muted)}.outline-legend{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:10px;white-space:nowrap}.outline-legend i{width:10px;height:6px;background:#b8b8b82b;border-radius:2px}.outline-legend i.animated{background:#e57f5080;margin-left:5px}.outline-body{display:flex;flex:1;min-height:0}.outline-main{flex:1;min-width:0;position:relative;display:flex;flex-direction:column}.outline-ruler-row,.outline-comments-row,.outline-row{display:grid;grid-template-columns:var(--outline-label) minmax(0,1fr)}.outline-ruler-row{height:30px;flex-shrink:0;margin-right:12px}.outline-column-title{font-size:10px;color:var(--muted);display:flex;align-items:center;padding-left:16px;border-right:1px solid var(--border)}.outline-ruler-time{position:relative;margin-left:8px}.outline-ruler-time .ruler{height:30px}.outline-ruler-time .slider{position:absolute;inset:0;margin:0;height:30px;width:100%;opacity:0;cursor:ew-resize}.outline-comments-row{height:28px;flex-shrink:0;border-bottom:1px solid var(--border);margin-right:12px}.outline-comments-row>span{color:var(--muted);padding:6px 16px;border-right:1px solid var(--border);font-size:10px}.outline-comment-lane{position:relative;margin-left:8px}.outline-comment-lane .timeline-marker{top:3px;width:19px;height:20px}.outline-scroll{overflow-y:scroll;flex:1;min-height:0;position:relative;scrollbar-width:thin;scrollbar-color:#ffffff25 transparent}.outline-spacer{position:relative;width:100%}.outline-window{position:absolute;top:0;left:0;right:0}.outline-row{height:32px;--track-color:160,173,180}.outline-row.type-group,.outline-row.type-scene{--track-color:221,144,103}.outline-row.type-text{--track-color:155,169,201}.outline-row.type-path,.outline-row.type-rect{--track-color:171,163,206}.outline-row.type-video,.outline-row.type-image{--track-color:134,177,170}.outline-row.type-audio{--track-color:152,185,129}.outline-row:hover{background:#ffffff04}.outline-row.selected{background:#ffffff0b}.outline-label{display:flex;align-items:center;min-width:0;gap:4px;border-right:1px solid var(--border);padding-right:8px}.button.disclosure{width:16px;height:22px;color:#898989;flex-shrink:0}.disclosure .icon svg{width:12px;height:12px}.disclosure.expanded .icon{transform:rotate(90deg)}.disclosure-placeholder{width:16px;flex-shrink:0}.button.outline-select{min-width:0;height:28px;padding:0 2px;justify-content:flex-start;font-size:14px;flex:1;overflow:hidden;color:#bcbcbc}.outline-select span{overflow:hidden;text-overflow:ellipsis}.selected .outline-select{color:#fff}.node-type{font-size:9px;color:#666}.badge{display:inline-flex;align-items:center;border-radius:3px;background:#ffffff08;padding:2px 4px;font-size:9px;color:#aaa;white-space:nowrap}.outline-lane{margin:0 12px 0 8px;position:relative;cursor:pointer;background:repeating-linear-gradient(to right,#ffffff07 0,#ffffff07 1px,transparent 1px,transparent 16.6667%)}.lifetime-bar{position:absolute;top:7px;height:18px;background:rgba(var(--track-color),calc(.35 - .23 * var(--outline-reveal,1)));border:1px solid rgba(var(--track-color),calc(.25 * var(--outline-reveal,1)));border-radius:4px}.motion-band{position:absolute;top:7px;height:18px;border-radius:4px;background:rgba(var(--track-color),.35);pointer-events:none;opacity:var(--outline-reveal,1)}.selected .lifetime-bar{border-color:rgba(var(--track-color),calc(.8 * var(--outline-reveal,1)))}.selected .motion-band{background:rgba(var(--track-color),.6)}.bar-duration{position:absolute;left:7px;top:9px;font:9px Inter UI,system-ui,sans-serif;color:rgba(var(--track-color),.85);pointer-events:none;opacity:var(--outline-reveal,1)}.property-row .lifetime-bar{top:15px;height:2px;border:0}.property-row .motion-band{top:14px;height:4px}.property-row .outline-select{font:10px Inter UI,system-ui,sans-serif;color:#929292}.button.keyframe-dot{width:7px;height:7px;min-width:0;padding:0;border-radius:1px;position:absolute;top:12px;transform:translate(-50%) rotate(45deg);background:#cbb797;z-index:1}.button.keyframe-dot:hover{background:#fff;outline:2px solid #f9430550}.outline-playhead-track{position:absolute;top:0;bottom:0;left:calc(var(--outline-label) + 8px);right:12px;pointer-events:none}.outline-playhead-track .playhead{top:26px;bottom:0}.outline-empty{font-size:11px;color:var(--muted);padding:22px 16px}.scene-inspector{flex:0 0 244px;width:244px;border-left:1px solid var(--border);display:flex;flex-direction:column;background:#171717;min-height:0}.inspector-heading{display:flex;justify-content:space-between;align-items:center;padding:4px 8px 4px 14px;min-height:35px;border-bottom:1px solid var(--border);gap:8px}.inspector-heading strong{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inspector-content{overflow:auto;padding:12px 14px;font-size:11px;color:#aaa}.inspector-badges{display:flex;gap:5px}.source-location{font:10px Inter UI,system-ui,sans-serif;overflow-wrap:anywhere;margin:10px 0 14px;color:#8d8d8d}.property-list{display:grid;grid-template-columns:72px minmax(0,1fr);gap:7px 9px;margin:0;font-size:10px}.property-list dt{color:#787878;overflow-wrap:anywhere}.property-list dd{margin:0;color:#c5c5c5;overflow-wrap:anywhere;white-space:pre-wrap}.inspector-content h4{font-size:10px;color:#d0d0d0;margin:18px 0 10px}.inspector-note{font-size:10px;line-height:1.6;color:#686868;margin-top:18px}.inspector-key{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:3px 7px;padding:5px 0;border-bottom:1px solid var(--border)}.inspector-key .key-time{font:10px Inter UI,system-ui,sans-serif;padding:0;justify-content:flex-start;height:22px;color:#c8a78d}.inspector-key code{overflow-wrap:anywhere;font-size:10px}.inspector-key small{grid-column:2;color:#666}@media(max-width:1250px){.scene-outline{--outline-label:225px}.outline-legend{display:none}.scene-inspector{flex-basis:210px;width:210px}}@media(max-width:900px){.scene-outline{--outline-label:190px}.outline-summary{font-size:9px}.node-type{display:none}.scene-inspector{position:absolute;right:0;top:0;bottom:0;z-index:8;width:250px;box-shadow:-10px 0 20px #0005}.outline-body{position:relative}}@media(max-width:720px){.scene-outline{--outline-label:165px}.outline-toolbar{padding:0 9px;gap:5px}.outline-toolbar>div{gap:8px}.outline-tools .button{font-size:9px}.outline-summary{max-width:170px;white-space:normal;line-height:1.4}.outline-label .badge{display:none}.preview-area{padding:18px 16px 40px}}.timeline{position:relative}.panel-resize{position:absolute;top:0;left:0;right:0;height:12px;cursor:ns-resize;z-index:20;touch-action:none;outline:none;background:transparent}.panel-resize:before{content:"";position:absolute;width:36px;height:4px;background:#737373;border-radius:999px;left:calc(50% - 18px);top:4px}.panel-resize:hover:before,.panel-resize:focus-visible:before,.editor[data-panel-resizing] .panel-resize:before{background:#aaa}.outline-ruler-row,.outline-comments-row{margin-right:calc(12px + var(--outline-gutter,0px))}.outline-playhead-track{right:calc(12px + var(--outline-gutter,0px))}.selection-overlay{position:absolute;pointer-events:none;overflow:visible}.selection-overlay polygon{fill:#ff61000a;stroke:#ff7433;stroke-width:1.5px;stroke-linejoin:round}.selection-overlay polygon.hover-outline{fill:none;stroke:#ff995c;stroke-opacity:.65;stroke-width:1px;stroke-dasharray:4 3}canvas:focus{outline:none}canvas:focus-visible{outline:1px solid var(--accent);outline-offset:3px}.studio-shell{--header-height:56px;grid-template-rows:minmax(0,1fr)}.workspace{grid-template-columns:minmax(0,1fr) 300px}.editor{grid-template-rows:var(--header-height,80px) minmax(0,1fr) 56px var(--timeline-height,clamp(200px, calc(36vh - 56px) ,324px))}.topbar{justify-content:flex-start;gap:16px;border:0;background:#141414;padding:0 16px}.project-title{min-width:0;font-size:14px;line-height:1.2;font-weight:400;color:var(--muted)}.topbar .filename{font-size:inherit;max-width:100%}.canvas-controls{margin-left:auto;display:flex;align-items:center;gap:2px;flex-shrink:0}.canvas-controls .button{width:28px;height:28px;padding:0;color:var(--text)}.canvas-controls .button .icon,.canvas-controls .button .icon svg{width:16px;height:16px}.canvas-controls .button[aria-pressed=true]{background:var(--hover)}.canvas-scale{display:flex;align-items:center;gap:4px;padding-left:4px;font-size:14px;font-weight:500;white-space:nowrap}.canvas-scale .icon,.canvas-scale .icon svg{width:10px;height:10px}.canvas-scale .icon{transform:rotate(90deg)}.canvas-wrap:fullscreen{width:100vw;height:100dvh;background:#000;outline:none;cursor:pointer}.canvas-wrap:fullscreen canvas{width:min(100vw,calc(100dvh * var(--preview-aspect)));height:auto;outline:none;cursor:pointer!important}.canvas-wrap:fullscreen :is(.selection-overlay,.review-canvas){display:none}.preview-area{background:var(--background);padding:20px 48px}.preview-area canvas{position:relative}.preview-area[data-checkerboard=true] canvas{background:transparent}.canvas-backdrop{position:absolute;pointer-events:none;background:repeating-conic-gradient(#ccc 0 25%,#e8e8e8 0 50%) 0/16px 16px}.preview-buffering{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none}.preview-buffering-chip{display:flex;padding:11px;border-radius:50%;background:#000b}canvas{box-shadow:none}.studio-sidebar{display:flex;flex-direction:column;min-height:0;min-width:0;background:#171717;border-left:1px solid var(--border)}.sidebar-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:var(--header-height,80px);padding:0 12px;border-bottom:1px solid var(--border)}.sidebar-actions .session-status{margin-right:auto}.sidebar-actions .button.primary{height:30px;font-size:12px}.studio-sidebar .comments-panel{flex:1;min-height:0;border:0;background:transparent}.comment-tabs{display:flex;align-items:center;gap:8px;padding:16px;flex-shrink:0}.comment-tabs .button{height:26px;padding:2px 8px;gap:6px;border-radius:8px;font-size:13px;color:#fafafa;opacity:.5}.comment-tabs .button[aria-pressed=true]{background:#262626;opacity:1}.comment-tabs .button:hover{opacity:1}.comment-tabs strong{font-size:13px}.comment-tabs .icon,.comment-tabs .icon svg{display:block;width:16px;height:16px}.inspector-panel{flex:1;min-height:0;display:flex;flex-direction:column}.studio-sidebar .scene-inspector{position:static;width:100%;flex:1;border:0;box-shadow:none}.studio-sidebar .inspector-heading{min-height:48px;padding:8px 12px 8px 18px}.studio-sidebar .inspector-heading strong{font-size:13px}.studio-sidebar .inspector-content{padding:18px}.studio-sidebar .property-list{grid-template-columns:90px minmax(0,1fr);font-size:12px;gap:10px}.studio-sidebar .inspector-content h4{font-size:12px;margin-top:24px}.studio-sidebar .source-location{font-size:11px;margin:16px 0 22px}.inspector-empty{padding:22px 18px;color:var(--muted);font-size:12px;line-height:1.6}.inspector-empty strong{color:var(--text);font-size:13px}.scene-inspector:not([hidden])+.inspector-empty{display:none}.transport{position:relative;height:56px;background:#141414;padding:0 12px;gap:12px}.transport-left{display:flex;gap:8px;min-width:0}.transport-right{display:flex;align-items:center;margin-left:auto;gap:12px}.studio-shell[data-mode=interactive] :is(.transport-left,.transport-right){position:relative;top:16px;z-index:21}.transport-right .button{width:28px}.timeline-zoom{display:flex;align-items:center;gap:2px}.timeline-zoom .button{height:28px;padding:0;font-size:11px;color:var(--muted)}.timeline-zoom input{width:80px;height:12px;padding:0;accent-color:#b4b4b4}@media(max-width:1000px){.canvas-controls{gap:2px}.timeline-zoom input{width:48px}.transport-right{gap:4px}}@media(max-width:800px){.topbar{gap:10px;padding:0 12px}.project-title{font-size:14px}.canvas-controls .button{width:28px}.canvas-scale{font-size:14px;padding-left:2px}}.transport-left .timecode{font-size:14px;min-width:0}.time-display{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:6px;background:transparent;white-space:nowrap}.time-display:hover{background:var(--hover)}.timecode-current{display:grid;text-align:left}.timecode-current>span{grid-area:1 / 1}.timecode-sizer{visibility:hidden;pointer-events:none}.transport-left .frame-label{font-size:10px;min-width:0;margin-left:4px}.transport-left .loop-toggle[aria-pressed=true]{color:var(--accent);background:transparent}.transport-left .loop-toggle:hover{background:var(--hover)}.transport-left .loop-toggle[aria-pressed=true]:hover,.transport-right .button[aria-pressed=true]:hover{background:#f943051a}.transport-left .button{width:28px}.mode-switch{position:absolute;left:50%;transform:translate(-50%);display:flex;gap:2px;padding:4px;border-radius:12px;background:#ffffff0d;isolation:isolate}.mode-switch:before{content:"";position:absolute;top:4px;left:4px;width:32px;height:32px;border-radius:9px;background:#ffffff1a;z-index:-1;transition:transform var(--mode-duration,.3s) ease-in-out}.mode-switch[data-mode=interactive]:before{transform:translate(34px)}.mode-switch .button{width:32px;height:32px;padding:0;border-radius:9px}.mode-switch .button[aria-pressed=false]{opacity:.7}.mode-switch .button:hover{background:#ffffff08;opacity:1}.mode-switch .icon,.mode-switch .icon svg,.mode-switch img{display:block;width:20px;height:20px}.outline-row{overflow:hidden}.outline-row:not(.property-row) .outline-label{min-height:0}.outline-row:not(.property-row) .outline-select{height:100%}.outline-row:not(.property-row) .disclosure{max-height:100%}.outline-row:not(.property-row) .lifetime-bar,.outline-row:not(.property-row) .motion-band{height:var(--layer-bar-height,18px);top:50%;transform:translateY(-50%)}.outline-row:not(.property-row) .bar-duration{top:50%;transform:translateY(-50%);line-height:9px}.property-row .outline-label,.property-row .outline-lane{min-height:32px}@media(max-width:1100px){.workspace{grid-template-columns:minmax(0,1fr) 270px}.transport-left .subdued,.transport-left .frame-label{display:none}.preview-area{padding-left:24px;padding-right:24px}}@media(max-width:720px){.workspace{grid-template-columns:minmax(0,1fr);overflow:auto}.editor{min-height:650px;grid-template-rows:var(--header-height,80px) minmax(0,1fr) 56px var(--timeline-height,244px)}.studio-sidebar{min-height:280px;border-left:0;border-top:1px solid var(--border)}.studio-sidebar .comments-panel{min-height:240px}.preview-area{padding:16px}}@media(prefers-reduced-motion:reduce){.mode-switch:before{transition:none}}.editor{transition:grid-template-rows var(--mode-duration,.3s) ease-in-out}.editor[data-panel-resizing]{transition:none;user-select:none}.studio-shell[data-mode=comment] .editor{grid-template-rows:var(--header-height,80px) minmax(0,1fr) 60px 106px}.editor{--mode-reveal:1;--floating:calc(1 - var(--mode-reveal))}.transport{height:calc(56px + 4px * var(--floating));margin:0 calc(12px * var(--floating));padding:0 calc(12px + 4px * var(--floating));border:0;border-radius:calc(20px * var(--floating)) calc(20px * var(--floating)) 0 0;background:rgb(calc(20 + 7 * var(--floating)) calc(20 + 7 * var(--floating)) calc(20 + 7 * var(--floating)))}.timeline{margin:0 calc(12px * var(--floating)) calc(12px * var(--floating));padding:0 calc(12px * var(--floating)) calc(12px * var(--floating));border:0;border-radius:0 0 calc(20px * var(--floating)) calc(20px * var(--floating));background:rgb(calc(26 + var(--floating)) calc(26 + var(--floating)) calc(26 + var(--floating)))}.studio-shell[data-mode=comment] .transport-left{gap:12px}.studio-shell[data-mode=comment] .frame-label{display:none}.timeline{overflow:clip}.outline-toolbar,.outline-ruler-row,.outline-comments-row{overflow:hidden;transition:height var(--mode-duration,.3s) ease-in-out,opacity var(--mode-duration,.3s)}.is-review .outline-toolbar,.is-review .outline-comments-row{height:0;opacity:0;border-bottom:0;pointer-events:none}.is-review .outline-scroll{overflow-y:hidden}.outline-row,.outline-ruler-row{grid-template-columns:calc(var(--outline-label) * var(--outline-reveal,1)) minmax(0,1fr)}.is-review .outline-column-title{visibility:hidden;padding:0;border:0;overflow:hidden}.is-review .outline-label{visibility:hidden;padding:0!important;border:0;overflow:hidden}.is-review .outline-lane,.is-review .outline-row{background:none}.is-review .outline-scroll{outline:none}.outline-playhead-track{left:calc(var(--outline-label) * var(--outline-reveal,1) + 8px)}.is-review .outline-playhead-track{top:0}.is-review .playhead{top:26px;bottom:auto;height:40px;width:2px;border-radius:2px}.review-scene-slider{position:absolute;top:0;left:calc(var(--outline-label) + 8px);width:calc(100% - var(--outline-label) - 20px);height:32px;margin:0;padding:0;opacity:0;z-index:4;cursor:ew-resize}.is-review .review-scene-slider{top:30px;left:calc(var(--outline-label) * var(--outline-reveal,1) + 8px);width:calc(100% - var(--outline-label) * var(--outline-reveal,1) - 20px);height:48px}.is-review .outline-main:has(.review-scene-slider:focus-visible) .lifetime-bar{outline:1px solid var(--accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){.editor,.transport,.timeline,.outline-row,.outline-toolbar,.outline-ruler-row,.outline-comments-row,.outline-playhead-track{transition:none}}.comment-composer{flex-shrink:0;margin:0;padding:16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:12px}.composer-heading,.composer-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.composer-heading strong{font-size:12px;font-weight:500;color:#aaa}.composer-heading .timestamp{font-size:11px;padding:3px 6px}.comment-composer textarea{width:100%;min-height:88px;max-height:160px;resize:vertical;padding:12px;font-size:13px}.composer-actions{align-items:flex-end}.composer-actions>.button{width:32px;height:32px;flex-shrink:0;border-radius:8px}.comment-range{flex:1;min-width:0;color:#999;font-size:12px}.comment-range summary{cursor:pointer;width:fit-content;padding:6px 0}.comment-range input{width:100%;margin-top:6px;font-size:12px}.comment-composer .form-error{margin:0;font-size:12px}.time-control{position:relative;min-width:0}.nudge-settings{position:absolute;bottom:calc(100% + 12px);left:0;width:248px;max-width:calc(100vw - 64px);padding:12px;z-index:30;background:#1f1f1f;border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px #0006;font-size:14px}.nudge-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.nudge-heading .button{height:24px}.nudge-settings label{display:grid;grid-template-columns:1fr 112px;gap:12px;align-items:center;margin-top:8px}.nudge-settings input,.nudge-settings select{width:100%;min-width:0;height:32px;padding:4px 8px;font:inherit;color:var(--text);background:var(--background);border:1px solid var(--input);border-radius:4px}.nudge-settings input{user-select:text;-webkit-user-select:text}.nudge-settings input:invalid{border-color:var(--accent)}.button .icon,.button .icon svg{display:block;width:16px;height:16px;flex-shrink:0}.mode-switch .button .icon,.mode-switch .button .icon svg{width:16px;height:16px}.studio-tooltip{position:fixed;z-index:1000;display:flex;align-items:center;gap:14px;max-width:min(320px,calc(100vw - 16px));padding:7px 10px;border:1px solid #ffffff14;border-radius:8px;background:#202020;color:#fafafa;font:14px/1.3 Inter UI,system-ui,sans-serif;box-shadow:0 2px 6px #0003;pointer-events:none;user-select:none}.studio-tooltip>span:first-child{min-width:0;overflow-wrap:anywhere}.tooltip-shortcut{flex-shrink:0;color:#aaa;white-space:nowrap}.studio-shell[data-mode=comment] .editor{grid-template-rows:var(--header-height,80px) minmax(0,1fr) 60px 132px}.studio-shell[data-mode=comment] .editor[data-review-layers=true]{grid-template-rows:var(--header-height,80px) minmax(0,1fr) 60px var(--timeline-height,320px)}.studio-shell[data-mode=comment] .selection-overlay{visibility:hidden}.review-canvas{cursor:var(--comment-cursor);touch-action:none}.transport-right{gap:8px}.transport-right .button[aria-pressed=true]{color:var(--accent)}.outline-ruler-row,.outline-ruler-time .ruler{height:56px}.outline-ruler-time .ruler{align-items:flex-end;padding-bottom:8px}.outline-ruler-time .slider{height:56px}.is-review .review-scene-slider{top:56px}.is-review .playhead,.outline-playhead-track .playhead{top:52px}.review-canvas{position:absolute;z-index:6;user-select:none}.review-regions{position:absolute;inset:0;pointer-events:none}.review-selection,.review-saved-region{position:absolute;border:1px dashed var(--review-stroke);border-radius:2px;background:transparent;pointer-events:none}.review-time-pins{position:absolute;top:0;left:calc(var(--outline-label) * var(--outline-reveal,1) + 8px);right:calc(12px + var(--outline-gutter,0px));height:56px;pointer-events:none;z-index:7}.review-range-selection{position:absolute;top:67px;height:26px;border:1px solid var(--review-stroke);border-radius:2px;background:#f943054f;pointer-events:none}.review-time-range{position:absolute;height:26px;top:67px;border:1px solid var(--review-stroke);border-radius:2px;background:#f943054f;pointer-events:none}.review-time-range.is-active{background:#f943054f}.comment-avatar{position:relative;display:inline-flex;width:28px;height:28px;flex:0 0 28px;align-items:center;justify-content:center;border-radius:50%;background:#754029;color:#fff0e8;font:12px/1 Inter UI,system-ui,sans-serif;overflow:hidden}.comment-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.button.review-pin{position:absolute;width:24px;height:24px;padding:4px;border:0;border-radius:4px;background:transparent;box-shadow:none;transform:translate(-4px,-4px);pointer-events:auto;cursor:pointer;z-index:3}.button.review-pin:hover,.button.review-pin.is-active{background:transparent}.button.review-pin.is-active{width:40px;height:40px;outline:none}.button.review-pin.is-draft{outline:none}.review-time-pins .button.review-pin{transform:translate(-4px)}.comment-pin-artwork{position:relative;display:block;width:16px;height:16px;flex:0 0 16px}.comment-pin-artwork>img{display:block;position:absolute;inset:0;width:16px;height:16px}.comment-pin-artwork>.comment-pin-photo{inset:2.5px;width:11px;height:11px;border-radius:50%;object-fit:cover}.profile-button.button{padding:0;width:30px;height:30px;border-radius:50%;flex-shrink:0}.sidebar-actions .session-status{font-size:10px}.review-bubble,.review-hover{position:fixed;z-index:80;width:312px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;border:1px solid #ffffff14;border-radius:18px 18px 18px 3px;background:#292929;box-shadow:0 8px 30px #0006;font-size:14px;color:var(--text)}.review-bubble:focus-within{border-color:var(--review-stroke)}.review-bubble-heading{display:flex;gap:10px;align-items:center;padding:14px 14px 10px}.review-bubble-heading>div{min-width:0;flex:1}.review-bubble-heading strong{display:block;font-weight:400}.review-bubble small,.review-hover small{display:block;color:var(--muted);font-size:11px;margin-top:4px;overflow-wrap:anywhere}.review-bubble-content{padding:0 14px;overflow-wrap:anywhere}.review-comment-text{white-space:pre-wrap;margin:0 0 12px}.review-reply{padding:10px 0;border-top:1px solid var(--border)}.review-reply strong{font-size:12px;color:var(--muted)}.review-reply p{white-space:pre-wrap}.review-bubble textarea{display:block;width:100%;min-height:76px;max-height:180px;padding:12px 14px;border:0;background:transparent;border-radius:0;resize:vertical;outline:none;font:14px/1.5 Inter UI,system-ui,sans-serif}.review-bubble-actions{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding:10px 12px}.review-bubble-actions .button.primary{padding:0;width:32px;height:32px;border-radius:50%}.review-bubble .form-error{padding:0 14px 12px}.review-hover{display:flex;gap:12px;padding:14px;pointer-events:none}.review-hover>div{flex:1;min-width:0}.review-hover p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;margin-top:6px}.review-author{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}.review-author strong{font-weight:400}.review-author span{color:var(--muted);font-size:12px}.comment-target-label{color:#979797;font-size:11px}.review-pointer{position:fixed;width:20px;height:20px;pointer-events:none;z-index:2000}.review-pointer .comment-pin-artwork{transform:scale(1.25);transform-origin:top left}.comment-pin-artwork>.comment-pin-active{display:none;transform:scaleY(-1)}.review-pin.is-active .comment-pin-artwork{width:32px;height:32px;flex-basis:32px}.review-pin.is-active .comment-pin-default{display:block;opacity:0;width:100%;height:100%}.review-pin.is-active .comment-pin-active{display:block;width:100%;height:100%}.review-pin.is-active .comment-pin-photo{inset:4px;width:24px;height:24px}.review-bubble.is-composing{width:200px;min-height:32px;border:1px solid var(--review-stroke);border-radius:8px;background:#1f1f1f;overflow:visible;box-shadow:0 4px 6px -4px #0000001a,0 10px 15px -3px #0000001a}.review-bubble.is-composing form{display:flex;gap:8px;align-items:flex-end;padding:5px 5px 5px 10px}.review-bubble.is-composing textarea{flex:1;width:0;min-width:0;height:20px;min-height:20px;max-height:240px;padding:0;resize:none;font:14px/20px Inter UI,sans-serif}.review-bubble.is-composing .review-bubble-actions{padding:0;border:0;flex:0 0 20px}.review-bubble.is-composing .review-bubble-actions>.button:not(.primary){display:none}.review-bubble.is-composing .button.primary{width:20px;height:20px;min-width:20px;padding:2px;margin-bottom:1px}.review-bubble.is-composing .button.primary:disabled{background:#273030;opacity:1}.review-bubble.is-composing .button.primary .icon,.review-bubble.is-composing .button.primary .icon svg{width:16px;height:16px}.review-bubble.is-composing .button.primary:disabled{color:#fafafa66}.review-bubble.is-composing .form-error:not([hidden]){position:absolute;top:100%;left:0;width:100%;padding:8px;background:#1f1f1f}.review-pin.is-active{justify-content:flex-start;align-items:flex-start}.review-bubble{transform-origin:left top}.review-range-editor{position:absolute;top:67px;height:26px;border:1px solid var(--review-stroke);border-radius:2px;pointer-events:none;z-index:10}.review-range-editor.is-point{border:0}.button.review-range-handle{position:absolute;top:-1px;width:14px;height:26px;min-width:0;padding:0;border:0;background:transparent;pointer-events:auto;cursor:ew-resize;touch-action:none}.review-range-handle:after{content:"";position:absolute;left:6px;top:0;height:26px;width:2px;border-radius:1px;background:var(--review-stroke)}.range-start{left:-7px}.range-end{right:-7px}.review-range-handle:hover:after,.review-range-handle:focus-visible:after{width:3px}.thread .comment-text,.thread .thread-meta,.thread .comment-target-label{cursor:pointer}.thread:hover,.thread.is-selected{background:#1f1f1f}.thread-location{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.thread-heading .thread-status{background:transparent;color:#fafafa;opacity:0;pointer-events:none}.thread:hover .thread-status,.thread:has(:focus-visible) .thread-status,.thread:focus-visible .thread-status{opacity:1;pointer-events:auto}.thread-status .status-hover{display:none}.thread-status:hover .icon:not(.status-hover),.thread-status:focus-visible .icon:not(.status-hover){display:none}.thread-status:hover .status-hover,.thread-status:focus-visible .status-hover{display:inline-flex}.thread-status:not(:has(.status-hover)):hover .icon,.thread-status:not(:has(.status-hover)):focus-visible .icon{display:inline-flex}.thread .reply-form[hidden]{display:none}.thread .reply-form textarea{resize:none}.studio-shell[data-mode=comment] .editor{grid-template-rows:var(--header-height,80px) minmax(0,1fr) 56px 106px}.studio-shell[data-mode=comment] .transport{height:56px;background:transparent;border-radius:0;margin:0 12px;padding:0 16px}.studio-shell[data-mode=comment] .timeline{background:#1f1f1f;border-radius:20px;margin:0 12px 12px;padding:0 17px}.is-review .outline-ruler-row,.is-review .outline-ruler-time .ruler,.is-review .outline-ruler-time .slider{height:32px}.ruler{position:relative;background:none}.ruler-label{position:absolute;top:11px;transform:translate(-50%);white-space:nowrap;line-height:12px;letter-spacing:.2px}.ruler-label:first-child{transform:none}.ruler-label:nth-child(7){transform:translate(-100%)}.ruler-tick{position:absolute;bottom:0;width:1px;height:4px;background:#ffffff0d}.ruler-tick.middle{height:6px}.ruler-tick.major{height:8px}.is-review .review-scene-slider{top:32px;height:48px}.is-review .outline-row:not(.property-row) .lifetime-bar{height:24px;background:#ffffff29;border:0;top:26px}.is-review .outline-playhead-track .playhead{top:0;bottom:auto;width:16px;height:94px;transform:translate(-7.5px);border-radius:0;background:var(--timeline-playhead) center/16px 94px no-repeat}.is-review .playhead:before{display:none}.review-time-range{top:46px;height:24px;border:1px solid #fafafa80;border-radius:3px;background:#ffffff1a}.review-time-range.is-active{visibility:hidden}.review-range-editor{top:44px;height:28px;min-width:5px;border:2px solid var(--review-stroke);border-radius:3px;background:#f943054f}.review-range-editor.is-point{border:2px solid var(--review-stroke)}.button.review-range-handle{top:0;height:24px;width:12px}.review-range-handle:after{left:5px;top:4px;height:16px;width:2px;border-radius:2px;background:#fafafa}.range-start{left:-12px}.range-end{right:-12px}.review-time-pins .button.review-pin.is-active{width:24px;height:24px}.review-time-pins .is-active .comment-pin-artwork{width:16px;height:16px;flex-basis:16px}.review-time-pins .is-active .comment-pin-default{opacity:1}.review-time-pins .is-active .comment-pin-active{display:none}.thread{padding:12px 0;margin-bottom:16px;border:1px solid #1f1f1f;border-radius:4px 16px 16px}.thread-heading{position:relative;min-height:16px;margin-bottom:8px;padding:0 16px}.thread-heading .thread-status{position:absolute;right:12px;top:-5px}.thread-location{display:block;padding:0 16px;font-size:12px;line-height:24px;overflow-wrap:anywhere}.thread-location .timestamp,.thread-location .comment-target-label{display:inline-flex;vertical-align:baseline;margin-right:4px;padding:1px 6px;border:1px solid #f9430533;border-radius:6px;background:transparent;color:#dedede;font:500 12px/19.8px Inter UI,sans-serif}.thread-location .comment-text{display:inline;margin:0;font:12px/16px Inter UI,sans-serif}.thread.is-selected .thread-status{opacity:1;pointer-events:auto}.thread .reply-form{margin-top:12px;padding:12px 12px 0 16px;gap:5px}.thread .reply-form textarea{padding:0;font-size:12px;line-height:16px}.thread .reply-form .button{width:28px;height:28px;border-radius:50%;background:#ffffff0a}.thread>.reply,.thread>.revision-note{margin-left:16px;margin-right:16px}:root{--timeline-playhead:url(data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjE2IiBoZWlnaHQ9Ijk0IiB2aWV3Qm94PSIwIDAgMTYgOTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJDb250YWluZXIiPgo8cGF0aCBpZD0iVW5pb24iIGQ9Ik0xMy41MTA3IDBDMTQuMzMzMSAwIDE1IDAuNjY2ODYgMTUgMS40ODkyNkMxNSAxLjgyMDMgMTQuODg5NyAyLjE0MiAxNC42ODY1IDIuNDAzMzJMOC42MzE5NyAxMC4xODc1QzguMjIyMzggMTAuNzE0MSA4IDExLjM2MjIgOCAxMi4wMjkzVjkzLjVDOCA5My43NzYxIDcuNzc2MTQgOTQgNy41IDk0QzcuMjIzODYgOTQgNyA5My43NzYxIDcgOTMuNVYxMi4wMjk0QzcgMTEuMzYyMiA2Ljc3NzYyIDEwLjcxNDEgNi4zNjgwMyAxMC4xODc1TDAuMzEzNDc3IDIuNDAzMzJDMC4xMTAyNTMgMi4xNDIgMy44NjY0MmUtMDUgMS44MjAzIDAgMS40ODkyNkMwIDAuNjY2ODYgMC42NjY4NiAwIDEuNDg5MjYgMEgxMy41MTA3WiIgZmlsbD0iI0Y5NDMwNSIvPgo8L2c+Cjwvc3ZnPgo=)}.storyboard{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;background:var(--background);color:var(--text)}.board-toolbar{height:64px;padding:0 24px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--border)}.board-toolbar img{margin-right:20px}.board-spacer{flex:1}.storyboard button,.storyboard select{padding:8px 12px;border-radius:7px;border:1px solid var(--input);background:var(--card);color:inherit;cursor:pointer;font:inherit}.storyboard button:disabled,.storyboard select:disabled{opacity:.45;cursor:default}.board-body{display:flex;flex:1;min-height:0}.board-scroll{flex:1;overflow:auto;background-image:radial-gradient(#353535 1px,transparent 1px);background-size:24px 24px}.board-space{position:relative}.board-world{position:relative;transform-origin:top left}.board-card{position:absolute;border:2px solid var(--input);border-radius:10px;background:var(--panel);overflow:hidden}.board-card.selected{border-color:var(--accent)}.board-card header{height:48px;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 16px;cursor:grab;touch-action:none;user-select:none}.board-card header span{color:var(--muted);font-size:13px;white-space:nowrap}.board-screen{display:grid;place-items:center;background:#000}.board-screen video{width:100%;height:100%;display:block}.board-card footer{display:flex;justify-content:space-between;padding:10px;gap:8px}.board-card footer button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.board-stale{color:#dfab76;padding:0 16px 12px;font-size:13px}.board-inspector{width:300px;flex-shrink:0;border-left:1px solid var(--border);overflow:auto;padding:22px}.board-inspector h3{margin:8px 0 16px;font-size:15px}.board-inspector h3:not(:first-child){margin-top:24px}.board-inspector select{width:100%}.board-inspector fieldset{border:0;padding:0;min-width:0}.board-inspector fieldset>button{margin:4px 5px 4px 0}.board-inspector hr{border:0;border-top:1px solid var(--border);margin:20px 0}.board-field{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;font-size:13px}.board-field>span{max-width:100px;overflow-wrap:anywhere;text-transform:capitalize}.board-field input,.board-field select{width:135px;min-width:0;border:1px solid var(--input);background:var(--background);color:inherit;border-radius:5px;padding:7px}.board-field input[type=checkbox]{width:auto}.board-multi label{display:block;margin:8px 0}.board-note,.board-inspector p{font-size:12px;line-height:1.6;color:var(--muted);margin-top:24px}.board-empty{padding:80px;color:var(--muted);line-height:2}.topbar>.board-launch{margin-left:auto;border:1px solid var(--border);border-radius:6px;padding:7px 12px;background:var(--card);color:var(--text);cursor:pointer}.clip-tracks{min-height:100px}.clip-track-row{display:grid;grid-template-columns:var(--outline-label) minmax(0,1fr);height:54px;border-bottom:1px solid var(--border)}.clip-track-label{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 16px;border-right:1px solid var(--border);font-size:12px;color:var(--muted)}.clip-track-label small{opacity:.6;font-size:10px}.clip-lane{position:relative;margin:0 12px 0 8px}.editable-clip{position:absolute;top:7px;height:40px;display:flex;align-items:center;gap:8px;padding:0 13px;background:#443024;border:1px solid #956444;border-radius:5px;color:var(--text);font-size:12px;overflow:hidden;cursor:grab;touch-action:none;user-select:none}.editable-clip.selected{border-color:var(--accent);box-shadow:none;background:#603019}.editable-clip>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.editable-clip small{color:#cfad99;white-space:nowrap}.editable-clip.dragging{opacity:.3}.clip-trim{position:absolute;right:0;top:0;bottom:0;width:9px;border:0;background:transparent;cursor:ew-resize}.clip-details-toggle{border:0;background:transparent;padding:0;width:18px;color:inherit}.clip-drag-ghost{position:absolute;top:7px;height:40px;border:1px solid var(--accent);background:#f9430530;padding:10px;color:var(--text);font-size:11px;white-space:nowrap;pointer-events:none;border-radius:5px}.clip-drag-ghost.invalid{border-color:#f66;background:#f334}.clip-layer-details{border-bottom:1px solid var(--input);background:#ffffff03}.clip-inspector fieldset{border:0;margin:0;padding:0;min-width:0}.clip-inspector h4{margin:20px 0 12px}.clip-inspector input,.clip-inspector select{min-width:0}.clip-inspector select{background:var(--background);color:var(--text);border:1px solid var(--input);padding:7px;border-radius:5px}.clip-inspector .board-field input,.clip-inspector .board-field select{width:145px}.clip-actions{display:flex;gap:8px;margin:18px 0}.clip-binding{display:grid;gap:5px;font-size:12px;padding:10px 0}.clip-binding code{color:var(--muted);overflow-wrap:anywhere}.clip-binding small{color:var(--muted)}.editable-clip.pending{border-style:dashed}.modern-timeline{--bronze:#b1883d;--teal:#12a7a7;--cerulean:#4d9ebc;--mauve:#8a6381;--clip-gray:#686868;--clip-radius:4px}.modern-timeline-shell{display:flex;flex-direction:column;min-height:0;flex:1}.track-timeline{--clip-inset:calc((var(--timeline-row-height) - var(--clip-height) - 1px) / 2);min-height:0;flex:1;display:flex;flex-direction:column;background:#181818}.track-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff26 #181818}.track-surface{position:relative;padding-bottom:12px}.track-ruler-row{position:sticky;top:0;display:grid;grid-template-columns:var(--outline-label) minmax(0,1fr);height:38px;background:#181818;border-bottom:1px solid #ffffff09;z-index:12}.track-ruler-heading{position:sticky;left:0;z-index:15;padding:12px 12px 0;color:#777;font-size:10px;background:#181818;border-right:1px solid #ffffff09}.track-ruler{position:relative;margin:0 12px 0 8px;cursor:ew-resize;touch-action:none;outline:none}.track-ruler:focus-visible{box-shadow:inset 0 0 0 1px #aaa}.track-tick{position:absolute;bottom:0;height:4px;width:1px;background:#ffffff15;pointer-events:none}.track-tick.major{height:8px;background:#ffffff25}.track-tick>span{position:absolute;bottom:13px;left:3px;font:10px Inter UI,system-ui,sans-serif;color:#888;white-space:nowrap}.track-ruler-row .review-time-pins{inset:0 12px 0 calc(var(--outline-label) + 8px);height:38px}.track-ruler-playhead{position:absolute;top:0;bottom:-1px;width:16px;transform:translate(-7.5px);background:var(--timeline-playhead) left top/16px 94px no-repeat;pointer-events:none;z-index:14}.track-playhead-line{position:absolute;top:38px;bottom:0;width:1px;transform:translate(-.5px);background:var(--accent);z-index:6;pointer-events:none}.track-timeline .clip-tracks{position:relative;min-height:0;padding-top:2px}.clip-track-block{position:relative}.track-insertion-hint{position:absolute;top:-1px;left:calc(var(--outline-label) + 8px);right:12px;height:1px;background:var(--accent);z-index:14;pointer-events:none}.track-insertion-hint span{position:absolute;right:0;bottom:4px;padding:3px 6px;border-radius:3px;background:var(--accent);color:#fff;font-size:10px;line-height:14px}.track-timeline .clip-track-row,.track-layer-row{height:var(--timeline-row-height);display:grid;grid-template-columns:var(--outline-label) minmax(0,1fr);border-bottom:1px solid #0005;transition:height var(--mode-duration) ease}.track-timeline .clip-track-label,.track-layer-header{position:sticky;left:0;z-index:8;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:9px;padding:0 12px;background:#181818;border-right:1px solid #ffffff09;font-size:10px;color:#818181}.track-timeline .clip-track-label{gap:5px;padding:0 8px}.track-number{font-variant-numeric:tabular-nums;color:#bbb;width:14px;flex:none}.track-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-name:is(button,input){height:24px;margin:0;padding:2px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:inherit;font:inherit;text-align:left}.track-name:is(button):not(:disabled):hover{background:var(--hover);color:var(--text);cursor:text}.track-name.track-name-input{width:0;background:var(--background);color:var(--text);border-color:var(--input);outline:none;user-select:text}.track-name.track-name-input:focus{border-color:var(--muted)}.track-name.track-name-input[aria-invalid=true]{border-color:var(--accent)}.track-name-error{position:absolute;left:8px;top:calc(100% - 2px);z-index:2;padding:6px 8px;border:1px solid var(--input);border-radius:4px;background:var(--card);color:var(--text);white-space:nowrap}.context-menu{z-index:100;width:190px;max-width:calc(100vw - 16px);max-height:var(--radix-context-menu-content-available-height);overflow:auto;padding:5px;border:1px solid var(--input);border-radius:8px;background:var(--card);color:var(--text);box-shadow:0 8px 24px #0006;outline:none}.context-menu-item{position:relative;display:flex;align-items:center;gap:6px;width:100%;padding:7px 8px 7px 26px;border:1px solid transparent;border-radius:4px;background:transparent;color:inherit;font:inherit;font-size:12px;text-align:left;cursor:default;user-select:none;outline:none}.context-menu-item[data-highlighted]{background:var(--hover)}.context-menu-item[data-disabled]{opacity:.35;pointer-events:none}.context-menu-item.danger{color:#ff8a72}.context-menu [role=separator]{height:1px;margin:4px;background:var(--input)}.context-menu .menu-check{position:absolute;left:8px;display:flex;align-items:center;justify-content:center;width:12px}.context-menu .menu-check .icon,.context-menu .menu-check svg{width:12px;height:12px}.track-controls{display:flex;gap:1px;flex:none}.track-toggle{display:flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:1px solid transparent;border-radius:3px;background:transparent;color:#888;font-size:10px;line-height:1}.track-toggle .icon,.track-toggle .icon svg{width:12px;height:12px}.track-toggle:hover{background:#ffffff0c;color:#eee}.track-toggle[aria-pressed=true]{color:#f5d989;background:#b1883d33}.track-visuals-off>.clip-track-row .clip-lane,.track-visuals-off>.clip-layer-details .track-layer-lane{opacity:.35}.track-timeline .clip-lane,.track-layer-lane{position:relative;margin:0 12px 0 8px}.track-timeline .editable-clip,.track-timeline .clip-drag-ghost{top:var(--clip-inset);height:var(--clip-height);border:1px solid var(--clip-color);border-radius:var(--clip-radius);padding:0 8px;display:flex;align-items:center;gap:5px;background:var(--bronze);color:#fff;font-size:11px;transition:height var(--mode-duration) ease;box-shadow:none}.track-timeline .editable-clip.selected{border-color:#fff2b3;box-shadow:none;background:var(--bronze)}.track-timeline .editable-clip.dragging{opacity:.12}.track-timeline .editable-clip.pending{border-style:dashed}.track-timeline .clip-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-timeline .clip-details-toggle{flex-shrink:0;width:16px;height:100%;font-size:16px;color:#fff9}.clip-open-scene{display:flex;align-items:center;justify-content:center;flex:none;width:20px;height:22px;margin-left:auto;padding:0;border:0;border-radius:3px;background:transparent;color:#fffc;cursor:pointer}.clip-open-scene:hover,.clip-open-scene:focus-visible{color:#fff;background:#ffffff20}.clip-open-scene:focus-visible{outline:1px solid currentColor;outline-offset:-1px}.clip-open-scene:disabled{opacity:.5;cursor:default}.clip-open-scene .icon{width:12px;height:12px;transform:rotate(90deg)}.clip-open-scene .icon svg{width:100%;height:100%}.track-timeline .clip-trim{width:6px;border:0;background:transparent}.track-timeline .editable-clip:focus-visible,.track-timeline .editable-clip:has(.clip-trim:focus-visible){outline:none;border-color:var(--accent)}.track-timeline .clip-trim:focus-visible{outline:none}.clip-details-toggle,.track-disclosure{display:flex;align-items:center;justify-content:center}.clip-details-toggle .icon,.track-disclosure .icon{width:12px;height:12px;flex:none;transition:transform .15s ease}.clip-details-toggle .icon svg,.track-disclosure .icon svg{width:100%;height:100%}.clip-details-toggle[aria-expanded=true] .icon,.track-disclosure .icon.expanded{transform:rotate(90deg)}.track-timeline .clip-drag-ghost{z-index:9;overflow:visible;border-color:#fff2b3;box-shadow:0 2px 8px #0005}.track-timeline .clip-drag-ghost.invalid{background:#86433b;border-color:#ef7f73}.clip-drag-time{position:absolute;bottom:calc(100% + 7px);left:0;padding:4px 7px;border-radius:4px;background:#303030;color:#fff;font-size:10px;font-variant-numeric:tabular-nums;box-shadow:0 2px 8px #0006}.clip-snap-axis{position:absolute;inset:0 12px 0 calc(var(--outline-label) + 8px);pointer-events:none}.clip-snap-guide{position:absolute;top:0;bottom:0;width:1px;background:#e6d3a2;z-index:10}.track-timeline .clip-layer-details{background:#ffffff02;border:0}.track-layer-header{padding-right:5px;gap:3px}.track-layer-header>button{color:#959595;background:none;border:0;font-size:10px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;cursor:pointer}.track-layer-name{flex:1}.track-layer-name.draggable{cursor:grab;touch-action:none;user-select:none}.track-layer-name.draggable:hover{color:#eee}.layer-reordering .track-layer-bar{opacity:.45}.track-layer-row.layer-visuals-off>.track-layer-lane,.editable-clip.clip-visuals-off{opacity:.35}.track-layer-header .track-disclosure{width:14px;flex-shrink:0;padding:0;font-size:14px}.track-disclosure-space{width:14px;flex-shrink:0}.track-layer-row{--layer-color:var(--bronze)}.track-layer-row.type-text{--layer-color:var(--clip-gray)}.track-layer-row.type-composition{--layer-color:var(--cerulean)}.track-layer-row.type-rect,.track-layer-row.type-path{--layer-color:var(--teal)}.track-layer-row.type-image{--layer-color:var(--mauve)}.track-layer-row.type-video,.track-layer-row.type-audio,.track-layer-row.type-shader{--layer-color:var(--cerulean)}.track-layer-bar{--layer-fill:color-mix(in srgb,var(--layer-color) 65%,#252525);position:absolute;top:var(--clip-inset);height:var(--clip-height);display:flex;align-items:center;gap:6px;padding:0 7px;overflow:hidden;color:#eee;font-size:11px;background:var(--layer-fill);border:1px solid var(--layer-fill);border-radius:var(--clip-radius);cursor:pointer;transition:height var(--mode-duration) ease}.track-layer-bar>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-layer-bar>span:nth-child(2){flex:1}.track-layer-bar .track-type-glyph{flex:none;opacity:.7;font-size:11px}.track-layer-bar.editable-layer{cursor:grab;touch-action:none;user-select:none;padding-right:12px}.track-layer-bar.invalid{outline:1px solid #f66}.track-layer-row.selected .track-layer-bar{border-color:#fff2b3;box-shadow:none}.track-layer-row.property{height:18px}.track-layer-row.property .track-layer-header button{padding-block:0;line-height:14px}.track-layer-row.property .track-layer-bar{height:1px;top:50%;transform:translateY(-50%);background:none;border:0;padding:0}.track-key-line{position:absolute;height:1px;top:50%;transform:translateY(-50%);background:#b1883d66;pointer-events:none}.track-key{position:absolute;top:50%;width:6px;height:6px;transform:translate(-50%,-50%) rotate(45deg);border:0;padding:0;background:#d4bf8f;cursor:pointer}.track-timeline.reviewing .editable-clip{cursor:pointer}.studio-shell[data-mode=comment] .editor:has(.modern-timeline){grid-template-rows:var(--header-height,80px) minmax(0,1fr) 56px 106px}.studio-shell[data-mode=comment] .modern-timeline{border-radius:20px;padding:0 17px;background:#181818;overflow:hidden}@media(prefers-reduced-motion:reduce){.track-timeline *{transition:none!important}}.track-ruler-row .review-time-range{top:14px;height:24px}.track-ruler-row .review-range-editor{top:12px;height:26px}.track-timeline .editable-clip,.track-timeline .clip-drag-ghost{--clip-color:var(--bronze);background:var(--clip-color)}.track-timeline .editable-clip.selected{background:var(--clip-color)}.track-timeline :is(.editable-clip,.clip-drag-ghost).type-text{--clip-color:var(--clip-gray)}.track-timeline :is(.editable-clip,.clip-drag-ghost).type-composition{--clip-color:var(--cerulean)}.track-timeline :is(.editable-clip,.clip-drag-ghost):is(.type-rect,.type-path){--clip-color:var(--teal)}.track-timeline :is(.editable-clip,.clip-drag-ghost).type-image{--clip-color:var(--mauve)}.track-timeline :is(.editable-clip,.clip-drag-ghost):is(.type-video,.type-audio,.type-shader){--clip-color:var(--cerulean)}.track-timeline .clip-drag-ghost.invalid{background:#86433b}.timeline-panel{display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr)}.studio-shell[data-mode=interactive] .timeline-panel{padding-top:12px;background:var(--background)}.timeline-mode-view{grid-area:1 / 1;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;opacity:0;pointer-events:none;transition:opacity var(--mode-duration,.18s) ease}.timeline-mode-view.is-active{opacity:1;pointer-events:auto;animation:timeline-view-enter var(--mode-duration,.18s) ease}.legacy-timeline-content{display:flex;flex-direction:column;min-height:0;flex:1}@keyframes timeline-view-enter{0%{opacity:0}to{opacity:1}}.comment-timeline{background:transparent}.comment-timeline .track-scroll{overflow:hidden}.comment-timeline .track-surface{padding:0}.comment-timeline .track-ruler-row{height:32px;background:none;border:0}.comment-timeline .track-ruler-heading{visibility:hidden;padding:0;border:0;overflow:hidden}.comment-timeline .track-ruler-playhead{top:0;bottom:auto;height:94px}.comment-timeline .track-playhead-line{display:none}.comment-scene-lane{position:relative;height:62px;margin:0 12px 0 8px}.comment-scene-bar{position:absolute;top:14px;width:100%;height:var(--clip-height);background:#ffffff29;border:0;border-radius:var(--clip-radius);cursor:ew-resize;touch-action:none;outline:none}.comment-scene-bar:focus-visible{box-shadow:0 0 0 1px #aaa}@media(prefers-reduced-motion:reduce){.timeline-mode-view,.timeline-mode-view.is-active{transition:none;animation:none}}.resources-panel{padding:18px 16px}.resources-panel h2{margin:0 0 16px;font-size:13px;font-weight:600}.resource-search{width:100%;height:30px;margin-bottom:16px;padding:0 9px;color:#ddd;background:#222;border:1px solid #303030;border-radius:5px;font:inherit;font-size:12px}.resource-search:focus{outline:1px solid #777;outline-offset:1px}.resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}.resource-tile{display:flex;min-width:0;flex-direction:column;align-items:stretch;padding:0;color:#ddd;background:transparent;border:0;text-align:left;cursor:grab;touch-action:none;user-select:none}.resource-dragging,.resource-dragging *{cursor:copy!important;user-select:none!important}.resource-tile:disabled{opacity:.5;cursor:default}.resource-tile:focus-visible{outline:1px solid #999;outline-offset:4px;border-radius:4px}.resource-preview{display:flex;align-items:center;justify-content:center;aspect-ratio:1.4;overflow:hidden;background:#222;border-radius:5px;border:1px solid #333}.resource-tile:hover .resource-preview{border-color:#888}.resource-preview img,.resource-preview video{width:100%;height:100%;object-fit:cover;pointer-events:none}.resource-placeholder{color:#aaa;font-size:32px}.resource-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:7px;font-size:12px}.resource-type{margin-top:3px;color:#888;font-size:10px}.resource-help,.resources-empty{color:#777;font-size:11px;line-height:1.6;margin:22px 0 0}.resource-examples{margin-top:18px;padding:7px 10px;background:#292929;border:1px solid #3a3a3a;border-radius:4px;color:#ddd;font-size:12px;cursor:pointer}.resources-error{color:#db9f86;font-size:11px;line-height:1.5;white-space:pre-line}.resource-drop-overlay{position:fixed;inset:0;z-index:100;pointer-events:none}.resource-drop-box{position:absolute;border:2px solid var(--accent,#ff4b00);background:#ff4b0018;border-radius:4px}.resource-drop-overlay svg{position:absolute;inset:0;width:100%;height:100%}.resource-drop-overlay polygon{fill:#ff4b0018;stroke:#ff4b00;stroke-width:2}.resource-drop-line{position:absolute;height:2px;background:#ff4b00}.resource-drop-label{position:absolute;max-width:245px;padding:7px 10px;border:1px solid #555;border-radius:5px;background:#242424;color:#eee;font-size:11px;box-shadow:0 2px 10px #0005}.resource-drop-label[data-invalid=true]{color:#efb8a4}.scene-breadcrumbs{display:flex;align-items:center;gap:4px;color:#777;font-size:12px;min-width:0;overflow:hidden}.scene-breadcrumbs button{background:none;border:0;color:#999;padding:4px;cursor:pointer;font:inherit}.scene-breadcrumbs button:hover{color:#ddd}.scene-breadcrumbs button[aria-current]{color:#ccc}.canvas-handle{pointer-events:all;touch-action:none}.canvas-handle rect{fill:var(--accent);stroke:#fff;stroke-width:1}.canvas-handle .canvas-handle-hit{fill:transparent;stroke:none}.canvas-drop-hint{stroke:var(--accent);stroke-width:2}.canvas-linked{position:absolute;color:var(--muted);font-size:10px;pointer-events:none}.editable-property{position:relative;padding-right:25px}.property-value{position:relative}.property-value>.property-keyframe{right:-25px}.editable-property input[readonly]{color:var(--muted);cursor:default}.property-keyframe{position:absolute;right:0;top:4px;width:22px;height:26px;padding:0;border:0;background:none;color:var(--muted);cursor:pointer;font-size:20px}.property-keyframe[data-animated=true]{color:var(--accent)}.property-keyframe[data-keyed=true]{background:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:4px}.property-linked{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:var(--muted);padding-bottom:8px}.property-linked button{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer}.canvas-wrap canvas{touch-action:none}.canvas-spacing-guide{pointer-events:none}.canvas-spacing-guide line{stroke:var(--accent);stroke-width:1;stroke-dasharray:3 3}.canvas-spacing-guide text{fill:var(--accent);stroke:var(--background, #141414);paint-order:stroke;text-anchor:middle;font-variant-numeric:tabular-nums}.keyframe-editor{position:relative;height:100%;min-height:0;outline:none}.track-key{touch-action:none}.track-key.key-selected{background:var(--accent);box-shadow:0 0 0 1px #fff;z-index:4}.track-key:focus-visible{outline:2px solid #fff;outline-offset:3px}.keyframe-marquee{position:fixed;pointer-events:none;z-index:80;border:1px solid var(--accent);background:#ff510019}.keyframe-status{position:absolute;bottom:6px;right:12px;pointer-events:none;z-index:8;background:#181818e8;border-radius:4px;color:#bbb;font-size:11px;padding:4px 7px}.keyframe-menu-label{font-size:10px;color:var(--muted);padding:5px 8px}.keyframe-dialog-backdrop{position:fixed;inset:0;z-index:100;background:#0005;display:grid;place-items:center}.keyframe-dialog{width:300px;background:#202020;border:1px solid #444;border-radius:8px;padding:18px;color:#ddd;font-size:12px}.keyframe-dialog label{display:grid;gap:10px}.keyframe-dialog input{width:100%;padding:8px;background:#151515;color:#eee;border:1px solid #555;border-radius:4px}.keyframe-dialog p{font-size:11px;color:#aaa}.keyframe-dialog>div{display:flex;justify-content:flex-end;gap:8px}.keyframe-dialog button{background:#333;border:1px solid #555;border-radius:4px;color:#eee;padding:6px 12px}.keyframe-dialog button:disabled{opacity:.4}.keyframe-easing-segment{position:absolute;top:0;height:100%;display:flex;align-items:center;justify-content:center;container-type:inline-size}.keyframe-easing-button{opacity:0;width:17px;height:17px;flex:none;padding:3px;border:1px solid #b1883d66;border-radius:4px;color:#b1883d;background:#29251d;cursor:pointer;z-index:2}.keyframe-easing-segment:hover .keyframe-easing-button,.keyframe-easing-button:focus-visible,.keyframe-easing-segment.selected .keyframe-easing-button{opacity:1}.keyframe-easing-segment.selected .keyframe-easing-button{color:var(--accent);border-color:var(--accent)}.keyframe-easing-button svg{display:block;width:100%;height:100%}@container (max-width:24px){.keyframe-easing-button{display:none}}.easing-description{color:#ddd;display:grid;gap:6px;font-size:12px}.easing-description span{color:#888;font-size:11px}.easing-preset-label{display:grid;gap:6px;font-size:11px;color:#999}.easing-preset-label select{background:#202020;border:1px solid #444;border-radius:4px;padding:7px;color:#ddd;width:100%}.easing-graph{background:#232323;border-radius:6px;margin-top:14px;padding:12px}.easing-graph svg{display:block;width:100%}.easing-grid{fill:none;stroke:#444;stroke-width:.5}.easing-reference{fill:none;stroke:#555;stroke-width:.5;stroke-dasharray:2 2}.easing-curve{fill:none;stroke:var(--accent);stroke-width:1.3}.easing-graph circle{fill:#232323;stroke:var(--accent);stroke-width:1}.easing-graph>span{display:block;text-align:center;color:#888;font-size:10px}.track-key{z-index:3}.version-menu{position:relative;min-width:0}.version-trigger{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--input);border-radius:6px;background:#ffffff08;color:var(--text);font-size:12px;white-space:nowrap}.version-trigger:hover{background:#ffffff12}.version-trigger .icon,.version-trigger .icon svg{width:10px;height:10px}.version-trigger .icon{transform:rotate(90deg);transition:transform .12s}.version-trigger[aria-expanded=true] .icon{transform:rotate(-90deg)}.version-popover{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:min(300px,calc(100vw - 32px));max-height:min(420px,70dvh);overflow-y:auto;padding:6px;border:1px solid var(--input);border-radius:10px;background:#202020;box-shadow:0 16px 48px #0008}.version-popover nav{display:flex;flex-direction:column;gap:2px}.version-row{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:8px 10px;border-radius:6px;background:transparent;color:var(--muted);text-align:left}.version-row:hover{background:var(--hover);color:var(--text)}.version-row[aria-current=page]{background:#ffffff0d;color:var(--text)}.version-row.latest{margin-bottom:6px;box-shadow:0 5px 0 -4px var(--input)}.version-meta{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}.version-latest{padding:2px 6px;border-radius:4px;background:#ffffff1a;color:var(--text);font-size:9px}.version-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.version-status{display:flex;align-items:center;gap:8px;padding:10px;font-size:12px;color:var(--muted)}.version-more{width:100%;margin-top:4px;padding:8px;border-radius:6px;background:transparent;color:var(--muted);font-size:12px}.version-more:hover{background:var(--hover);color:var(--text)}.version-status .version-more{width:auto;margin:0;padding:0;text-decoration:underline}.sidebar-actions .review-name{max-width:128px;height:30px;padding:0 8px;font-size:12px;color:var(--muted)}.sidebar-actions .review-name span{overflow:hidden;text-overflow:ellipsis}.sidebar-actions .review-name:hover{color:var(--text)}@media(max-width:720px){.version-popover{position:fixed;top:calc(var(--header-height,56px) - 4px);left:16px;right:16px;width:auto}}
+/*! Adapted from ai-motion-designer-web/apps/web-new/src/styles.css:
+   Inter UI, #141414/#1f1f1f surfaces, #F94305 brand accent.
+   Controls share the editor's compact dimensions and native range interactions. */