cozyclay 1.2.0 → 1.3.0

package/src/App.jsx

@@ -1,20 +1,25 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Canvas, useFrame, useThree } from "@react-three/fiber";
 import { OrthographicCamera, PerspectiveCamera, Text, useFBX } from "@react-three/drei";
 import * as THREE from "three";
 import { SkeletonUtils } from "three/examples/jsm/Addons.js";
 import { buildArdyPose } from "./ardy/export.js";
 import { checkBridge, generate as ardyGenerate } from "./ardy/client.js";
-import { loadMotionFromUrl } from "./ardy/npz.js";
+import { characterScaleFor, loadMotionFromUrl } from "./ardy/npz.js";
+import { retimeMotion } from "./ardy/retime.js";
+import { sliceMotion } from "./ardy/trim.js";
+import { fetchFootageBlob, footageSummary, isPlatformPageUrl, normalizeSourceUrl, probeFootage, requestBridgeExtract, requestBridgeFootage, sourceLabel } from "./multimodel-ingest.js";
+import { bakeExtractedTake, collectLandmarkTrack, createPoseDetector, sampleTimes, videoFrames } from "./pose-extract/index.js";
 import { repairRecordedMp4 } from "./ardy/mp4-duration.js";
 import { applyMotionFrame, captureArdyRoot, restorePlaybackBones, snapshotPlaybackBones } from "./ardy/playback.js";
 import { movePromptClipFrames } from "./ardy/prompt-clips.js";
 import Timeline from "./ardy/timeline.jsx";
 import { alignArdyPath, judgeAuthoredPath, judgeNextWaypoint, toSceneRootOffset, PATH_LIMITS } from "./ardy/waypoints.js";
 import { FlyControls, aimAt, forwardFrom } from "./controls.jsx";
+import { createLiveControl } from "./live-control.js";
 import HierarchyPanel from "./hierarchy-panel.jsx";
 import { PlanBoard } from "./planview.jsx";
-import { DualRender, GIZMO_LAYER, SHOT_ASPECT, fitAspect } from "./dualview.jsx";
+import { DualRender, GIZMO_LAYER, fitAspect } from "./dualview.jsx";
 import { Room, StageLights } from "./room.jsx";
 import {
 	SHOT_AUTHORING_KEY,
@@ -38,32 +43,68 @@ import {
 } from "./camera-rail-schedule.js";
 import { SetProps } from "./props.jsx";
 import {
+	CUTOUT_DEFAULT_HEIGHT,
+	CUTOUT_KIND,
+	CUTOUT_MAX_HEIGHT,
 	DEFAULT_SCENE_OBJECTS,
 	OBJECT_COLORS,
+	createCutoutObject,
 	createSceneObject,
 	dropToSurfacePatch,
 	objectSize,
 	placementInFront,
 	removeSceneObject,
+	setSceneObjectParent,
 	sceneObjectIdFromHierarchy,
 	updateSceneObject,
 } from "./scene-objects.js";
 import { createSceneHistoryStore } from "./scene-history.js";
+import { ASSET_IMAGE_TYPES, assetAspect, imageFilesFrom, importImageFile } from "./scene-assets.js";
+import { assetRecord, rememberAsset } from "./scene-asset-cache.js";
+import { cutOutBackground, decodeMask, maskAsset } from "./matte.js";
+import { createMatteEditor } from "./matte-editor.js";
 import {
 	SCENES_QUARANTINE_KEY,
 	SCENES_STORAGE_KEY,
 	SCENES_VERSION,
 	activeSceneIndex,
 	addScene,
+	createCharacterEntry,
+	createCharacterLayer,
 	createSceneStage,
 	createSceneDocument,
+	DEFAULT_CHARACTER_MODEL,
+	DEFAULT_SUBJECT_ONE,
+	DEFAULT_SUBJECT_TWO,
 	duplicateScene,
 	loadSceneDocumentFromStorage,
+	migrateStageFrames,
+	readSceneDocument,
 	removeScene,
 	renameScene,
 	serializeSceneDocument,
+	takeAnchor,
 } from "./scenes.js";
+import {
+	clearStoredProjectHandle,
+	createProjectDocument,
+	downloadProjectFallback,
+	hasFileSystemAccess,
+	loadStoredProjectHandle,
+	openProjectFallback,
+	pickProjectFileForOpen,
+	pickProjectFileForSave,
+	queryHandlePermission,
+	readProjectDocument,
+	readProjectFile,
+	storeProjectHandle,
+	rememberRecentProject,
+	writeProjectFile,
+	PROJECT_EXTENSION,
+} from "./project.js";
+import ProjectBrowser from "./project-browser.jsx";
 import ObjectGizmo from "./object-gizmo.jsx";
+import AssetPane from "./asset-pane.jsx";
 import AddObjectMenu from "./object-catalog.jsx";
 import ResultModal from "./result-modal.jsx";
 import LocaleToggle from "./locale-toggle.jsx";
@@ -78,7 +119,7 @@ import {
 	loadCustomPoses,
 	saveCustomPoses,
 } from "./poses.js";
-import { IkHandles, PoseHandles, PoseStudioPanel } from "./posestudio.jsx";
+import { IkHandles, PoseHandles, PoseStudioPanel, warmPoseThumbnails } from "./posestudio.jsx";
 import {
 	MID_TRACKS,
 	createIkState,
@@ -108,6 +149,8 @@ import {
 	VIDEO_MODELS,
 	composePrompt,
 	deriveShot,
+	focalMmToFov,
+	fovToFocalMm,
 	slateLine,
 } from "./shot.js";
 import { captureFraming, classifyMove, cameraMoveAt, moveSequenceSlate, moveSequencePhrase } from "./camera-move.js";
@@ -133,37 +176,29 @@ const PRESETS = {
 	closeup: { label: ko("Close-Up", "클로즈업"), distance: 1.3, azimuth: 16, elevation: 2, fov: 45, targetY: 1.55, two: false },
 	low: { label: ko("Low Angle", "로우 앵글"), distance: 3.5, azimuth: 20, elevation: -14, fov: 50, targetY: 1.1, two: false },
 	high: { label: ko("High Angle", "하이 앵글"), distance: 4.5, azimuth: 20, elevation: 16, fov: 45, targetY: 1.1, two: false },
-	ots: {
-		label: ko("Over Shoulder", "오버 숄더"),
-		distance: 2.8,
-		azimuth: 200,
-		elevation: 8,
-		fov: 40,
-		targetY: 1.5,
-		two: true,
-		// the foreground shoulder must sit between the lens and subject 1
-		charB: { x: 0.62, z: 1.05, rot: 196 },
-	},
-	two: {
-		label: ko("Two Shot", "투샷"),
-		distance: 6,
-		azimuth: 18,
-		elevation: 5,
-		fov: 42,
-		targetY: 1.2,
-		two: true,
-		charB: { x: 1.15, z: 0.1, rot: -14 },
-		aimMid: true,
-	},
 };
 
 const RIG_HIERARCHY_FOCUS = {
+	"rig.torso": "spine",
 	"rig.hips": "hips",
 	"rig.spine": "spine",
+	"rig.chest": "chest",
+	"rig.neck": "neck",
+	"rig.head": "head",
 	"rig.leftArm": "leftHand",
+	"rig.leftShoulder": "leftShoulder",
+	"rig.leftElbow": "leftElbow",
+	"rig.leftHand": "leftHand",
 	"rig.rightArm": "rightHand",
+	"rig.rightShoulder": "rightShoulder",
+	"rig.rightElbow": "rightElbow",
+	"rig.rightHand": "rightHand",
 	"rig.leftLeg": "leftFoot",
+	"rig.leftKnee": "leftKnee",
+	"rig.leftFoot": "leftFoot",
 	"rig.rightLeg": "rightFoot",
+	"rig.rightKnee": "rightKnee",
+	"rig.rightFoot": "rightFoot",
 };
 
 const HIERARCHY_INSPECTOR_TITLES = {
@@ -175,12 +210,26 @@ const HIERARCHY_INSPECTOR_TITLES = {
 	characterB: ko("Character 2", "인물 2"),
 	environment: ko("Environment", "환경"),
 	props: ko("Props", "소품"),
+	"rig.torso": ko("Torso", "몸통"),
 	"rig.hips": ko("Root / Hips", "루트 / 엉덩이"),
 	"rig.spine": ko("Spine", "척추"),
+	"rig.chest": ko("Chest", "가슴"),
+	"rig.neck": ko("Neck", "목"),
+	"rig.head": ko("Head", "머리"),
 	"rig.leftArm": ko("Left Arm", "왼팔"),
+	"rig.leftShoulder": ko("Left Shoulder", "왼쪽 어깨"),
+	"rig.leftElbow": ko("Left Elbow", "왼쪽 팔꿈치"),
+	"rig.leftHand": ko("Left Hand", "왼손"),
 	"rig.rightArm": ko("Right Arm", "오른팔"),
+	"rig.rightShoulder": ko("Right Shoulder", "오른쪽 어깨"),
+	"rig.rightElbow": ko("Right Elbow", "오른쪽 팔꿈치"),
+	"rig.rightHand": ko("Right Hand", "오른손"),
 	"rig.leftLeg": ko("Left Leg", "왼다리"),
+	"rig.leftKnee": ko("Left Knee", "왼쪽 무릎"),
+	"rig.leftFoot": ko("Left Foot", "왼발"),
 	"rig.rightLeg": ko("Right Leg", "오른다리"),
+	"rig.rightKnee": ko("Right Knee", "오른쪽 무릎"),
+	"rig.rightFoot": ko("Right Foot", "오른발"),
 };
 
 const CAMERA_MOVE_LABELS_KO = new Map([
@@ -248,6 +297,7 @@ const SCENE_RENDERER_LABELS_KO = new Map([
 	["chair", ko("chair", "의자")],
 	["car", ko("car", "자동차")],
 	["aircraft", ko("aircraft", "비행기")],
+	[CUTOUT_KIND, ko("cutout", "컷아웃")],
 ]);
 
 const SCENE_OBJECT_NAME_LABELS_KO = new Map([
@@ -313,17 +363,22 @@ function moveSequenceSlateKo(segments) {
 
 function hierarchyIdForIkFocus(focus) {
 	if (!focus) return null;
-	if (focus === "hips") return "rig.hips";
-	if (["spine", "chest", "neck", "head"].includes(focus)) return "rig.spine";
-	if (focus.startsWith("left") && ["Hand", "Elbow", "Shoulder"].some((part) => focus.endsWith(part))) return "rig.leftArm";
-	if (focus.startsWith("right") && ["Hand", "Elbow", "Shoulder"].some((part) => focus.endsWith(part))) return "rig.rightArm";
-	if (focus === "leftFoot" || focus === "leftKnee") return "rig.leftLeg";
-	if (focus === "rightFoot" || focus === "rightKnee") return "rig.rightLeg";
-	return "characterA.rig";
+	const exact = Object.entries(RIG_HIERARCHY_FOCUS)
+		.find(([id, mappedFocus]) =>
+			!["rig.torso", "rig.leftArm", "rig.rightArm", "rig.leftLeg", "rig.rightLeg"].includes(id) &&
+			mappedFocus === focus
+		);
+	return exact?.[0] ?? "characterA.rig";
 }
 
 const CAPTURE_W = 1920;
 const CAPTURE_H = 1080;
+const SHOT_ASPECT_PRESETS = Object.freeze({
+	"16:9": Object.freeze({ label: "16:9", aspect: 16 / 9, width: 1920, height: 1080 }),
+	"9:16": Object.freeze({ label: "9:16", aspect: 9 / 16, width: 1080, height: 1920 }),
+	"1:1": Object.freeze({ label: "1:1", aspect: 1, width: 1080, height: 1080 }),
+	"4:3": Object.freeze({ label: "4:3", aspect: 4 / 3, width: 1440, height: 1080 }),
+});
 // Pre-generated clip shipped with the build so a bridge-less session (a hosted
 // static demo, or `npm run dev:ui`) still shows real generated motion.
 // Root-absolute on purpose: the studio is served from "/app/" while these
@@ -331,19 +386,75 @@ const CAPTURE_H = 1080;
 // to "/app/models/..." and 404. Vite's base is "/" (own apex domain), so a
 // leading slash is now the correct — and only — form that works from both
 // the dev server and the built site.
-const CHARACTER_MODEL_URL = "/models/y-bot-tpose.fbx";
+// Per-character rig model: the stage entry's `model` is the FBX file stem in
+// public/models AND the wire rig name sent to ARDY, so mesh and export can
+// never drift apart.
+const characterModelUrl = (model) => `/models/${model}.fbx`;
+
+/** Sequential ids for spawned characters, collision-free against the cast. */
+function nextCharacterId(list) {
+	const ids = new Set(list.map((entry) => entry.id));
+	let n = list.length + 1;
+	let id = `char-${n}`;
+	while (ids.has(id)) {
+		n += 1;
+		id = `char-${n}`;
+	}
+	return id;
+}
 const DEMO_MOTION_URL = "/demo/walk-then-stop.npz";
 const DEMO_MOTION_PROMPT = "a person walking then a person stops";
 const CLAY = "#f2eee6";
 const CLAY_B = "#ddd6ca";
+// X Bot's shell is smooth (no raised exoskeleton like Y Bot's), so it gets a
+// brighter, whiter clay to keep it readable against the set.
+const CLAY_X = "#faf8f2";
+// Model/role default for a cast member; a user-picked entry.tint always wins
+// over this at render time.
+const defaultCharacterTint = (entry, index) => (entry.model === "x-bot-tpose" ? CLAY_X : index === 0 ? CLAY : CLAY_B);
 const DEFAULT_POSE = BUILT_IN_POSES.find((p) => p.id === "relaxed") ?? BUILT_IN_POSES[0];
-const DEFAULT_SUBJECT = "a young woman in a tan coat";
+const DEFAULT_SUBJECT = DEFAULT_SUBJECT_ONE;
+const DEFAULT_SUBJECT2 = DEFAULT_SUBJECT_TWO;
 const DEFAULT_ENVIRONMENT = "a sunlit modern living room";
 const DEFAULT_CAMERA_POSITION = { x: 0.97, y: 1.62, z: 2.39 };
 const REST_BONES = Object.fromEntries(POSE_BONES.map((b) => [b.id, [0, 0, 0]]));
-const DEFAULT_DURATION_S = 15; // pre-motion timeline duration; shown as duration × 20 frames
+// Two clocks, one boundary. The app timeline runs the production 24 fps —
+// the rate the reference footage and the recorded export are counted in.
+// ARDY Core generates on its trained 20 fps clock and that cannot move, so
+// takes are RETIMED inbound (bridge → app, retimeMotion) and frame numbers
+// are CONVERTED outbound (app → bridge, toArdyFrame). Nothing between the
+// boundaries may mix the clocks.
+const TIMELINE_FPS = 24;
+const ARDY_FPS = 20;
+const toArdyFrame = (frame) => Math.round((frame * ARDY_FPS) / TIMELINE_FPS);
+
+// Outbound converters: timeline-frame entries → strictly-ascending bridge
+// frames. Rounding can land two timeline frames on one bridge frame; the
+// first wins — the bridge refuses non-ascending lists outright.
+function toArdyFrameEntries(entries) {
+	const out = [];
+	for (const entry of entries) {
+		const frame = toArdyFrame(entry.frame);
+		if (out.length && frame <= out[out.length - 1].frame) continue;
+		out.push({ ...entry, frame });
+	}
+	return out;
+}
+
+function toArdySegments(segments) {
+	const out = [];
+	for (const segment of segments) {
+		const startFrame = toArdyFrame(segment.startFrame);
+		const endFrame = toArdyFrame(segment.endFrame);
+		if (endFrame <= startFrame) continue; // a zero-length rounding remnant covers nothing
+		out.push({ ...segment, startFrame, endFrame });
+	}
+	return out;
+}
+
+const DEFAULT_DURATION_S = 15; // pre-motion timeline duration; shown as duration × TIMELINE_FPS frames
 const DEFAULT_PLAYBACK_SPEED = 1;
-const ARDY_PROMPT_HORIZON_FRAMES = 40; // core model horizon: 2 seconds at 20 fps
+const ARDY_PROMPT_HORIZON_FRAMES = 2 * TIMELINE_FPS; // core model horizon: 2 seconds, counted on the timeline clock
 const MAX_WAYPOINTS = 32; // ARDY bridge contract: a root path holds 2..32 distinct waypoint frames
 const ARDY_PROMPT_MAX = 500; // bridge contract: prompt must be non-empty, capped at 500 chars
 const ARDY_DURATION_MIN = 1; // the UI works in whole seconds; the bridge floor is 0.15 s
@@ -351,18 +462,83 @@ const ARDY_DURATION_MAX = 1200; // bridge contract: duration capped at 1200 s
 const ARDY_SEED_MAX = 2 ** 31 - 1; // bridge contract: optional seed, integer in 0..2**31-1
 const DEFAULT_PROMPT_CLIPS = [];
 
+// Named ingest failures, in both locales. A reason the user cannot act on is
+// not a message: each line says what was wrong with THIS source.
+const MULTIMODEL_REASONS = {
+	"url-empty": ["Enter a video URL first", "영상 URL을 먼저 입력하세요"],
+	"url-protocol-relative": ["Use a full https:// address", "https:// 로 시작하는 전체 주소를 쓰세요"],
+	"url-scheme-unsupported": ["Only http(s) or a local /path is accepted", "http(s) 또는 로컬 /경로만 사용할 수 있어요"],
+	"url-platform-page": [
+		"YouTube/Vimeo pages are players, not video files, and block browser downloads. Start the dev bridge to use the URL directly, or download the clip and use Choose video.",
+		"유튜브·비메오 주소는 영상 파일이 아니라 플레이어 페이지이고 브라우저 다운로드를 막습니다. 개발 브리지를 켜면 URL을 그대로 쓸 수 있고, 아니면 영상을 내려받아 '영상 선택'을 쓰세요.",
+	],
+	"url-malformed": ["That address could not be parsed", "주소를 해석할 수 없어요"],
+	"fetch-failed": ["The host refused a browser download (CORS or offline)", "호스트가 브라우저 다운로드를 거부했어요(CORS 또는 오프라인)"],
+	"not-a-video": ["That address did not return a video (check the path)", "그 주소는 영상을 반환하지 않았어요(경로를 확인하세요)"],
+	"decode-failed": ["This browser cannot decode that video", "이 브라우저가 디코딩할 수 없는 영상이에요"],
+	"duration-unreadable": ["The clip length could not be read", "클립 길이를 읽지 못했어요"],
+	"dimensions-unreadable": ["The frame size could not be read", "프레임 크기를 읽지 못했어요"],
+	"probe-timeout": ["The video never reported metadata", "영상이 메타데이터를 보내지 않았어요"],
+	"fetch-unavailable": ["This browser cannot download files", "이 브라우저는 파일을 내려받을 수 없어요"],
+	"footage-load-timeout": ["The clip never became seekable", "클립이 탐색 가능한 상태가 되지 않았어요"],
+	"seek-timeout": ["Seeking inside the clip stalled", "클립 내부 탐색이 멈췄어요"],
+	"pose-runtime-unavailable": ["The pose engine is missing from this build", "이 빌드에 포즈 엔진이 없어요"],
+	"pose-model-download-failed": ["The pose model could not be downloaded (offline?)", "포즈 모델을 내려받지 못했어요(오프라인인가요?)"],
+	"pose-engine-download-failed": ["The pose engine could not be downloaded (offline?)", "포즈 엔진을 내려받지 못했어요(오프라인인가요?)"],
+	"pose-engine-init-failed": ["The pose engine failed to start on this device", "이 기기에서 포즈 엔진을 시작하지 못했어요"],
+	"rest-unavailable": ["The rig rest data (/ardy/cskel27-rest.json) could not be loaded", "리그 레스트 데이터(/ardy/cskel27-rest.json)를 불러오지 못했어요"],
+	"no-person-found": ["No person was detected in the footage", "영상에서 사람을 감지하지 못했어요"],
+	"no-usable-pose": ["A person was seen, but no stable pose could be fitted", "사람은 보였지만 안정적인 포즈를 만들지 못했어요"],
+	"rig-not-loaded": ["Subject 1's rig is not loaded yet", "인물 1 리그가 아직 로드되지 않았어요"],
+	"bridge-unreachable": ["The dev bridge did not answer", "개발 브리지가 응답하지 않아요"],
+	"bridge-footage-incomplete": ["The bridge stream ended without footage", "브리지 전송이 영상 없이 끝났어요"],
+	"footage-url-invalid": ["That address could not be used for a bridge download", "이 주소는 브리지 다운로드에 쓸 수 없어요"],
+	"footage-probe-failed": ["The bridge could not read that page's video info", "브리지가 그 페이지의 영상 정보를 읽지 못했어요"],
+	"footage-live-unsupported": ["Live streams have no fixed length and cannot be ingested", "라이브 스트림은 길이가 없어 인제스트할 수 없어요"],
+	"footage-too-long": ["That video is over 15 minutes — trim or pick a shorter one", "15분이 넘는 영상이에요 — 잘라내거나 더 짧은 걸 골라 주세요"],
+	"footage-download-failed": ["The bridge could not download that video", "브리지가 영상을 내려받지 못했어요"],
+	"footage-normalize-failed": ["The bridge could not convert that video for extraction", "브리지가 영상을 추출용으로 변환하지 못했어요"],
+	"footage-timeout": ["The bridge download took too long and was stopped", "브리지 다운로드가 너무 오래 걸려 중단됐어요"],
+	"bridge-extract-incomplete": ["The bridge stream ended without a take", "브리지 전송이 테이크 없이 끝났어요"],
+	"extract-host-missing": ["The bridge has no GPU box configured (CCLAY_ARDY_HOST)", "브리지에 GPU 박스가 설정돼 있지 않아요(CCLAY_ARDY_HOST)"],
+	"extract-upload-failed": ["The footage could not be copied to the GPU box", "영상을 GPU 박스로 복사하지 못했어요"],
+	"extract-upload-too-large": ["That clip is too large to upload for extraction (300 MB cap)", "추출 업로드 한도(300MB)를 넘는 영상이에요"],
+	"extract-upload-empty": ["No video bytes arrived at the bridge", "브리지에 영상 데이터가 도착하지 않았어요"],
+	"extract-footage-unknown": ["The bridge no longer holds that download — re-ingest the URL", "브리지에 그 다운로드가 더 이상 없어요 — URL을 다시 넣어 주세요"],
+	"extract-run-failed": ["SAM-3D-Body failed on the GPU box (see the bridge log)", "GPU 박스에서 SAM-3D-Body 실행이 실패했어요(브리지 로그 확인)"],
+	"extract-no-person": ["The GPU box tracked no person in that footage", "GPU 박스가 영상에서 사람을 추적하지 못했어요"],
+	"extract-convert-failed": ["The extracted take could not be converted for the timeline", "추출된 테이크를 타임라인용으로 변환하지 못했어요"],
+	"extract-timeout": ["GPU extraction took too long and was stopped", "GPU 추출이 너무 오래 걸려 중단됐어요"],
+};
+
+// Extraction samples and bakes straight onto the production clock — an
+// extracted take never touches ARDY, so it never needs retiming either.
+const MULTIMODEL_SAMPLE_FPS = TIMELINE_FPS;
+
 /* ------------------------------------------------------------------ 3D --- */
 
-function Character({ url, position, rot, tint, pose, onRig, pickId }) {
+// Memoized: unchanged cast members skip re-rendering on every playhead tick.
+const Character = memo(function Character({ url, position, rot, tint, pose, scale = 1, onRig, pickId }) {
 	const fbx = useFBX(url);
 	const model = useMemo(() => {
 		const clone = SkeletonUtils.clone(fbx);
-		clone.scale.setScalar(0.01); // Mixamo exports centimetres
+		// Mixamo exports centimetres; `scale` is the FILMED person's stature.
+		// THE INVARIANT: extraction divided this take's root travel by that
+		// stature, so the clip and the scale must travel together — apply one
+		// without the other and every stride overshoots by the same factor and
+		// the feet skate. It belongs HERE, on the world transform, and never
+		// inside rig space: playback.js derives prep.scale from the bind pose,
+		// so a scaled bone hierarchy would be measured as a different rig.
+		clone.scale.setScalar(0.01 * scale);
+		// The joint shells (Alpha_Joints / Beta_Joints — elbows, knees, the
+		// exoskeleton bands) render in a darkened shade of the body tint so
+		// the segments read as separate pieces.
+		const jointTint = new THREE.Color(tint).multiplyScalar(0.45);
 		clone.traverse((child) => {
 			if (child.isMesh) {
 				// warm clay reads as a maquette; cold grey reads as a broken render
 				child.material = new THREE.MeshStandardMaterial({
-					color: tint,
+					color: /_Joints$/i.test(child.name) ? jointTint : tint,
 					roughness: 0.82,
 					metalness: 0,
 				});
@@ -375,6 +551,13 @@ function Character({ url, position, rot, tint, pose, onRig, pickId }) {
 		return clone;
 	}, [fbx, tint]);
 
+	// A new stature (a fresh extraction on this character) must not rebuild the
+	// clone — that would drop the rig the playback effects hold. Only the world
+	// transform moves; the same invariant as above applies.
+	useEffect(() => {
+		model.scale.setScalar(0.01 * scale);
+	}, [model, scale]);
+
 	useEffect(() => {
 		// During playback the pose prop is null and the motion drives the rig;
 		// this effect can flush AFTER the playback effect in a later commit
@@ -386,9 +569,13 @@ function Character({ url, position, rot, tint, pose, onRig, pickId }) {
 		applyPose(model, { ...REST_BONES, ...pose.bones });
 	}, [model, pose]);
 
+	const onRigRef = useRef(onRig);
+	onRigRef.current = onRig;
+	// Report on MODEL change only — a per-render callback identity change
+	// must not re-run this effect.
 	useEffect(() => {
-		onRig?.(model);
-	}, [model, onRig]);
+		onRigRef.current?.(model);
+	}, [model]);
 
 	return (
 		// characterPick makes the body a first-class click target: the Scene
@@ -398,9 +585,11 @@ function Character({ url, position, rot, tint, pose, onRig, pickId }) {
 			<primitive object={model} />
 		</group>
 	);
-}
+});
 
-/** Applies a preset to the free-flying camera, then reports live metrics. */
+/** Selection marker for the picked cast member: a Unity-style XYZ tripod
+ * plus a ground ring at the feet. X/Z arrows also drag the character on the
+ * floor (Y is display-only — characters stand on the deck). */
 function ShotRig({ preset, nonce, fovDeg, charA, charB, showB, probeX, probeZ, camRef, look, onMetrics }) {
 	useEffect(() => {
 		const cam = camRef.current;
@@ -473,7 +662,7 @@ function ShotRig({ preset, nonce, fovDeg, charA, charB, showB, probeX, probeZ, c
     Two clocks can drive the move. Standalone preview runs on its own clock;
     follow mode slaves the move to the timeline playhead, so the camera and
     the character motion are two views of the same time axis — playing or
-    scrubbing frame 60 at 20 fps puts the camera exactly 3 s into its move. */
+    scrubbing frame 72 at 24 fps puts the camera exactly 3 s into its move. */
 function MoveRig({ playing, following, followFrame, fps, keys, shots, anchor, camRef, look, isInterrupted, onDone }) {
 	const clock = useRef(0);
 	const invalidate = useThree((state) => state.invalidate);
@@ -699,34 +888,50 @@ function ShotPathPreview({ waypoints, start, activeWaypointFrame }) {
 	);
 }
 
-/** Unity-style scene grid: 1 m cells on the set floor, editor chrome only.
-    It rides the gizmo layer so exports and the plan never pick it up, sits a
-    hair above the deck to dodge z-fighting, and never swallows a raycast —
-    floor clicks pass straight through to the ground plane. Warm greys tuned
-    to the clay floor (#e7e1d7). */
+/** Unity-style scene grid over the whole open stage, editor chrome only.
+    Two tiers keep it legible at any zoom: 1 m minor cells for placement and a
+    darker 10 m major line that survives wide framings where minor lines blur
+    into a wash. Both ride the gizmo layer so exports and the plan never pick
+    them up, sit a hair above the deck to dodge z-fighting, and never swallow
+    a raycast — floor clicks pass straight through to the ground plane. Warm
+    greys tuned to the clay floor (#e7e1d7). */
 function SceneGrid() {
-	const grid = useMemo(() => {
-		const helper = new THREE.GridHelper(24, 24, 0x8f8474, 0xa99f8e);
-		helper.material.transparent = true;
-		helper.material.opacity = 0.62;
-		helper.material.depthWrite = false;
-		helper.position.y = 0.002;
-		helper.layers.set(GIZMO_LAYER);
-		helper.raycast = () => null;
-		return helper;
+	const grids = useMemo(() => {
+		const make = (divisions, color, opacity, y) => {
+			const helper = new THREE.GridHelper(500, divisions, color, color);
+			helper.material.transparent = true;
+			helper.material.opacity = opacity;
+			helper.material.depthWrite = false;
+			helper.position.y = y;
+			helper.layers.set(GIZMO_LAYER);
+			helper.raycast = () => null;
+			return helper;
+		};
+		return [
+			// Value hierarchy against the bright deck (#f4f0e8): quiet 1 m cells
+			// for placement, assertive 10 m lines for structure. The gap between
+			// floor and minor keeps the tiling from reading as a repeating texture.
+			make(500, 0xa89d8a, 0.4, 0.002), // minor: 1 m cells, subtle
+			make(50, 0x6a5f4e, 0.9, 0.003), // major: 10 m lines, clearly darker
+		];
 	}, []);
-	return <primitive object={grid} />;
+	return (
+		<>
+			<primitive object={grids[0]} />
+			<primitive object={grids[1]} />
+		</>
+	);
 }
 
-/** Offscreen 1920x1080 read-back, always from the shot camera. */
-function CaptureRig({ apiRef, camRef }) {
+/** Offscreen aspect-aware read-back, always from the shot camera. */
+function CaptureRig({ apiRef, camRef, width = CAPTURE_W, height = CAPTURE_H }) {
 	const { gl, scene } = useThree();
 	useEffect(() => {
 		apiRef.current = {
 			render() {
 				const source = camRef.current;
 				if (!source) return null;
-				const target = new THREE.WebGLRenderTarget(CAPTURE_W, CAPTURE_H, {
+				const target = new THREE.WebGLRenderTarget(width, height, {
 					colorSpace: THREE.SRGBColorSpace,
 					samples: 4,
 				});
@@ -737,20 +942,20 @@ function CaptureRig({ apiRef, camRef }) {
 				// with — the browser suite asserts GIZMO_LAYER (the gizmo AND
 				// the selection cage) is never in it.
 				window.__captureCameraMask = cam.layers.mask;
-				cam.aspect = CAPTURE_W / CAPTURE_H;
+				cam.aspect = width / height;
 				cam.updateProjectionMatrix();
 				const previous = gl.getRenderTarget();
 				gl.setRenderTarget(target);
 				gl.render(scene, cam);
-				const buffer = new Uint8Array(CAPTURE_W * CAPTURE_H * 4);
-				gl.readRenderTargetPixels(target, 0, 0, CAPTURE_W, CAPTURE_H, buffer);
+				const buffer = new Uint8Array(width * height * 4);
+				gl.readRenderTargetPixels(target, 0, 0, width, height, buffer);
 				gl.setRenderTarget(previous);
 				target.dispose();
 				return buffer;
 			},
 		};
 		// QA hook: run one real export render and report what the capture
-		// camera saw — the layer mask plus an amber scan of the 1920x1080
+		// camera saw — the layer mask plus an amber scan of the output
 		// frame (the selection cage's warm tone). Lets the suite prove the
 		// deliverable frame stays free of editor furniture without driving
 		// the whole generation form.
@@ -766,10 +971,55 @@ function CaptureRig({ apiRef, camRef }) {
 			}
 			return { layersMask: window.__captureCameraMask ?? 0, amber, pixels: buffer.length / 4 };
 		};
-	}, [gl, scene, camRef, apiRef]);
+	}, [gl, scene, camRef, apiRef, width, height]);
 	return null;
 }
 
+/**
+ * Anything that accepts a dropped picture. Returns the handlers to spread onto
+ * an element and whether a drag is currently over it, so the target can say so
+ * — a drop zone that gives no sign it is armed reads as a dead area, and the
+ * file gets dropped on the desktop instead.
+ *
+ * `dragover` must preventDefault, or the browser navigates away to the file.
+ */
+function useImageDrop(onFiles) {
+	const [over, setOver] = useState(false);
+	const depth = useRef(0);
+	const carriesFiles = (event) => !!event.dataTransfer?.types?.includes?.("Files");
+	return {
+		over,
+		handlers: {
+			onDragEnter: (event) => {
+				if (!carriesFiles(event)) return;
+				event.preventDefault();
+				depth.current += 1;
+				setOver(true);
+			},
+			onDragOver: (event) => {
+				if (!carriesFiles(event)) return;
+				event.preventDefault();
+				event.dataTransfer.dropEffect = "copy";
+			},
+			// dragleave fires for every child the pointer crosses, so the
+			// highlight is refcounted rather than toggled.
+			onDragLeave: () => {
+				depth.current = Math.max(0, depth.current - 1);
+				if (!depth.current) setOver(false);
+			},
+			onDrop: (event) => {
+				const files = imageFilesFrom(event.dataTransfer);
+				depth.current = 0;
+				setOver(false);
+				if (!files.length) return;
+				event.preventDefault();
+				event.stopPropagation();
+				onFiles(files);
+			},
+		},
+	};
+}
+
 /* ----------------------------------------------------------------- app --- */
 
 // Unity's tool keys. They are free because camera movement now lives behind a
@@ -834,9 +1084,14 @@ function loadSceneStartup() {
 }
 
 export default function App() {
+	const [startup] = useState(loadSceneStartup);
+	const startupScene = startup.document.scenes[activeSceneIndex(startup.document.scenes, startup.document.activeSceneId)];
+	const startupStage = createSceneStage(startupScene.stage);
 	const [workspaceLayout, setWorkspaceLayout] = useState(loadWorkspaceLayout);
 	const [preset, setPreset] = useState("medium");
 	const [fovDeg, setFovDeg] = useState(PRESETS.medium.fov);
+	const [shotAspectKey, setShotAspectKey] = useState(startupStage.shotAspect);
+	const shotOutput = SHOT_ASPECT_PRESETS[shotAspectKey] ?? SHOT_ASPECT_PRESETS["16:9"];
 	const [nonce, setNonce] = useState(0);
 	// The Top-View is always the inset: the old double-click swap that let the
 	// plan own the big pane is gone, so there is no view mode to toggle.
@@ -1056,22 +1311,156 @@ globalThis.playMode = centerTab === "play";
 		window.addEventListener("pointerup", onUp);
 		window.addEventListener("pointercancel", onUp);
 	}
-	const [startup] = useState(loadSceneStartup);
-	const startupScene = startup.document.scenes[activeSceneIndex(startup.document.scenes, startup.document.activeSceneId)];
-	const startupStage = createSceneStage(startupScene.stage);
-	const [showB, setShowB] = useState(startupStage.showB);
-	const [charA, setCharA] = useState(startupStage.charA);
-	const [charB, setCharB] = useState(startupStage.charB);
-	const [poseA, setPoseA] = useState(startupStage.poseA ?? DEFAULT_POSE);
-	const [poseB, setPoseB] = useState(startupStage.poseB ?? DEFAULT_POSE);
+	// The cast is ONE list now: every character (position, rig model, pose,
+	// subject line) lives in `characters`, and the legacy A/B view of the
+	// world is derived below so the rest of the studio keeps working while
+	// spawned extras ride the same rails.
+	const [characters, setCharacters] = useState(startupStage.characters);
+	// The cast as of this render, for async handlers: an extraction that
+	// started three renders ago must place its takes against the CURRENT cast,
+	// not the one its closure captured.
+	const charactersRef = useRef(characters);
+	charactersRef.current = characters;
+	// Character undo stack lives next to the cast: the store creation below
+	// and the undo handlers further down both read these refs.
+	const charHistoryRef = useRef({ past: [], future: [] });
+	const opClockRef = useRef(0);
+	const lastObjectOpRef = useRef(0);
+	const suppressObjectClockRef = useRef(false);
 	const [customPoses, setCustomPoses] = useState(() => loadCustomPoses());
 	const [posing, setPosing] = useState(null);
 	const [posingClosing, setPosingClosing] = useState(false);
 	const [studioPick, setStudioPick] = useState(null);
-	const [rigA, setRigA] = useState(null);
-	const [rigB, setRigB] = useState(null);
+	const [rigs, setRigs] = useState({});
 	const [poseRevision, setPoseTick] = useState(0);
 
+	/* --------------------- derived cast view + shims ---------------------- */
+
+	// Fallback second slot mirrors the old charB defaults so preset math and
+	// the two-subject inspector never see a hole before B exists.
+	const charA = characters[0] ?? createCharacterEntry(null, 0);
+	const charB = characters[1] ?? { ...createCharacterEntry(null, 1), x: 1.15, z: 0.1, rot: -14 };
+	const showB = characters.some((entry, index) => index > 0 && !entry.hidden);
+	const poseA = charA.pose ?? DEFAULT_POSE;
+	const poseB = charB.pose ?? DEFAULT_POSE;
+	const subject = charA.subject ?? DEFAULT_SUBJECT;
+	const subject2 = charB.subject ?? DEFAULT_SUBJECT2;
+	const rigA = rigs[charA.id] ?? null;
+	const rigB = (characters[1] ? rigs[charB.id] : null) ?? null;
+
+	function updateCharacterAt(index, next) {
+		setCharacters((list) => list.map((entry, i) => {
+			if (i !== index) return entry;
+			const resolved = typeof next === "function" ? next(entry) : next;
+			return { ...entry, ...resolved };
+		}));
+	}
+	// The shims keep the legacy call sites (inspector sliders, presets, pose
+	// studio, prompts) untouched while the list stays the source of truth.
+	const setCharA = (next) => updateCharacterAt(0, next);
+	const setCharB = (next) => updateCharacterAt(1, next);
+	const setPoseA = (pose) => updateCharacterAt(0, (entry) => ({ pose: typeof pose === "function" ? pose(entry.pose ?? DEFAULT_POSE) : pose }));
+	const setPoseB = (pose) => updateCharacterAt(1, (entry) => ({ pose: typeof pose === "function" ? pose(entry.pose ?? DEFAULT_POSE) : pose }));
+	const setSubject = (value) => updateCharacterAt(0, (entry) => ({ subject: typeof value === "function" ? value(entry.subject) : value }));
+	const setSubject2 = (value) => updateCharacterAt(1, (entry) => ({ subject: typeof value === "function" ? value(entry.subject) : value }));
+	function setShowB(next) {
+		recordCharacterUndo();
+		setCharacters((list) => {
+			const anyVisibleExtra = list.some((entry, i) => i > 0 && !entry.hidden);
+			const on = typeof next === "function" ? next(anyVisibleExtra) : next;
+			if (on) {
+				if (anyVisibleExtra) return list;
+				const hiddenIdx = list.findIndex((entry, i) => i > 0 && entry.hidden);
+				if (hiddenIdx > 0) return list.map((entry, i) => (i === hiddenIdx ? { ...entry, hidden: false } : entry));
+				return [...list, createCharacterEntry({ id: nextCharacterId(list), x: 1.15, z: 0.1, rot: -14, pose: DEFAULT_POSE, subject: DEFAULT_SUBJECT2 }, list.length)];
+			}
+			return list.map((entry, i) => (i > 0 && !entry.hidden ? { ...entry, hidden: true } : entry));
+		});
+	}
+	function moveCharacter(charId, next) {
+		setCharacters((list) => list.map((entry) => {
+			if (entry.id !== charId) return entry;
+			const resolved = typeof next === "function" ? next(entry) : next;
+			return { ...entry, ...resolved };
+		}));
+	}
+	function removeCharacter(charId) {
+		const list = charactersRef.current;
+		if (list.length <= 1) return;
+		recordCharacterUndo();
+		const nextCharacters = list.filter((entry) => entry.id !== charId);
+		charactersRef.current = nextCharacters;
+		setCharacters(nextCharacters);
+		// The deleted layer's untrimmed take goes with it: a recycled id must
+		// never inherit a stranger's take, and its stature left with the entry.
+		motionFullRef.current.delete(charId);
+		setRigs((current) => {
+			if (!(charId in current)) return current;
+			const next = { ...current };
+			delete next[charId];
+			return next;
+		});
+	}
+	// Per-character rig report: stable callback identity per character so
+	// the Character effect does not re-fire on every App render.
+	const rigReportersRef = useRef(new Map());
+	const reportRig = (charId) => {
+		if (!rigReportersRef.current.has(charId)) {
+			rigReportersRef.current.set(charId, (rig) => setRigs((current) => (current[charId] === rig ? current : { ...current, [charId]: rig })));
+		}
+		return rigReportersRef.current.get(charId);
+	};
+
+	/* --------------------------- asset dragging ---------------------------- */
+
+	// A grabbed asset card follows the pointer as a DOM ghost; dropping over
+	// the shot pane raycasts to the floor and spawns the character there.
+	const [assetDrag, setAssetDrag] = useState(null);
+	const spawnCharacter = (model, x, z) => {
+		recordCharacterUndo();
+		const id = nextCharacterId(characters);
+		setCharacters((list) => [...list, createCharacterEntry({ id, model, x, z, pose: DEFAULT_POSE, subject: "a person" }, list.length)]);
+		setSelectedHierarchyId(`character:${id}`);
+		setSidebarTab("inspector");
+		setToast(ko("Character added to the scene", "인물을 씬에 추가했어요"));
+	};
+	function beginAssetDrag(asset, event) {
+		const start = { x: event.clientX, y: event.clientY };
+		setAssetDrag({ asset, x: start.x, y: start.y });
+		const onMove = (move) => setAssetDrag((drag) => (drag ? { ...drag, x: move.clientX, y: move.clientY } : drag));
+		const onUp = (up) => {
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerup", onUp);
+			window.removeEventListener("pointercancel", onUp);
+			setAssetDrag(null);
+			const host = mainPaneRef.current;
+			const cam = shotCamRef.current;
+			if (!host || !cam) return;
+			const rect = host.getBoundingClientRect();
+			if (up.clientX < rect.left || up.clientX > rect.right || up.clientY < rect.top || up.clientY > rect.bottom) return;
+			const pointer = new THREE.Vector2(
+				((up.clientX - rect.left) / rect.width) * 2 - 1,
+				-((up.clientY - rect.top) / rect.height) * 2 + 1,
+			);
+			const raycaster = new THREE.Raycaster();
+			raycaster.setFromCamera(pointer, cam);
+			const hit = new THREE.Vector3();
+			if (!raycaster.ray.intersectPlane(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), hit)) return;
+			spawnCharacter(asset.id, THREE.MathUtils.clamp(hit.x, -4, 4), THREE.MathUtils.clamp(hit.z, -4, 4));
+		};
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", onUp);
+		window.addEventListener("pointercancel", onUp);
+	}
+	// Viewport picks tag bodies with "A"/"B"/charId and surfaces route the
+	// result to a hierarchy row: the first two keep their legacy row ids.
+	const charKeyToHierarchyId = (key) => {
+		if (key === "A" || key === "a" || key === "char:A") return "characterA";
+		if (key === "B" || key === "b" || key === "char:B") return "characterB";
+		return `character:${key.startsWith("char:") ? key.slice(5) : key}`;
+	};
+
+
 	/* ------------------------------ IK layer ------------------------------ */
 	// IK posing for Subject 1: dragging a wrist/ankle handle FOCUSES that
 	// joint and solves its chain backward (two-bone analytic IK) on top of
@@ -1085,6 +1474,38 @@ globalThis.playMode = centerTab === "play";
 	const [ikFkJoints, setIkFkJoints] = useState(null);
 	const [ikFocus, setIkFocus] = useState(null);
 	const [selectedHierarchyId, setSelectedHierarchyId] = useState("characterA");
+
+	/* ------------------- active character (motion layer) ------------------- */
+
+	// Every character owns an animation layer (root path, prompt blocks,
+	// generated clip, IK keys). The studio's motion machinery edits ONE layer
+	// at a time — the ACTIVE character's — and selection decides who that is.
+	const charIdFromHierarchyId = (hierarchyId) => {
+		if (hierarchyId === "characterA") return characters[0]?.id ?? null;
+		if (hierarchyId === "characterB") return characters[1]?.id ?? null;
+		if (hierarchyId?.startsWith("character:")) return hierarchyId.slice(10);
+		return null;
+	};
+	// State, not a ref: a ref written inside an effect never re-renders, so
+	// with an idle app the active character silently stayed behind the row
+	// the user just clicked.
+	const [activeCharacterId, setActiveCharacterId] = useState(characters[0]?.id ?? null);
+	useEffect(() => {
+		const id = charIdFromHierarchyId(selectedHierarchyId);
+		if (id && characters.some((entry) => entry.id === id)) setActiveCharacterId(id);
+	}, [selectedHierarchyId, characters]);
+	const activeChar = characters.find((entry) => entry.id === activeCharacterId) ?? characters[0] ?? charA;
+	const activeCharIndex = Math.max(0, characters.findIndex((entry) => entry.id === activeChar.id));
+	const activeRig = rigs[activeChar.id] ?? null;
+	// Read-only previews of the other cast members' layers for the timeline,
+	// memoized: a fresh array every render would re-render every lane on
+	// every playhead tick.
+	const ghostLayers = useMemo(() => characters.flatMap((entry, index) => entry.id === activeChar.id || entry.hidden ? [] : [{
+		owner: `S${index + 1}`,
+		promptClips: entry.layer?.promptClips ?? [],
+		waypointFrames: (entry.layer?.waypoints ?? []).map((waypoint) => waypoint.frame),
+	}]), [characters, activeChar.id]);
+
 	// Right-sidebar tab. "inspector" shows the selection's properties; "shot"
 	// holds shot-global settings (type presets, prompt); "motion" holds the
 	// ARDY workflow in pipeline order. Selecting anything in the scene routes
@@ -1110,7 +1531,14 @@ globalThis.playMode = centerTab === "play";
 	// store is constructed once, seeded with the initial scene.
 	const storeRef = useRef(null);
 	if (!storeRef.current) {
-		storeRef.current = createSceneHistoryStore(sceneObjects, { onObjects: setSceneObjects });
+		storeRef.current = createSceneHistoryStore(sceneObjects, {
+		onObjects: (objects) => {
+			// Object-side ops join the shared undo clock here; undo/redo of the
+			// object store bumps the clock explicitly in undoScene/redoScene.
+			if (!suppressObjectClockRef.current) lastObjectOpRef.current = ++opClockRef.current;
+			setSceneObjects(objects);
+		},
+	});
 	}
 	const store = storeRef.current;
 	const selectedSceneObjectId = sceneObjectIdFromHierarchy(selectedHierarchyId);
@@ -1121,7 +1549,7 @@ globalThis.playMode = centerTab === "play";
 	const [footSnap, setFootSnap] = useState(true);
 	const ikBodyDragRef = useRef(false); // true while a body drag is active
 	// How far (in frames) a correction eases back to the underlying motion
-	// outside its keyed range. 6 frames @ 20 fps = 0.3 s — long enough to
+	// outside its keyed range. 6 frames @ 24 fps = 0.25 s — long enough to
 	// hide the seam, short enough that a mid-clip fix stays visibly local.
 	const IK_CORRECTION_BLEND_FRAMES = 6;
 
@@ -1142,9 +1570,12 @@ globalThis.playMode = centerTab === "play";
 		// applied tick re-renders, every drag would die after exactly one tick.
 		store.settle();
 		setSelectedHierarchyId(id);
-		// The root SHOT row is the one non-object row kept as a bridge to the
-		// shot-global settings; everything else is a scene entity.
-		setSidebarTab(id === "shot" ? "shot" : "inspector");
+		// Character rows route to the Motion tab: picking a player means the
+		// operator wants their animation layer — its prompt, queue status and
+		// generate action all live there. SHOT keeps its bridge to shot-global
+		// settings; everything else is a scene entity.
+		const isCharacter = id === "characters" || id === "characterA" || id === "characterB" || id?.startsWith("character:");
+		setSidebarTab(id === "shot" ? "shot" : isCharacter ? "motion" : "inspector");
 		const focus = RIG_HIERARCHY_FOCUS[id];
 		if (focus && ikMode) setIkFocus(focus);
 	}
@@ -1211,6 +1642,57 @@ globalThis.playMode = centerTab === "play";
 		setToast(isKo ? `${sceneObjectNameDisplayKo(object.name)}을 표면 위에 내려놓았어요` : `${object.name} dropped to surface`);
 	}
 
+	/** The hidden file input behind "Import image as cutout". */
+	const cutoutInputRef = useRef(null);
+	// One drop zone shared by every surface that accepts a picture: the Props
+	// branch of the hierarchy, the Props inspector, and the shot view itself.
+	// One per surface, so only the thing under the cursor lights up.
+	const propsDrop = useImageDrop((files) => importCutouts(files));
+	const inspectorDrop = useImageDrop((files) => importCutouts(files));
+	const viewportDrop = useImageDrop((files) => importCutouts(files));
+	// How much of the wall counts as the wall, and how wide the brush that
+	// argues with the answer is.
+	const [matteTolerance, setMatteTolerance] = useState(0.18);
+	const [matteMode, setMatteMode] = useState("paint");
+	const [matteStats, setMatteStats] = useState({ painted: 0, coverage: 0, zoom: 1, canUndo: false, canRedo: false });
+	const [matteBusy, setMatteBusy] = useState(false);
+	const matteCanvasRef = useRef(null);
+	const matteEditorRef = useRef(null);
+	// The editor always works on the photograph, never on the cut picture the
+	// set renders — that is what makes a cut re-editable rather than a one-way
+	// door. The saved purple comes back with it.
+	const matteSourceId = selectedSceneObject?.renderer === CUTOUT_KIND
+		? selectedSceneObject.sourceAssetId || selectedSceneObject.assetId
+		: null;
+	const matteSelectionId = selectedSceneObject?.renderer === CUTOUT_KIND ? selectedSceneObject.matteAssetId || "" : "";
+
+	useEffect(() => {
+		const canvas = matteCanvasRef.current;
+		if (!canvas || !matteSourceId) return undefined;
+		const editor = createMatteEditor(canvas, { onChange: setMatteStats });
+		matteEditorRef.current = editor;
+		editor.setTolerance(matteTolerance);
+		editor.setMode(matteMode);
+		let cancelled = false;
+		(async () => {
+			const asset = await assetRecord(matteSourceId);
+			if (!asset || cancelled) return;
+			await editor.load(asset);
+			if (cancelled || !matteSelectionId) return;
+			const stored = await assetRecord(matteSelectionId);
+			if (!stored || cancelled) return;
+			const { mask, width, height } = await decodeMask(stored);
+			if (!cancelled) editor.setMask(mask, width, height);
+		})().catch(() => setMatteStats({ painted: 0, coverage: 0, zoom: 1, canUndo: false, canRedo: false }));
+		return () => {
+			cancelled = true;
+			editor.dispose();
+			if (matteEditorRef.current === editor) matteEditorRef.current = null;
+		};
+		// Tolerance and mode are pushed by their own handlers below; re-running
+		// this effect for them would throw away the selection.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [matteSourceId, matteSelectionId]);
 	const [gizmoMode, setGizmoMode] = useState("move");
 	// Snap is a preference, not a law: with it on the gizmo blocks on the plan
 	// board's grid, and Ctrl/Cmd during a drag gives a free one. Off, it is the
@@ -1238,17 +1720,115 @@ globalThis.playMode = centerTab === "play";
 		setToast(isKo ? `${sceneObjectNameDisplayKo(object.name)} 추가됨 — W 이동, E 회전, R 크기` : `${object.name} added — W move, E rotate, R scale`);
 	}
 
+	/** "Sofa 2.png" reads as a set piece; "sofa-2.png" does not. The extension
+	 * goes, the rest is the user's own name for the thing. */
+	function cutoutNameFromFile(fileName) {
+		const base = String(fileName ?? "").replace(/\.[^.]+$/, "").trim();
+		return base || ko("Cutout", "컷아웃");
+	}
+
+	/**
+	 * Import one image and stand it up in the set. The card arrives at the
+	 * figure's own height, because a standee whose scale is a guess is worse
+	 * than useless in a tool where every camera level is a height in metres —
+	 * 1.8 m is at least an honest starting point to correct from.
+	 */
+	async function importCutout(file) {
+		if (!file) return;
+		try {
+			const asset = await rememberAsset(await importImageFile(file));
+			const camera = shotCamRef.current;
+			const placement = camera
+				? placementInFront({ x: camera.position.x, z: camera.position.z }, look.current.yaw)
+				: {};
+			const object = createCutoutObject(
+				{ assetId: asset.id, aspect: assetAspect(asset) ?? 1, height: CUTOUT_DEFAULT_HEIGHT, name: cutoutNameFromFile(asset.name) },
+				sceneObjects,
+				placement,
+			);
+			if (!object) return;
+			store.applyAtomic((objects) => [...objects, object]);
+			setSelectedHierarchyId(`object:${object.id}`);
+			setSidebarTab("inspector");
+			setGizmoMode("move");
+			setToast(
+				isKo
+					? `${object.name} 추가됨 — 실제 높이(m)를 입력하면 크기가 맞습니다`
+					: `${object.name} added — type its real height in metres to set the scale`,
+			);
+		} catch (error) {
+			setToast(isKo ? `이미지를 가져오지 못했어요 — ${error.message}` : `Could not import that image — ${error.message}`);
+		}
+	}
+
+	/** A drop can carry several pictures. They go in one at a time so each
+	 * lands in its own place and the last one is the one left selected. */
+	async function importCutouts(files) {
+		for (const file of files) await importCutout(file);
+	}
+
+	/**
+	 * Apply what the background editor is showing.
+	 *
+	 * Nothing is destroyed. The card keeps three things: the photograph it was
+	 * imported from, the purple someone painted on it, and the cut picture the
+	 * set actually renders — so the next edit starts from the original with the
+	 * selection still on it, however many times it is re-cut.
+	 *
+	 * Trimming the dead margin changes how much of the frame the subject fills,
+	 * so the card's height is scaled with it. The scale is stored rather than
+	 * multiplied in, or a second cut would compound one trim onto the last.
+	 */
+	async function applyMatte(id = selectedSceneObjectId) {
+		const object = sceneObjects.find((item) => item.id === id) ?? null;
+		const options = matteEditorRef.current?.options();
+		// Nothing purple means nothing was asked for. Removing "the background"
+		// on a picture nobody has marked would be a guess applied to their set.
+		if (!object || object.renderer !== CUTOUT_KIND || !options || matteBusy) return;
+		setMatteBusy(true);
+		try {
+			const sourceId = object.sourceAssetId || object.assetId;
+			const source = await assetRecord(sourceId);
+			if (!source) throw new Error(ko("its picture is missing from the store", "저장소에 사진이 없습니다"));
+			const [cut, matte] = await Promise.all([
+				cutOutBackground(source, { mask: options.mask }),
+				maskAsset(options.mask, { width: options.maskWidth, height: options.maskHeight, name: `${source.name || "cutout"} matte` }),
+			]);
+			await Promise.all([rememberAsset(cut.asset), rememberAsset(matte)]);
+			const fullFrameHeight = object.height / (object.matteScale || 1);
+			changeSceneObject(object.id, {
+				assetId: cut.asset.id,
+				sourceAssetId: source.id,
+				matteAssetId: matte.id,
+				matteScale: cut.heightScale,
+				aspect: cut.asset.width / cut.asset.height,
+				height: fullFrameHeight * cut.heightScale,
+			});
+			setToast(
+				isKo
+					? `${object.name} 배경 제거 — ${Math.round(cut.removed * 100)}% 지움. 원본과 칠한 영역은 그대로 남습니다`
+					: `${object.name} — ${Math.round(cut.removed * 100)}% removed. The original and your selection are kept`,
+			);
+		} catch (error) {
+			setToast(isKo ? `배경을 제거하지 못했어요 — ${error.message}` : `Could not remove the background — ${error.message}`);
+		} finally {
+			setMatteBusy(false);
+		}
+	}
+
 	function duplicateSelectedSceneObject(id = selectedSceneObjectId) {
 		// Defaults to the selection (Ctrl/Cmd+D); the hierarchy context menu
 		// passes a specific row's id. Same result either way: the copy is
 		// selected, offset one grid step, and toasted.
 		const object = sceneObjects.find((item) => item.id === id) ?? null;
 		if (!object) return;
-		const copy = createSceneObject(object.renderer, sceneObjects, {
-			x: object.x,
-			z: object.z,
-			rot: object.rot,
-		});
+		const placement = { x: object.x, z: object.z, rot: object.rot };
+		// A cutout cannot be minted from the catalogue — it needs the picture the
+		// original is already wearing — so the copy is created through its own
+		// door and shares the asset rather than importing it twice.
+		const copy = object.renderer === CUTOUT_KIND
+			? createCutoutObject({ assetId: object.assetId, aspect: object.aspect, height: object.height, name: object.name }, sceneObjects, placement)
+			: createSceneObject(object.renderer, sceneObjects, placement);
 		if (!copy) return;
 		// Unity drops the duplicate exactly on top of the original; for blocking,
 		// one grid step to the side means you can see that it worked.
@@ -1290,13 +1870,53 @@ globalThis.playMode = centerTab === "play";
 	// Undo/redo (plan §6.5). The store settles any open drag first, so a
 	// mid-drag press commits that drag as one entry and then steps past it.
 	// After a step the selection can point at a deleted object — drop it to
+	/* ---------------------- character undo stack ---------------------------
+	 * The scene history store owns scene OBJECTS; the cast lives outside it.
+	 * Character gestures (spawn, remove, show/hide, plan-board drags) push a
+	 * full-cast snapshot with the editing buffer folded in, and undo/redo
+	 * picks the newer of the two stacks so one Ctrl+Z history covers both. */
+	const snapshotCast = () => ({
+		characters: charactersRef.current.map((entry) => ({
+			...entry,
+			layer: entry.id === activeChar.id
+				? { waypoints: bufferRef.current.waypoints, promptClips: bufferRef.current.promptClips }
+				: entry.layer,
+		})),
+		bufferMotion: bufferRef.current.motion,
+		bufferCharId: loadedLayerCharRef.current,
+	});
+	function recordCharacterUndo() {
+		charHistoryRef.current.past.push({ tick: ++opClockRef.current, snapshot: snapshotCast() });
+		charHistoryRef.current.future = [];
+	}
+	function restoreCast(snapshot) {
+		setCharacters(snapshot.characters);
+		const bufferChar = snapshot.characters.find((entry) => entry.id === snapshot.bufferCharId) ?? snapshot.characters[0];
+		setWaypoints((bufferChar?.layer?.waypoints ?? []).map((waypoint) => ({ ...waypoint })));
+		setPromptClips((bufferChar?.layer?.promptClips ?? []).map((clip) => ({ ...clip })));
+		setMotion(snapshot.bufferMotion);
+		loadedLayerCharRef.current = bufferChar?.id ?? null;
+		setActiveCharacterId(bufferChar?.id ?? null);
+	}
+
 	// props so the inspector cannot show a ghost.
 	function undoScene() {
+		const charTop = charHistoryRef.current.past[charHistoryRef.current.past.length - 1];
+		if (charTop && charTop.tick > lastObjectOpRef.current) {
+			charHistoryRef.current.future.push({ tick: charTop.tick, snapshot: snapshotCast() });
+			charHistoryRef.current.past.pop();
+			restoreCast(charTop.snapshot);
+			setToast(ko("Undone", "실행 취소됨"));
+			return;
+		}
+		suppressObjectClockRef.current = true;
 		const restored = store.undo();
+		suppressObjectClockRef.current = false;
 		if (restored === null) {
 			setToast(ko("Nothing to undo", "실행 취소할 작업이 없어요"));
 			return;
 		}
+		lastObjectOpRef.current = ++opClockRef.current;
 		if (selectedSceneObjectId && !restored.some((object) => object.id === selectedSceneObjectId)) {
 			setSelectedHierarchyId("props");
 		}
@@ -1304,11 +1924,22 @@ globalThis.playMode = centerTab === "play";
 	}
 
 	function redoScene() {
+		const charTop = charHistoryRef.current.future[charHistoryRef.current.future.length - 1];
+		if (charTop && charTop.tick > lastObjectOpRef.current) {
+			charHistoryRef.current.past.push({ tick: charTop.tick, snapshot: snapshotCast() });
+			charHistoryRef.current.future.pop();
+			restoreCast(charTop.snapshot);
+			setToast(ko("Redone", "다시 실행됨"));
+			return;
+		}
+		suppressObjectClockRef.current = true;
 		const restored = store.redo();
+		suppressObjectClockRef.current = false;
 		if (restored === null) {
 			setToast(ko("Nothing to redo", "다시 실행할 작업이 없어요"));
 			return;
 		}
+		lastObjectOpRef.current = ++opClockRef.current;
 		if (selectedSceneObjectId && !restored.some((object) => object.id === selectedSceneObjectId)) {
 			setSelectedHierarchyId("props");
 		}
@@ -1410,7 +2041,7 @@ globalThis.playMode = centerTab === "play";
 	const startupShotState = nestedShotStartup.state ?? shotStartup.state;
 	// Each editorial strip owns its camera keys. The playhead chooses the
 	// active strip; there is no shared key list that could blend through a cut.
-	const [shots, setShots] = useState(() => startupShotState?.shots ?? initialShots(startupShotState?.frameCount ?? DEFAULT_DURATION_S * 20));
+	const [shots, setShots] = useState(() => startupShotState?.shots ?? initialShots(startupShotState?.frameCount ?? DEFAULT_DURATION_S * TIMELINE_FPS));
 	const [movePlaying, setMovePlaying] = useState(false);
 	// Follow slaves the move to the timeline playhead so camera and character
 	// motion share one time axis; off frees the camera while both stay set.
@@ -1418,13 +2049,14 @@ globalThis.playMode = centerTab === "play";
 	const [railDraw, setRailDraw] = useState(false);
 	const [hasCharSheet, setHasCharSheet] = useState(startupStage.hasCharSheet);
 	const [hasEnvSheet, setHasEnvSheet] = useState(false);
-	const [subject, setSubject] = useState(startupStage.subject ?? DEFAULT_SUBJECT);
-	const [subject2, setSubject2] = useState(startupStage.subject2 ?? "a man in a dark coat");
 	const [environment, setEnvironment] = useState(DEFAULT_ENVIRONMENT);
 	const [style, setStyle] = useState("moody cinematic lighting, 35mm film look");
 
 	const [cameraPos, setCameraPos] = useState(DEFAULT_CAMERA_POSITION);
 	const [subjectVisible, setSubjectVisible] = useState(true);
+	const liveControlRef = useRef(null);
+	const liveStateRef = useRef(null);
+	const liveHandlersRef = useRef(null);
 	const [result, setResult] = useState(null);
 	const [resultOpen, setResultOpen] = useState(false);
 	const [copied, setCopied] = useState(false);
@@ -1432,10 +2064,11 @@ globalThis.playMode = centerTab === "play";
 	const [toast, setToast] = useState(startup.toast ?? "");
 	const [bridge, setBridge] = useState(null);
 	const [ardyPrompt, setArdyPrompt] = useState("");
-	const [ardyDuration, setArdyDuration] = useState(DEFAULT_DURATION_S);
+	const [ardyDuration, setArdyDuration] = useState(4); // matches the 4 s generation cap
 	// Optional native-ARDY seed: empty string = omit from the request (the
-	// box picks its own); otherwise a plain integer in 0..2**31-1.
-	const [ardySeed, setArdySeed] = useState("2"); // RT demo parity: its GUI seed defaults to 2, so generation is reproducible out of the box; clear the field for the box's random seed
+	// box picks a fresh random one each run); otherwise a plain integer in
+	// 0..2**31-1 to reproduce a result.
+	const [ardySeed, setArdySeed] = useState("");
 	const [ardyRunning, setArdyRunning] = useState(false);
 	const [ardyStatus, setArdyStatus] = useState("");
 	const [consoleLines, setConsoleLines] = useState([]);
@@ -1449,8 +2082,8 @@ globalThis.playMode = centerTab === "play";
 	const [ardyReport, setArdyReport] = useState(null);
 	const [ardyOutcome, setArdyOutcome] = useState(null);
 	const ardyAbortRef = useRef(null);
-	// ARDY Core runs at 20 fps: the destination frame lives in [0, duration*20-1].
-	const maxDst = Math.max(0, Math.round(ardyDuration) * 20 - 1);
+	// Timeline frames for the configured duration: [0, duration*TIMELINE_FPS-1].
+	const maxDst = Math.max(0, Math.round(ardyDuration) * TIMELINE_FPS - 1);
 
 	/* --------------------------- motion workspace --------------------------- */
 	// The timeline playhead and the root waypoints are App-owned so the scene
@@ -1458,8 +2091,8 @@ globalThis.playMode = centerTab === "play";
 	const [tlFrame, setTlFrame] = useState(0);
 
 	const renderActive = useRenderActivity(tlPlaying || movePlaying);
-	const [tlFrameCount, setTlFrameCount] = useState(startupShotState?.frameCount ?? DEFAULT_DURATION_S * 20); // the generation clip length @ 20 fps
-	const [tlFps, setTlFps] = useState(20);
+	const [tlFrameCount, setTlFrameCount] = useState(startupShotState?.frameCount ?? DEFAULT_DURATION_S * TIMELINE_FPS); // the clip length on the production clock
+	const [tlFps, setTlFps] = useState(TIMELINE_FPS);
 	const activeShotIdx = shotIndexAtFrame(shots, tlFrame);
 	const activeShot = shots[activeShotIdx] ?? null;
 	const cameraKeys = activeShot?.cameraKeys ?? [];
@@ -1548,12 +2181,12 @@ globalThis.playMode = centerTab === "play";
 			return railFollow ? { ...shot, camera: updateCameraBlock(camera, { railFollow: { mode: "range", ...railFollow } }) } : shot;
 		}));
 	}
-	const frameCountRef = useRef(DEFAULT_DURATION_S * 20);
+	const frameCountRef = useRef(DEFAULT_DURATION_S * TIMELINE_FPS);
 	frameCountRef.current = tlFrameCount;
 	// Root waypoints {frame, x, z, heading: null}, kept sorted by frame —
 	// the fixed bridge contract rejects out-of-order or duplicate frames.
 	const [waypointMode, setWaypointMode] = useState(false);
-	const [waypoints, setWaypoints] = useState(startupShotState?.waypoints ?? []);
+	const [waypoints, setWaypoints] = useState(startupStage.characters?.[0]?.layer?.waypoints ?? startupShotState?.waypoints ?? []);
 	const [activeWaypointFrame, setActiveWaypointFrame] = useState(null);
 	const [pendingWaypointFrame, setPendingWaypointFrame] = useState(null);
 	useEffect(() => {
@@ -1593,7 +2226,13 @@ globalThis.playMode = centerTab === "play";
 	scenesRef.current = scenes;
 	activeSceneIdRef.current = activeSceneId;
 	shotDocumentRef.current = createShotAuthoringDocument({ shots, waypoints, frameCount: tlFrameCount });
-	actorStageRef.current = { charA, charB, showB, poseA, poseB, hasCharSheet, subject, subject2 };
+	actorStageRef.current = {
+		// sessionMotion is stripped: generated clips are session-only and far
+		// too heavy for the stage envelope; paths and prompt blocks persist.
+		characters: characters.map(({ sessionMotion, ...entry }) => entry),
+		hasCharSheet,
+		shotAspect: shotAspectKey,
+	};
 
 	function snapshotActiveScene(sourceScenes = scenesRef.current) {
 		return sourceScenes.map((scene) => scene.id === activeSceneIdRef.current
@@ -1627,6 +2266,170 @@ globalThis.playMode = centerTab === "play";
 		}
 	}
 
+	/* ============================ project files ============================
+	 * Game-engine workflow: the authoring state (scenes + cast + layers,
+	 * workspace layout, custom poses) round-trips through a real
+	 * `.cclayproject` file. localStorage stays as the always-on session
+	 * cache; the file is the portable, user-owned document. */
+	const [projectName, setProjectName] = useState(null); // null = untitled session
+	const [projectDirty, setProjectDirty] = useState(false);
+	const [projectMenuOpen, setProjectMenuOpen] = useState(false);
+	const [projectBrowserOpen, setProjectBrowserOpen] = useState(false);
+	const projectHandleRef = useRef(null);
+	const projectSnapshotRef = useRef("");
+	const projectStateRef = useRef(null);
+	projectStateRef.current = { workspaceLayout, customPoses };
+
+	function collectProjectSerialized(name) {
+		const scenesDocument = {
+			version: SCENES_VERSION,
+			activeSceneId: activeSceneIdRef.current,
+			scenes: snapshotActiveScene(),
+		};
+		return JSON.stringify(createProjectDocument({
+			scenesDocument,
+			workspaceLayout: projectStateRef.current.workspaceLayout,
+			customPoses: projectStateRef.current.customPoses,
+			name,
+		}), null, 2);
+	}
+
+	function markProjectClean(name, serialized) {
+		projectSnapshotRef.current = serialized;
+		setProjectDirty(false);
+		setProjectName(name);
+	}
+
+	async function saveProject(saveAs = false) {
+		const name = projectName ?? "Untitled";
+		const serialized = collectProjectSerialized(name);
+		try {
+			let handle = projectHandleRef.current;
+			if (saveAs || !handle || !hasFileSystemAccess()) {
+				if (hasFileSystemAccess()) {
+					handle = await pickProjectFileForSave(name);
+					projectHandleRef.current = handle;
+					await writeProjectFile(handle, serialized);
+					await rememberRecentProject(handle, name);
+				} else {
+					downloadProjectFallback(serialized, name);
+				}
+			} else {
+				await writeProjectFile(handle, serialized);
+			}
+			markProjectClean(name, serialized);
+			setToast(isKo ? `프로젝트 저장됨: ${name}${PROJECT_EXTENSION}` : `Project saved: ${name}${PROJECT_EXTENSION}`);
+		} catch (err) {
+			if (err?.name === "AbortError") return; // user closed the picker
+			setToast(ko("Could not save the project", "프로젝트를 저장하지 못했어요"));
+		}
+	}
+
+	function applyProject(project, serialized) {
+		const source = project.scenesDocument;
+		// A project FILE carries its own scene document and never passes the
+		// storage reader, so the 20 fps → 24 fps clock migration is applied here
+		// too — otherwise an older .cozyclay would open a sixth too fast.
+		const doc = Number.isInteger(source.version) && source.version < SCENES_VERSION
+			? { ...source, version: SCENES_VERSION, scenes: source.scenes.map((scene) => ({ ...scene, stage: migrateStageFrames(scene.stage) })) }
+			: source;
+		setScenes(doc.scenes);
+		setActiveSceneId(doc.activeSceneId);
+		if (project.workspaceLayout) setWorkspaceLayout({ ...DEFAULT_WORKSPACE_LAYOUT, ...project.workspaceLayout });
+		setCustomPoses(project.customPoses);
+		saveCustomPoses(project.customPoses);
+		persistScenes(doc.scenes, doc.activeSceneId);
+		openScene(doc.scenes[activeSceneIndex(doc.scenes, doc.activeSceneId)], doc.scenes);
+		projectSnapshotRef.current = serialized;
+		setProjectDirty(false);
+		setProjectName(project.name);
+	}
+
+	async function openProject() {
+		try {
+			let file = null;
+			let handle = null;
+			if (hasFileSystemAccess()) {
+				handle = await pickProjectFileForOpen();
+				file = await readProjectFile(handle);
+			} else {
+				file = await openProjectFallback();
+			}
+			if (!file) return;
+			const result = readProjectDocument(file.text);
+			if (!result.ok) {
+				setToast(isKo ? `프로젝트를 열 수 없어요: ${result.reason}` : `Cannot open project: ${result.reason}`);
+				return;
+			}
+			projectHandleRef.current = handle;
+			if (handle) await rememberRecentProject(handle, result.project.name);
+			applyProject(result.project, file.text);
+			setToast(isKo ? `프로젝트 열림: ${result.project.name}` : `Project opened: ${result.project.name}`);
+		} catch (err) {
+			if (err?.name === "AbortError") return;
+			console.error("openProject failed", err);
+			setToast(ko("Could not open the project", "프로젝트를 열지 못했어요"));
+		}
+	}
+
+	/** Open a project from the browser dialog: a stored handle from the
+	 * recents list or a file enumerated in the projects folder. */
+	async function openProjectByHandle(handle) {
+		try {
+			const file = await readProjectFile(handle);
+			const result = readProjectDocument(file.text);
+			if (!result.ok) {
+				setToast(isKo ? `프로젝트를 열 수 없어요: ${result.reason}` : `Cannot open project: ${result.reason}`);
+				return;
+			}
+			projectHandleRef.current = handle;
+			await rememberRecentProject(handle, result.project.name);
+			applyProject(result.project, file.text);
+			setProjectBrowserOpen(false);
+			setToast(isKo ? `프로젝트 열림: ${result.project.name}` : `Project opened: ${result.project.name}`);
+		} catch (err) {
+			console.error("openProjectByHandle failed", err);
+			setToast(ko("Could not open the project", "프로젝트를 열지 못했어요"));
+		}
+	}
+
+	function newProject() {
+		if (projectDirty && !window.confirm(ko("Discard unsaved changes and start a new project?", "저장되지 않은 변경사항을 버리고 새 프로젝트를 시작할까요?"))) return;
+		const fresh = createSceneDocument(ko("SCENE 01", "씬 01"));
+		setScenes(fresh.scenes);
+		setActiveSceneId(fresh.activeSceneId);
+		persistScenes(fresh.scenes, fresh.activeSceneId);
+		openScene(fresh.scenes[0], fresh.scenes);
+		projectHandleRef.current = null;
+		clearStoredProjectHandle();
+		projectSnapshotRef.current = "";
+		setProjectDirty(false);
+		setProjectName(null);
+		setToast(ko("New project", "새 프로젝트"));
+	}
+
+	// Re-open the last project on launch when the browser still grants access.
+	const projectAutoOpenedRef = useRef(false);
+	useEffect(() => {
+		if (projectAutoOpenedRef.current) return;
+		projectAutoOpenedRef.current = true;
+		loadStoredProjectHandle().then(async (record) => {
+			if (!record?.handle) return;
+			if ((await queryHandlePermission(record.handle)) !== "granted") return;
+			try {
+				const file = await readProjectFile(record.handle);
+				const result = readProjectDocument(file.text);
+				if (!result.ok) return;
+				projectHandleRef.current = record.handle;
+				applyProject(result.project, file.text);
+				setToast(isKo ? `프로젝트 복원됨: ${result.project.name}` : `Project restored: ${result.project.name}`);
+			} catch {
+				/* missing or unreadable file: fall back to the session cache */
+			}
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	function flushScenes() {
 		if (!dirtyRef.current) return;
 		persistScenes(snapshotActiveScene(), activeSceneIdRef.current);
@@ -1635,7 +2438,7 @@ globalThis.playMode = centerTab === "play";
 	function restoredShotState(scene) {
 		const restored = readShotAuthoringDocument(scene?.shotDocument ?? undefined);
 		if (restored.state) return restored.state;
-		const frameCount = DEFAULT_DURATION_S * 20;
+		const frameCount = DEFAULT_DURATION_S * TIMELINE_FPS;
 		return { shots: initialShots(frameCount), waypoints: [], frameCount };
 	}
 
@@ -1643,19 +2446,34 @@ globalThis.playMode = centerTab === "play";
 		const shotState = restoredShotState(scene);
 		const stage = createSceneStage(scene.stage);
 		const objects = Array.isArray(scene.objects) ? scene.objects : [];
-		storeRef.current = createSceneHistoryStore(objects, { onObjects: setSceneObjects });
+		storeRef.current = createSceneHistoryStore(objects, {
+			onObjects: (next) => {
+				if (!suppressObjectClockRef.current) lastObjectOpRef.current = ++opClockRef.current;
+				setSceneObjects(next);
+			},
+		});
 		setSceneObjects(objects);
 		setShots(shotState.shots);
-		setWaypoints(shotState.waypoints);
-		setTlFrameCount(shotState.frameCount ?? DEFAULT_DURATION_S * 20);
-		setCharA(stage.charA);
-		setCharB(stage.charB);
-		setShowB(stage.showB);
-		setPoseA(stage.poseA ?? DEFAULT_POSE);
-		setPoseB(stage.poseB ?? DEFAULT_POSE);
+		setTlFrameCount(shotState.frameCount ?? DEFAULT_DURATION_S * TIMELINE_FPS);
+		setCharacters(stage.characters);
+		setRigs({});
 		setHasCharSheet(stage.hasCharSheet);
-		setSubject(stage.subject ?? DEFAULT_SUBJECT);
-		setSubject2(stage.subject2 ?? "a man in a dark coat");
+		setShotAspectKey(stage.shotAspect);
+		// The motion-layer buffer reloads from the scene's first character.
+		const firstLayer = stage.characters[0]?.layer;
+		setWaypoints(firstLayer?.waypoints ?? shotState.waypoints ?? []);
+		setPromptClips(firstLayer?.promptClips?.map((clip) => ({ ...clip })) ?? []);
+		setMotion(null);
+		// Takes belong to the room being left; restoreMotionRefs re-fetches the
+		// incoming scene's, and a stale full take must never survive the switch.
+		motionFullRef.current.clear();
+		setSelectedPromptId(null);
+		ikStatesRef.current.clear();
+		ikStateRef.current = createIkState();
+		loadedLayerCharRef.current = stage.characters[0]?.id ?? null;
+		setActiveCharacterId(stage.characters[0]?.id ?? null);
+		charHistoryRef.current = { past: [], future: [] };
+		restoreMotionRefs(stage.characters);
 		setTlFrame(0);
 		setMovePlaying(false);
 		manualCameraOverrideRef.current = false;
@@ -1722,13 +2540,290 @@ globalThis.playMode = centerTab === "play";
 		openScene(target, nextScenes);
 	}
 
+	// Commands are a sequential transport boundary, while React commits on a
+	// later turn. Keep its read model current synchronously so the next frame
+	// observes the mutation that the previous frame just acknowledged.
+	liveStateRef.current = {
+		scenes,
+		activeSceneId,
+		camera: cameraPos,
+		fovDeg,
+		characters,
+		objects: sceneObjects,
+		commitManualCameraFraming,
+		recordCharacterUndo,
+		removeCharacter,
+		persistScenes,
+		openScene,
+		loadMotion,
+	};
+	if (!liveHandlersRef.current) {
+		const finitePatch = (args, fields) => {
+			const patch = {};
+			for (const field of fields) {
+				if (args[field] === undefined) continue;
+				if (!Number.isFinite(args[field])) throw new Error(`Invalid ${field}`);
+				patch[field] = args[field];
+			}
+			return patch;
+		};
+		const characterForRef = (characters, ref) => {
+			if (typeof ref === "number" && Number.isInteger(ref)) return characters[ref - 1] ?? null;
+			if (typeof ref !== "string" || !ref) return null;
+			if (/^\d+$/.test(ref)) return characters[Number(ref) - 1] ?? null;
+			if (ref.toUpperCase() === "A") return characters[0] ?? null;
+			if (ref.toUpperCase() === "B") return characters[1] ?? null;
+			return characters.find((entry) => entry.id === ref) ?? null;
+		};
+		const describe = () => {
+			const live = liveStateRef.current;
+			return {
+				sceneName: live.scenes.find((scene) => scene.id === live.activeSceneId)?.name ?? "",
+				camera: { ...live.camera, focalMm: Math.round(fovToFocalMm((live.fovDeg * Math.PI) / 180) * 100) / 100 },
+				characters: live.characters.map((entry) => ({ id: entry.id, subject: entry.subject, x: entry.x, z: entry.z, rot: entry.rot, hidden: entry.hidden })),
+				// Scale and the library footprint travel with each object: the server
+				// reports real sizes from them, and without them every prop reads as
+				// 1x1x1 no matter how it was actually built.
+				objects: live.objects.map((object) => ({
+					id: object.id, name: object.name,
+					x: object.x, y: object.y, z: object.z, rot: object.rot,
+					scaleX: object.scaleX, scaleY: object.scaleY, scaleZ: object.scaleZ,
+					parent: object.parent ?? null,
+					footprint: object.footprint, height: object.height,
+				})),
+			};
+		};
+		const replaceCharacters = (next) => {
+			charactersRef.current = next;
+			liveStateRef.current.characters = next;
+			setCharacters(next);
+		};
+		const syncObjects = () => {
+			liveStateRef.current.objects = storeRef.current.objects;
+		};
+		liveHandlersRef.current = {
+			ping: () => ({ pong: true }),
+			describe,
+			// Camera moves are not undoable in the UI. This is the free-camera and
+			// Top-View path: drive the shot camera, lens state, then manual ownership.
+			set_camera: (args) => {
+				const live = liveStateRef.current;
+				const patch = finitePatch(args, ["x", "y", "z"]);
+				let nextFov = live.fovDeg;
+				if (args.focalMm !== undefined) {
+					if (!Number.isFinite(args.focalMm) || args.focalMm <= 0) throw new Error("Invalid focalMm");
+					nextFov = (focalMmToFov(args.focalMm) * 180) / Math.PI;
+					if (nextFov < 14 || nextFov > 90) throw new Error("focalMm is outside the editor lens range");
+				}
+				const next = { ...live.camera, ...patch };
+				const camera = shotCamRef.current;
+				if (camera) {
+					camera.position.set(next.x, next.y, next.z);
+					camera.fov = nextFov;
+					camera.updateProjectionMatrix();
+				}
+				live.camera = next;
+				live.fovDeg = nextFov;
+				setCameraPos(next);
+				setFovDeg(nextFov);
+				live.commitManualCameraFraming();
+				return { camera: { ...next, focalMm: Math.round(fovToFocalMm((nextFov * Math.PI) / 180) * 100) / 100 } };
+			},
+			add_character: (args) => {
+				if (typeof args.subject !== "string") throw new Error("Invalid subject");
+				const live = liveStateRef.current;
+				const patch = finitePatch(args, ["x", "z", "rot"]);
+				live.recordCharacterUndo();
+				const id = nextCharacterId(live.characters);
+				replaceCharacters([...live.characters, createCharacterEntry({ id, subject: args.subject, pose: DEFAULT_POSE, ...patch }, live.characters.length)]);
+				return { id };
+			},
+			update_character: (args) => {
+				const live = liveStateRef.current;
+				const character = characterForRef(live.characters, args.ref);
+				if (!character) throw new Error("Character not found");
+				const patch = finitePatch(args, ["x", "z", "rot"]);
+				if (args.subject !== undefined) {
+					if (typeof args.subject !== "string") throw new Error("Invalid subject");
+					patch.subject = args.subject;
+				}
+				if (args.hidden !== undefined) {
+					if (typeof args.hidden !== "boolean") throw new Error("Invalid hidden");
+					patch.hidden = args.hidden;
+				}
+				if (!Object.keys(patch).some((key) => patch[key] !== character[key])) return { id: character.id };
+				live.recordCharacterUndo();
+				replaceCharacters(live.characters.map((entry) => entry.id === character.id ? { ...entry, ...patch } : entry));
+				return { id: character.id };
+			},
+			remove_character: (args) => {
+				const live = liveStateRef.current;
+				const character = characterForRef(live.characters, args.ref);
+				if (!character) throw new Error("Character not found");
+				if (live.characters.length <= 1) throw new Error("Cannot remove the final character");
+				live.removeCharacter(character.id);
+				live.characters = charactersRef.current;
+				return { id: character.id };
+			},
+			place_object: (args) => {
+				if (typeof args.kind !== "string") throw new Error("Invalid kind");
+				const live = liveStateRef.current;
+				const placement = finitePatch(args, ["x", "z", "rot"]);
+				const object = createSceneObject(args.kind, live.objects, placement);
+				if (!object) throw new Error(`Unknown object kind: ${args.kind}`);
+				const patch = finitePatch(args, ["y"]);
+				const placed = updateSceneObject([object], object.id, patch)[0];
+				storeRef.current.applyAtomic((objects) => [...objects, placed]);
+				syncObjects();
+				return { id: placed.id };
+			},
+			update_object: (args) => {
+				const live = liveStateRef.current;
+				if (typeof args.id !== "string" || !live.objects.some((object) => object.id === args.id)) throw new Error("Object not found");
+				const patch = finitePatch(args, ["x", "y", "z", "rot", "rotX", "rotZ"]);
+				// A uniform `scale` is the common case; per-axis values are what a
+				// squashed disc or a stretched column needs, exactly as the
+				// inspector's three sliders provide. Per-axis wins when both come.
+				if (args.scale !== undefined) {
+					if (!Number.isFinite(args.scale)) throw new Error("Invalid scale");
+					patch.scaleX = args.scale;
+					patch.scaleY = args.scale;
+					patch.scaleZ = args.scale;
+				}
+				Object.assign(patch, finitePatch(args, ["scaleX", "scaleY", "scaleZ"]));
+				if (args.color !== undefined) {
+					if (typeof args.color !== "string") throw new Error("Invalid color");
+					patch.color = args.color;
+				}
+				storeRef.current.applyAtomic((objects) => updateSceneObject(objects, args.id, patch));
+				syncObjects();
+				return { id: args.id };
+			},
+			remove_object: (args) => {
+				const live = liveStateRef.current;
+				if (typeof args.id !== "string" || !live.objects.some((object) => object.id === args.id)) throw new Error("Object not found");
+				storeRef.current.applyAtomic((objects) => removeSceneObject(objects, args.id));
+				syncObjects();
+				return { id: args.id };
+			},
+			// Replacing a document follows the existing project-open path and clears
+			// its per-scene histories, so load_scenes is deliberately not undoable.
+			load_scenes: (args) => {
+				if (!args.document || typeof args.document !== "object" || Array.isArray(args.document)) throw new Error("Invalid scene document");
+				const loaded = readSceneDocument(JSON.stringify(args.document));
+				if (loaded.status !== "valid" && loaded.status !== "migrated") throw new Error("Invalid scene document");
+				const document = loaded.document;
+				const target = document.scenes[activeSceneIndex(document.scenes, document.activeSceneId)];
+				const live = liveStateRef.current;
+				live.persistScenes(document.scenes, document.activeSceneId);
+				live.openScene(target, document.scenes);
+				live.scenes = document.scenes;
+				live.activeSceneId = document.activeSceneId;
+				live.objects = storeRef.current.objects;
+				live.characters = createSceneStage(target.stage).characters;
+				charactersRef.current = live.characters;
+				return { sceneName: target.name };
+			},
+			// Loads a bridge-generated take onto the active character — the same
+			// path the demo seed and the Motion panel use. Replacing a take is not
+			// undoable in the UI either, so this is deliberately not undoable.
+			// Grouping is an editing convenience: the parent carries its children
+			// when it moves, so a set piece built from primitives is dragged once.
+			group_objects: (args) => {
+				const live = liveStateRef.current;
+				if (typeof args.parent !== "string" || !live.objects.some((o) => o.id === args.parent)) {
+					throw new Error("Parent object not found");
+				}
+				if (!Array.isArray(args.children) || !args.children.length) throw new Error("No children given");
+				for (const child of args.children) {
+					if (!live.objects.some((o) => o.id === child)) throw new Error(`Object not found: ${child}`);
+				}
+				storeRef.current.applyAtomic((objects) =>
+					args.children.reduce((acc, child) => setSceneObjectParent(acc, child, args.parent), objects),
+				);
+				syncObjects();
+				return { parent: args.parent, children: args.children.length };
+			},
+			ungroup_objects: (args) => {
+				const live = liveStateRef.current;
+				if (!Array.isArray(args.children) || !args.children.length) throw new Error("No children given");
+				for (const child of args.children) {
+					if (!live.objects.some((o) => o.id === child)) throw new Error(`Object not found: ${child}`);
+				}
+				storeRef.current.applyAtomic((objects) =>
+					args.children.reduce((acc, child) => setSceneObjectParent(acc, child, null), objects),
+				);
+				syncObjects();
+				return { children: args.children.length };
+			},
+			// Authoring blocks is not generating: a director writes the beats and
+			// their ranges first, then generates when the schedule reads right.
+			// Frames arrive on the timeline's own 24 fps clock.
+			set_prompt_blocks: (args) => {
+				if (!Array.isArray(args.blocks)) throw new Error("Invalid blocks");
+				const stamp = Date.now();
+				const clips = args.blocks.map((block, i) => {
+					const startFrame = Math.round(Number(block.startFrame));
+					const endFrame = Math.round(Number(block.endFrame));
+					if (!Number.isFinite(startFrame) || !Number.isFinite(endFrame) || endFrame <= startFrame) {
+						throw new Error(`Invalid frame range on block ${i + 1}`);
+					}
+					if (typeof block.text !== "string" || !block.text.trim()) throw new Error(`Block ${i + 1} needs text`);
+					return { id: `prompt-${stamp}-${i}`, startFrame, endFrame, text: block.text.trim() };
+				});
+				const live = liveStateRef.current;
+				live.setPromptClips(clips);
+				if (clips.length) {
+					live.setTlFrameCount((count) => Math.max(count, clips[clips.length - 1].endFrame));
+				}
+				return { blocks: clips.length };
+			},
+			load_motion: async (args) => {
+				if (typeof args.url !== "string" || !args.url.startsWith("/ardy/")) throw new Error("Invalid motion url");
+				const prompt = typeof args.prompt === "string" ? args.prompt : "";
+				await liveStateRef.current.loadMotion(args.url, prompt);
+				// Optional per-phase blocks land on the Prompts lane the way hand-authored
+				// ones do. They arrive on ARDY's 20 fps clock; the lane runs on the 24 fps
+				// production clock, so each boundary is converted, not copied.
+				if (Array.isArray(args.blocks) && args.blocks.length) {
+					const toTimeline = (frame) => Math.round((frame * TIMELINE_FPS) / ARDY_FPS);
+					const stamp = Date.now();
+					const clips = args.blocks.map((block, i) => ({
+						id: `prompt-${stamp}-${i}`,
+						startFrame: toTimeline(block.startFrame),
+						endFrame: toTimeline(block.endFrame),
+						text: typeof block.prompt === "string" ? block.prompt : "",
+					}));
+					liveStateRef.current.setPromptClips(clips);
+					liveStateRef.current.setTlFrameCount((count) => Math.max(count, clips[clips.length - 1].endFrame));
+				}
+				return { loaded: true, url: args.url, blocks: Array.isArray(args.blocks) ? args.blocks.length : 0 };
+			},
+		};
+	}
+
+	useEffect(() => {
+		const enabled = import.meta.env.DEV || window.__COZYCLAY_LIVE__ === true;
+		if (!enabled) return undefined;
+		// StrictMode replays effects in development. Delaying the open lets the
+		// replay cleanup cancel its first pass, so one tab owns one socket.
+		const timer = setTimeout(() => {
+			if (!liveControlRef.current) liveControlRef.current = createLiveControl({ handlers: liveHandlersRef.current });
+		}, 0);
+		return () => {
+			clearTimeout(timer);
+			liveControlRef.current?.close();
+			liveControlRef.current = null;
+		};
+	}, []);
+
 	// One debounced Scene-document save owns both departments. Switching calls
 	// persistScenes directly, so no outgoing edit can be overtaken by a render.
 	useEffect(() => {
 		dirtyRef.current = true;
 		const timer = setTimeout(flushScenes, 400);
 		return () => clearTimeout(timer);
-	}, [sceneObjects, shots, waypoints, tlFrameCount, charA, charB, showB, poseA, poseB, hasCharSheet, subject, subject2, scenes, activeSceneId]);
+	}, [sceneObjects, shots, waypoints, tlFrameCount, charA, charB, showB, poseA, poseB, hasCharSheet, subject, subject2, shotAspectKey, scenes, activeSceneId]);
 	useEffect(() => {
 		const onPageHide = () => flushScenes();
 		const onVisibility = () => {
@@ -1742,12 +2837,145 @@ globalThis.playMode = centerTab === "play";
 			flushScenes();
 		};
 	}, []);
-	const [promptClips, setPromptClips] = useState(() => DEFAULT_PROMPT_CLIPS.map((clip) => ({ ...clip })));
+	const [promptClips, setPromptClips] = useState(() => (startupStage.characters?.[0]?.layer?.promptClips ?? DEFAULT_PROMPT_CLIPS).map((clip) => ({ ...clip })));
+	// These hooks are declared after the liveStateRef assignment above runs, so
+	// they join the live read model here — same render, no TDZ.
+	Object.assign(liveStateRef.current, { setPromptClips, setTlFrameCount });
+
+	// Dirty tracking: any divergence from the last saved file lights the dot.
+	useEffect(() => {
+		if (projectName === null) return; // untitled sessions are never "dirty"
+		const serialized = collectProjectSerialized(projectName);
+		setProjectDirty(serialized !== projectSnapshotRef.current);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [scenes, activeSceneId, workspaceLayout, customPoses, characters, shots, waypoints, promptClips, projectName]);
 	const [selectedPromptId, setSelectedPromptId] = useState(null);
 	// Loaded motion: decoded arrays plus the world anchor captured at load.
 	const [motion, setMotion] = useState(null);
+	// The untrimmed take per CHARACTER. Trims are non-destructive views of the
+	// full take, so re-trimming and "restore full" always cut from the
+	// original — and because each cast member owns its own layer, one shared
+	// ref would hand Subject 2's take to Subject 1 on the next switch.
+	const motionFullRef = useRef(new Map()); // charId -> untrimmed take
 	const [motionBusy, setMotionBusy] = useState(false);
 	const [motionError, setMotionError] = useState("");
+	/* ------------------------- video capture (ingest) ---------------------- */
+	const [multiModelUrl, setMultiModelUrl] = useState("");
+	const [multiModelSource, setMultiModelSource] = useState(null);
+	const [multiModelStatus, setMultiModelStatus] = useState("idle");
+	// The ingest is a real download + decode, so it owns real progress and a
+	// real receipt: the footage numbers below come from the decoded media.
+	const [multiModelStage, setMultiModelStage] = useState("idle");
+	const [multiModelProgress, setMultiModelProgress] = useState(null);
+	const [multiModelFootage, setMultiModelFootage] = useState(null);
+	const [multiModelError, setMultiModelError] = useState("");
+	const multiModelFileRef = useRef(null);
+	const multiModelRunRef = useRef(0);
+	const multiModelObjectUrlRef = useRef(null);
+	const [multiModelTake, setMultiModelTake] = useState(null);
+	const [multiModelExtract, setMultiModelExtract] = useState("idle"); // idle | running | done | error
+	const [multiModelExtractProgress, setMultiModelExtractProgress] = useState(null);
+	const [multiModelExtractError, setMultiModelExtractError] = useState("");
+	const multiModelDetectorRef = useRef(null); // engine survives re-runs; the 15 MB download happens once
+	const multiModelRestRef = useRef(null);
+
+	// Cast render props, memoized with Character itself (React.memo): during
+	// playback the playhead ticks 24 times a second, and a character whose
+	// props did not change must not re-render its subtree.
+	const characterViews = useMemo(() => characters.flatMap((entry, index) => {
+		if (entry.hidden) return [];
+		// Each cast member is driven by ITS OWN clip: the active one reads
+		// the editing buffer, the others their stored session motion.
+		const clip = entry.id === activeChar.id ? motion : entry.sessionMotion;
+		return [{
+			id: entry.id,
+			url: characterModelUrl(entry.model),
+			position: clip ? [clip.anchorX, entry.y ?? 0, clip.anchorZ] : [entry.x, entry.y ?? 0, entry.z],
+			rot: clip ? clip.rotationDeg : entry.rot,
+			tint: entry.tint ?? defaultCharacterTint(entry, index),
+			pose: clip ? null : (entry.pose ?? DEFAULT_POSE),
+			// The stature the entry's take was extracted at. It rides with the
+			// clip, never separately — see Character for why.
+			scale: entry.scale ?? 1,
+			onRig: reportRig(entry.id),
+			pickId: index === 0 ? "A" : index === 1 ? "B" : entry.id,
+		}];
+	}), [characters, activeChar.id, motion]);
+	// Where the selection gizmo stands: same driving rules as the render,
+	// for the active (selected) cast member only. Gated on the HIERARCHY
+	// selection, not the sticky active layer — the layer stays on the last
+	// character so the motion tab keeps working, but a move gizmo hanging in
+	// the viewport while the camera or a prop is selected reads as a stray
+	// widget.
+	const gizmoView = useMemo(() => {
+		if (!charIdFromHierarchyId(selectedHierarchyId)) return null;
+		const entry = characters.find((item) => item.id === activeChar.id);
+		if (!entry || entry.hidden) return null;
+		const clip = motion;
+		return { position: clip ? [clip.anchorX, entry.y ?? 0, clip.anchorZ] : [entry.x, entry.y ?? 0, entry.z] };
+	}, [characters, activeChar.id, motion, selectedHierarchyId]);
+	// The cast rides the SAME gizmo as scene objects — one movement grammar
+	// for everything on stage. The proxy hands ObjectGizmo the object shape
+	// it expects; `height` puts the pivot at the hips like a prop's centre.
+	const characterGizmoObject = useMemo(() => {
+		if (!gizmoView) return null;
+		const entry = characters.find((item) => item.id === activeChar.id);
+		return {
+			id: "__character__",
+			x: gizmoView.position[0],
+			y: gizmoView.position[1],
+			z: gizmoView.position[2],
+			height: 1.15,
+			footprint: { width: 0.6, depth: 0.6 },
+			rotY: entry?.rot ?? 0,
+			scaleX: entry?.scale ?? 1,
+			scaleY: entry?.scale ?? 1,
+			scaleZ: entry?.scale ?? 1,
+		};
+	}, [gizmoView, characters, activeChar.id]);
+
+	/* --------------------- per-character layer buffers ---------------------
+	 * waypoints / promptClips / motion above are the EDITING BUFFER of the
+	 * active character's animation layer. On a character switch the buffer is
+	 * committed back into the previous character's entry and the new one's
+	 * layer is loaded, so each cast member keeps its own schedule. The
+	 * generated clip is session-only; paths and prompt blocks persist in the
+	 * stage envelope via the characters array. */
+	const bufferRef = useRef({ waypoints: [], promptClips: [], motion: null, ik: null });
+	bufferRef.current = { waypoints, promptClips, motion, ik: ikStateRef.current };
+	const loadedLayerCharRef = useRef(activeChar.id);
+	const ikStatesRef = useRef(new Map()); // charId -> ikState, one per layer
+	useEffect(() => {
+		const previous = loadedLayerCharRef.current;
+		if (previous === activeChar.id) return;
+		// Leaving IK on switch: the handles are re-seated per rig, and a
+		// half-dragged chain must never leak onto another character.
+		if (ikMode) leaveIkMode();
+		if (previous) {
+			ikStatesRef.current.set(previous, bufferRef.current.ik);
+			setCharacters((list) => list.map((entry) => entry.id === previous
+				? { ...entry, layer: { waypoints: bufferRef.current.waypoints, promptClips: bufferRef.current.promptClips }, sessionMotion: bufferRef.current.motion }
+				: entry));
+		}
+		const layer = activeChar.layer ?? createCharacterLayer();
+		setWaypoints(layer.waypoints.map((waypoint) => ({ ...waypoint })));
+		setPromptClips(layer.promptClips.map((clip) => ({ ...clip })));
+		// A clip that arrived while this character was inactive (an extra
+		// extraction take, a restored motionRef, a queued generation) becomes
+		// trimmable the moment it enters the buffer. Seed only when absent: an
+		// existing entry is the UNTRIMMED take, and the buffer may be holding a
+		// cut view of it.
+		if (activeChar.sessionMotion && !motionFullRef.current.has(activeChar.id)) {
+			motionFullRef.current.set(activeChar.id, activeChar.sessionMotion);
+		}
+		setMotion(activeChar.sessionMotion ?? null);
+		setSelectedPromptId(null);
+		setWaypointMode(false);
+		setActiveWaypointFrame(null);
+		setPendingWaypointFrame(null);
+		ikStateRef.current = ikStatesRef.current.get(activeChar.id) ?? createIkState();
+		loadedLayerCharRef.current = activeChar.id;
+	}, [activeChar.id]);
 	// Pre-playback bone snapshot; restoring it (after Character's pose effect
 	// has re-applied poseA) puts the rig back exactly where it was.
 	const restoreRef = useRef(null);
@@ -1831,11 +3059,14 @@ globalThis.playMode = centerTab === "play";
 		else if (!rec.armed) setToast(ko("Recording cancelled before any frame was captured", "프레임을 캡처하기 전에 녹화가 취소됐어요"));
 	}
 
-	// Seedance's reference-video floor is 24 fps while ARDY clips run at 20.
-	// Recording plays the clip at 20/24 real time and stamps each captured
-	// frame 41.67 ms apart, so the exported file is exactly 24 fps at true
-	// motion speed — valid as a camera/motion reference out of the box.
-	const RECORD_FPS = 24;
+	// Seedance's reference-video floor is 24 fps — and so is the production
+	// timeline now, so capture and timeline share one clock: the playhead
+	// advances one timeline frame per captured frame, each stamped 41.67 ms
+	// apart. The exported file is exactly 24 fps at true motion speed (the
+	// old 20-fps timeline needed a 20/24 real-time warp for the same result),
+	// valid as a camera/motion reference out of the box. This is the EXPORT
+	// clock, never the ARDY wire clock — it does not go through toArdyFrame.
+	const RECORD_FPS = TIMELINE_FPS;
 
 	function toggleShotRecording() {
 		if (recRef.current) {
@@ -1854,8 +3085,8 @@ globalThis.playMode = centerTab === "play";
 			return;
 		}
 		const mirror = document.createElement("canvas");
-		mirror.width = 1600;
-		mirror.height = 900;
+		mirror.width = shotOutput.width;
+		mirror.height = shotOutput.height;
 		const ctx = mirror.getContext("2d");
 		// Frames go in manually (and only when one was actually drawn): the
 		// track must be exactly RECORD_FPS, not whatever the display runs at.
@@ -1959,7 +3190,7 @@ globalThis.playMode = centerTab === "play";
 				rec.timer = setTimeout(timeoutTick, 20);
 				return;
 			}
-			const img = fitAspect(pane, SHOT_ASPECT);
+			const img = fitAspect(pane, shotOutput.aspect);
 			const scale = glCanvas.width / stageRect.width;
 			ctx.drawImage(
 				glCanvas,
@@ -2085,8 +3316,14 @@ globalThis.playMode = centerTab === "play";
 	}
 
 	const allPoses = useMemo(() => [...BUILT_IN_POSES, ...customPoses], [customPoses]);
-	const posedRig = () => (posing === "B" ? rigB : rigA);
-	const setPosed = posing === "B" ? setPoseB : setPoseA;
+	// The pose studio follows the character it was opened for: `posing` is a
+	// charId, so every cast member gets the same studio, not just the first two.
+	const posingIndex = characters.findIndex((entry) => entry.id === posing);
+	const posingChar = posingIndex >= 0 ? characters[posingIndex] : null;
+	const posedRig = () => rigs[posing] ?? null;
+	const setPosed = (pose) => {
+		if (posingIndex >= 0) updateCharacterAt(posingIndex, { pose: typeof pose === "function" ? pose(posingChar?.pose ?? DEFAULT_POSE) : pose });
+	};
 
 	/* ------------------------- waypoint workspace --------------------------- */
 
@@ -2095,7 +3332,9 @@ globalThis.playMode = centerTab === "play";
 	const WALK_SPEED_MPS = 1.4;
 	const ROOT_ROOM_LIMIT = 11;
 	const clampRootPosition = (value) => Math.max(-ROOT_ROOM_LIMIT, Math.min(ROOT_ROOM_LIMIT, value));
-	const rootStart = () => ({ frame: 0, x: charA.x, z: charA.z });
+	// Frame 0 of a root path is the ACTIVE character's spot — each layer's
+	// path starts from its own cast member.
+	const rootStart = () => ({ frame: 0, x: activeChar.x, z: activeChar.z });
 
 	function validateWaypointAt(ordered, index, candidate) {
 		const previous = index > 0 ? ordered[index - 1] : rootStart();
@@ -2236,62 +3475,520 @@ globalThis.playMode = centerTab === "play";
 
 	/* --------------------------- motion playback ---------------------------- */
 
-	// Decoded motion + the world anchor: frame 0 always starts at Subject 1.
-	// Authored root destinations are generated by ARDY as sparse constraints,
-	// so playback consumes the returned trajectory without coordinate warping.
-	async function loadMotion(url, prompt, rotationDeg = charA.rot) {
-		setMotionBusy(true);
-		setMotionError("");
-		// Loading a motion drops out of IK EDIT mode (playback is the new
-		// context) — the IK KEYS stay and keep correcting the clip layer-style.
+	function leaveIkMode() {
 		setIkMode(false);
+		setIkFocus(null);
+	}
+
+	/** Hand `rig` over to playback. Every path that starts a clip — a loaded
+	 *  take, a browser-baked one — does the same two things: drop out of IK
+	 *  EDIT mode (playback is the new context; the IK KEYS stay and keep
+	 *  correcting the clip layer-style) and swap the pre-playback bone
+	 *  baseline, so a re-load never snapshots mid-animation and clearing
+	 *  always returns to the blocking pose. */
+	function beginPlaybackOn(rig) {
+		leaveIkMode();
+		const previous = restoreRef.current;
+		restoreRef.current = null;
+		if (previous) restorePlaybackBones(previous.rig, previous.bones);
+		restoreRef.current = { rig, bones: snapshotPlaybackBones(rig) };
+	}
+
+	/* ---------------------------- video capture ----------------------------
+	 * Footage in, takes out. The ingest downloads and decodes a source so the
+	 * timeline is sized by what was actually read; extraction then turns it
+	 * into one take per tracked performer. Take 0 belongs to the ACTIVE
+	 * character's layer, the rest are landed on their own cast members. */
+
+	// A picked file is already local bytes: no download stage, straight to the
+	// probe that produces the timeline numbers.
+	function chooseMultiModelFile(event) {
+		const file = event.target.files?.[0] ?? null;
+		if (!file) return;
+		setMultiModelUrl("");
+		ingestFootage({ kind: "file", name: file.name, blob: file, bytes: file.size });
+	}
+
+	async function pasteMultiModelUrl() {
 		try {
-			// Re-loading while a motion is active: restore the previous
-			// pre-playback baseline first, so the new snapshot is not taken
-			// mid-animation and clearing always returns to the blocking pose.
-			const previous = restoreRef.current;
-			restoreRef.current = null;
-			if (previous) restorePlaybackBones(previous.rig, previous.bones);
-			const decoded = await loadMotionFromUrl(url);
-			const rig = rigA;
-			if (!rig) throw new Error(ko("Subject 1 rig is not loaded", "인물 1 리그가 로드되지 않았어요"));
-			restoreRef.current = { rig, bones: snapshotPlaybackBones(rig) };
-			setMotion({
-			// Capture the exact prompt this motion was generated from; the
-			// timeline keeps showing it even if the input field is edited
-			// afterwards.
-			prompt: typeof prompt === "string" ? prompt : "",
-				...decoded,
-				url,
-				anchorX: charA.x,
-				anchorZ: charA.z,
-				anchorFrame: 0,
-				rotationDeg,
+			const text = await navigator.clipboard.readText();
+			if (!text.trim()) return;
+			setMultiModelUrl(text.trim());
+			setMultiModelStatus("idle");
+		} catch {
+			setToast(isKo ? "클립보드를 읽지 못했어요 — 직접 붙여넣어 주세요" : "Clipboard is unavailable — paste into the field directly");
+		}
+	}
+
+	function useMultiModelUrl() {
+		const raw = multiModelUrl.trim();
+		// A platform page (YouTube, Vimeo, …) is never browser-fetchable, but
+		// the dev bridge can fetch it server-side. With the bridge up the
+		// address goes there; without it the named refusal below stands.
+		if (isPlatformPageUrl(raw) && bridge?.ok) {
+			ingestPlatformFootage(raw);
+			return;
+		}
+		const normalized = normalizeSourceUrl(raw);
+		if (!normalized.ok) {
+			setMultiModelStatus("error");
+			setMultiModelStage("error");
+			setMultiModelError(MULTIMODEL_REASONS[normalized.reason]?.[isKo ? 1 : 0] ?? normalized.reason);
+			return;
+		}
+		ingestFootage({ kind: "url", name: sourceLabel(normalized.url), url: normalized.url });
+	}
+
+	/** Platform page → bridge download (yt-dlp + normalize) → the local
+	 *  /ardy/footage/… address rides the ordinary ingest unchanged. */
+	async function ingestPlatformFootage(pageUrl) {
+		const run = multiModelRunRef.current + 1;
+		multiModelRunRef.current = run;
+		const live = () => multiModelRunRef.current === run;
+		setMultiModelSource({ kind: "url", name: sourceLabel(pageUrl), url: pageUrl });
+		setMultiModelFootage(null);
+		setMultiModelError("");
+		setMultiModelStatus("busy");
+		setMultiModelStage("fetching");
+		setMultiModelProgress(null);
+		setMultiModelTake(null);
+		setMultiModelExtract("idle");
+		setMultiModelExtractProgress(null);
+		setMultiModelExtractError("");
+		try {
+			const footage = await requestBridgeFootage(pageUrl, {
+				onProgress: ({ ratio }) => {
+					if (live()) setMultiModelProgress(Number.isFinite(ratio) ? ratio : null);
+				},
 			});
-			setTlFrameCount(decoded.frames);
-			setTlFps(decoded.fps);
+			if (!live()) return;
+			ingestFootage({ kind: "url", name: footage.title || sourceLabel(pageUrl), url: footage.url, fps: footage.fps, bridgeId: footage.footage ?? null });
+		} catch (error) {
+			if (!live()) return;
+			const code = error?.message ?? String(error);
+			setMultiModelStage("error");
+			setMultiModelStatus("error");
+			setMultiModelProgress(null);
+			setMultiModelError(MULTIMODEL_REASONS[code]?.[isKo ? 1 : 0] ?? code);
+		}
+	}
+
+	/** Download (when remote), decode, measure, then size the timeline from what
+	 *  was actually read. Each run carries a token so a slow first source can
+	 *  never land its numbers after a second one replaced it. */
+	async function ingestFootage(source) {
+		const run = multiModelRunRef.current + 1;
+		multiModelRunRef.current = run;
+		const live = () => multiModelRunRef.current === run;
+		setMultiModelSource(source);
+		setMultiModelFootage(null);
+		setMultiModelError("");
+		setMultiModelStatus("busy");
+		setMultiModelProgress(null);
+		// A take baked from the PREVIOUS clip must not read as this one's
+		// result, so the extraction state resets with the source.
+		setMultiModelTake(null);
+		setMultiModelExtract("idle");
+		setMultiModelExtractProgress(null);
+		setMultiModelExtractError("");
+		try {
+			let blob = source.blob ?? null;
+			let bytes = source.bytes ?? 0;
+			if (!blob) {
+				setMultiModelStage("fetching");
+				const downloaded = await fetchFootageBlob(source.url, {
+					onProgress: ({ ratio }) => {
+						if (live()) setMultiModelProgress(ratio);
+					},
+				});
+				if (!live()) return;
+				blob = downloaded.blob;
+				bytes = downloaded.bytes;
+			}
+			setMultiModelStage("probing");
+			if (multiModelObjectUrlRef.current) URL.revokeObjectURL(multiModelObjectUrlRef.current);
+			const objectUrl = URL.createObjectURL(blob);
+			multiModelObjectUrlRef.current = objectUrl;
+			const probed = await probeFootage(objectUrl, {
+				createVideo: () => document.createElement("video"),
+				// The bridge normalized the clip and DECLARED its rate; a probe
+				// that re-guesses it would overrule a measurement with a guess.
+				knownFps: Number.isFinite(source.fps) ? source.fps : null,
+			});
+			if (!live()) return;
+			const footage = { ...probed, bytes, objectUrl, blob, bridgeId: source.bridgeId ?? null };
+			setMultiModelFootage(footage);
+			setMultiModelStage("ready");
+			setMultiModelStatus("ready");
+			setMultiModelProgress(1);
+			// The timeline is the point: the playhead now spans the footage that
+			// was actually decoded, at the rate that was actually measured.
+			setTlFps(footage.fps);
+			setTlFrameCount(footage.frames);
 			setTlFrame(0);
 			setTlPlaying(false);
-			setToast(isKo ? `모션 로드됨: ${decoded.frames}프레임 @ ${decoded.fps} fps` : `Motion loaded: ${decoded.frames} frames @ ${decoded.fps} fps`);
-		} catch (err) {
-			setMotion(null);
-			setMotionError(err?.message || String(err));
-		} finally {
-			setMotionBusy(false);
+			setToast(isKo
+				? `${source.name} 인제스트됨 — ${footage.frames}프레임 @ ${footage.fps} fps`
+				: `Ingested ${source.name} — ${footage.frames} frames @ ${footage.fps} fps`);
+		} catch (error) {
+			if (!live()) return;
+			const code = error?.message ?? String(error);
+			setMultiModelStage("error");
+			setMultiModelStatus("error");
+			setMultiModelProgress(null);
+			setMultiModelError(MULTIMODEL_REASONS[code]?.[isKo ? 1 : 0] ?? code);
 		}
 	}
 
-	// Hosted-demo seed. A build served as static files has no ARDY sidecar, so
-	// a first-time visitor would otherwise land on a character standing still
+	/** Extract motion from the ingested footage. With the bridge up this goes
+	 *  to the GPU box (SAM-3D-Body: whole-clip temporal context, real 3D body
+	 *  prior — previs-grade). Without it, the browser MediaPipe path below
+	 *  still works offline as the rough-blocking fallback. */
+	async function extractMultiModelMotion() {
+		if (bridge?.ok) return extractMultiModelMotionGpu();
+		return extractMultiModelMotionBrowser();
+	}
+
+	async function extractMultiModelMotionGpu() {
+		const footage = multiModelFootage;
+		if (!footage || multiModelExtract === "running") return;
+		const run = multiModelRunRef.current;
+		const live = () => multiModelRunRef.current === run;
+		setMultiModelExtract("running");
+		setMultiModelExtractProgress(null);
+		setMultiModelExtractError("");
+		setMultiModelTake(null);
+		try {
+			const done = await requestBridgeExtract(
+				footage.bridgeId ? { footage: footage.bridgeId } : footage.blob,
+				{
+					onProgress: ({ ratio }) => {
+						if (live()) setMultiModelExtractProgress(Number.isFinite(ratio) ? ratio : null);
+					},
+				}
+			);
+			if (!live()) return;
+			// One take per tracked performer. An older bridge sends a single
+			// motionUrl and no list; that is the same thing with one entry.
+			const takes = Array.isArray(done.takes) && done.takes.length
+				? done.takes
+				: [{ motionUrl: done.motionUrl, personScale: done.personScale, offsetX: 0, offsetZ: 0 }];
+			const label = multiModelSource?.name ?? "extracted take";
+			// The cast can change while the GPU works, so the destination is read
+			// now, once, and every take is placed against THIS character.
+			const active = charactersRef.current.find((entry) => entry.id === activeChar.id) ?? activeChar;
+			// Take 0 arrives as an ordinary motion npz; loadMotion decodes,
+			// retimes to the 24 fps timeline, snapshots the rig baseline and
+			// applies the stature stored in the take itself — the body matches
+			// the FILMED person because the file carries the measurement, not
+			// because this handler remembered to re-apply it afterwards.
+			let personScale = await loadMotion(takes[0].motionUrl ?? done.motionUrl, label, active.rot);
+			if (!live()) return;
+			// loadMotion reports the stature it applied — 1 for a take that
+			// stores none, nothing at all if the load failed. A failed load is
+			// not a finished extraction: say so with the named reason instead
+			// of a receipt for a take nobody can play.
+			if (!Number.isFinite(personScale)) throw new Error("extract-convert-failed");
+			// Only a take that stores NO stature gets the fallback for an npz
+			// that predates person_scale (or an older bridge): the response
+			// still carries the estimate, clamped the same way, because a bad
+			// leg estimate must never produce a giant or a gnome.
+			const declared = Number.isFinite(takes[0].personScale) ? takes[0].personScale : done.personScale;
+			if (personScale === 1 && Number.isFinite(declared)) {
+				personScale = characterScaleFor(null, declared);
+			}
+			// The clip itself is session-only; this reference is what a save
+			// keeps and restoreMotionRefs re-fetches on the next session.
+			const leadRef = {
+				url: takes[0].motionUrl ?? done.motionUrl,
+				prompt: label,
+				rotationDeg: active.rot,
+				anchorX: active.x,
+				anchorZ: active.z,
+			};
+			setCharacters((list) => list.map((entry) => entry.id === active.id
+				? { ...entry, scale: personScale, motionRef: leadRef }
+				: entry));
+			const placed = await deliverExtraTakes(takes.slice(1), active, label);
+			if (!live()) return;
+			const persons = 1 + placed;
+			setMultiModelTake({ frames: done.frames, fps: done.fps, gpu: true, personScale, persons });
+			setMultiModelExtract("done");
+			setToast(isKo
+				? `GPU 모션 추출됨 — ${done.frames}프레임 @ ${done.fps} fps${persons > 1 ? ` · ${persons}명` : ""} · 인물 스케일 ×${personScale.toFixed(2)}`
+				: `GPU motion extracted — ${done.frames} frames @ ${done.fps} fps${persons > 1 ? ` · ${persons} performers` : ""} · person scale ×${personScale.toFixed(2)}`);
+		} catch (error) {
+			if (!live()) return;
+			const code = error?.message ?? String(error);
+			setMultiModelExtract("error");
+			setMultiModelExtractError(MULTIMODEL_REASONS[code]?.[isKo ? 1 : 0] ?? code);
+		}
+	}
+
+	/** Land takes 1..N-1 on the rest of the cast. Each extra take is its OWN
+	 *  layer: it goes to that entry's sessionMotion, NOT through the editing
+	 *  buffer, which holds the active character's clip alone. Returns how many
+	 *  performers actually landed. */
+	async function deliverExtraTakes(extras, active, label) {
+		const decoded = await Promise.all(extras.map(async (take, index) => {
+			if (typeof take?.motionUrl !== "string" || !take.motionUrl) return null;
+			try {
+				// Inbound boundary, exactly like every other clip: decode, then
+				// retime onto the production clock before anything counts frames.
+				const clip = retimeMotion(await loadMotionFromUrl(take.motionUrl), TIMELINE_FPS);
+				const anchor = takeAnchor(active, take.offsetX, take.offsetZ);
+				return {
+					url: take.motionUrl,
+					prompt: `${label} · ${index + 2}`,
+					rotationDeg: active.rot,
+					anchor,
+					// A second performer is a DIFFERENT body: their take carries
+					// their own stature, and the response estimate is only the
+					// fallback for an npz that stores none.
+					scale: characterScaleFor(clip, take.personScale),
+					clip,
+				};
+			} catch {
+				return null; // one unreadable take never voids the others
+			}
+		}));
+		const usable = decoded.filter(Boolean);
+		if (!usable.length) return 0;
+		recordCharacterUndo();
+		// Plan against the cast as it stands, so ids are decided once and the
+		// full-take map can be seeded with them.
+		const list = charactersRef.current;
+		const taken = new Set([active.id]);
+		let idPool = list;
+		const assignments = usable.map((take) => {
+			// Reuse a visible cast member with no clip of its own before adding
+			// another body to the set.
+			const reuse = list.find((entry) => !entry.hidden && !taken.has(entry.id) && !entry.sessionMotion && !entry.motionRef);
+			const id = reuse ? reuse.id : nextCharacterId(idPool);
+			if (!reuse) idPool = [...idPool, { id }];
+			taken.add(id);
+			return {
+				id,
+				spawn: !reuse,
+				patch: {
+					hidden: false,
+					x: take.anchor.x,
+					z: take.anchor.z,
+					rot: take.rotationDeg,
+					scale: take.scale,
+					motionRef: {
+						url: take.url,
+						prompt: take.prompt,
+						rotationDeg: take.rotationDeg,
+						anchorX: take.anchor.x,
+						anchorZ: take.anchor.z,
+					},
+					sessionMotion: {
+						...take.clip,
+						url: take.url,
+						prompt: take.prompt,
+						anchorX: take.anchor.x,
+						anchorZ: take.anchor.z,
+						anchorFrame: 0,
+						rotationDeg: take.rotationDeg,
+					},
+				},
+			};
+		});
+		setCharacters((current) => {
+			let next = current;
+			for (const { id, spawn, patch } of assignments) {
+				next = spawn && !next.some((entry) => entry.id === id)
+					? [...next, { ...createCharacterEntry({ id, model: active.model, pose: DEFAULT_POSE, subject: "a person" }, next.length), ...patch }]
+					: next.map((entry) => (entry.id === id ? { ...entry, ...patch } : entry));
+			}
+			return next;
+		});
+		// Their takes are trimmable the moment they become the active layer.
+		for (const { id, patch } of assignments) motionFullRef.current.set(id, patch.sessionMotion);
+		return assignments.length;
+	}
+
+	async function extractMultiModelMotionBrowser() {
+		const footage = multiModelFootage;
+		if (!footage || multiModelExtract === "running") return;
+		const run = multiModelRunRef.current;
+		const live = () => multiModelRunRef.current === run;
+		setMultiModelExtract("running");
+		setMultiModelExtractProgress(null); // indeterminate while the engine spins up
+		setMultiModelExtractError("");
+		setMultiModelTake(null);
+		try {
+			if (!multiModelRestRef.current) {
+				const response = await fetch("/ardy/cskel27-rest.json").catch(() => null);
+				if (!response?.ok) throw new Error("rest-unavailable");
+				multiModelRestRef.current = await response.json().catch(() => {
+					throw new Error("rest-unavailable");
+				});
+			}
+			if (!multiModelDetectorRef.current) {
+				multiModelDetectorRef.current = await createPoseDetector();
+			}
+			const detector = multiModelDetectorRef.current;
+			const total = sampleTimes(footage.durationS, MULTIMODEL_SAMPLE_FPS).length;
+			const samples = await collectLandmarkTrack({
+				frames: videoFrames(footage.objectUrl, {
+					createVideo: () => document.createElement("video"),
+					sampleFps: MULTIMODEL_SAMPLE_FPS,
+				}),
+				detect: detector.detect,
+				onProgress: ({ processed }) => {
+					if (live()) setMultiModelExtractProgress(total > 0 ? processed / total : null);
+				},
+			});
+			if (!live()) return;
+			if (samples.length === 0) throw new Error("no-person-found");
+			const take = bakeExtractedTake({
+				samples,
+				rest: multiModelRestRef.current,
+				fps: MULTIMODEL_SAMPLE_FPS,
+				durationS: footage.durationS,
+				createdMs: Date.now(),
+			});
+			if (!live()) return;
+			const rig = activeRig;
+			if (!rig) throw new Error("rig-not-loaded");
+			beginPlaybackOn(rig);
+			const loaded = {
+				prompt: multiModelSource?.name ?? sourceLabel(footage.objectUrl),
+				frames: take.frames,
+				fps: take.fps,
+				rotMats: take.rotMats,
+				rootPos: take.rootPos,
+				posedJoints: take.posedJoints,
+				anchorX: activeChar.x,
+				anchorZ: activeChar.z,
+				anchorFrame: 0,
+				rotationDeg: activeChar.rot,
+			};
+			// A baked take is trimmable like any other: without this the strip's
+			// handles would drag against an empty map and cut nothing at all.
+			motionFullRef.current.set(activeChar.id, loaded);
+			// The browser fallback estimates no stature, and its root travel is
+			// in canonical units — so it must not inherit the scale a previous
+			// GPU take left on the character.
+			setCharacters((list) => list.map((entry) => entry.id === activeChar.id
+				? { ...entry, scale: characterScaleFor(take) }
+				: entry));
+			setMotion(loaded);
+			setTlFrameCount(take.frames);
+			setTlFps(take.fps);
+			setTlFrame(0);
+			setTlPlaying(false);
+			setMultiModelTake({ frames: take.frames, fitted: take.fitted, held: take.held, sampled: total, accepted: samples.length });
+			setMultiModelExtract("done");
+			setToast(isKo
+				? `모션 추출됨 — ${take.frames}프레임 테이크 @ ${take.fps} fps (실측 ${take.fitted}, 유지 ${take.held})`
+				: `Motion extracted — a ${take.frames}-frame take @ ${take.fps} fps (${take.fitted} measured, ${take.held} held)`);
+		} catch (error) {
+			if (!live()) return;
+			const code = error?.message ?? String(error);
+			setMultiModelExtract("error");
+			setMultiModelExtractError(MULTIMODEL_REASONS[code]?.[isKo ? 1 : 0] ?? code);
+		}
+	}
+
+	useEffect(() => () => {
+		if (multiModelObjectUrlRef.current) URL.revokeObjectURL(multiModelObjectUrlRef.current);
+	}, []);
+
+	// Decoded motion + the world anchor: frame 0 always starts at Subject 1.
+	// Authored root destinations are generated by ARDY as sparse constraints,
+	// so playback consumes the returned trajectory without coordinate warping.
+	async function loadMotion(url, prompt, rotationDeg = charA.rot) {
+		setMotionBusy(true);
+		setMotionError("");
+		try {
+			// Inbound boundary: an ARDY take (20 fps) or a filmed one (30/60)
+			// becomes a production-clock clip here, once, before anything on
+			// the timeline counts its frames. Same-rate input rides through.
+			const decoded = retimeMotion(await loadMotionFromUrl(url), TIMELINE_FPS);
+			const rig = activeRig;
+			if (!rig) throw new Error(ko("The active character's rig is not loaded", "활성 인물의 리그가 로드되지 않았어요"));
+			beginPlaybackOn(rig);
+			// THE INVARIANT: the take's travel assumes the character is scaled.
+			// Extraction divided the root translation by the filmed person's
+			// stature, so the clip and that stature have to be applied together
+			// or every stride overshoots by the same factor and the feet skate.
+			// The scale rides INSIDE the npz, so this one line covers every path
+			// that loads a motion; an ARDY-generated take stores none and is
+			// canonical, 1.
+			const scale = characterScaleFor(decoded);
+			setCharacters((list) => list.map((entry) => entry.id === activeChar.id ? { ...entry, scale } : entry));
+			const loaded = {
+			// Capture the exact prompt this motion was generated from; the
+			// timeline keeps showing it even if the input field is edited
+			// afterwards.
+			prompt: typeof prompt === "string" ? prompt : "",
+				...decoded,
+				url,
+				anchorX: activeChar.x,
+				anchorZ: activeChar.z,
+				anchorFrame: 0,
+				rotationDeg,
+			};
+			// The take as loaded is what every future trim cuts from.
+			motionFullRef.current.set(activeChar.id, loaded);
+			setMotion(loaded);
+			setTlFrameCount(decoded.frames);
+			setTlFps(decoded.fps);
+			setTlFrame(0);
+			setTlPlaying(false);
+			// IK keys correct SPECIFIC frames of the take they were authored on, so
+			// a replacement take leaves them pointing at poses that no longer exist
+			// — the same reason a trim clears them. The Full-Body lane would
+			// otherwise keep showing corrections that belong to a discarded clip.
+			const hadIkKeys = ikStateRef.current.keys.size > 0;
+			if (hadIkKeys) {
+				ikStateRef.current.keys.clear();
+				ikStateRef.current.tracked.clear();
+				ikStateRef.current.plants.clear();
+				setIkTick((value) => value + 1);
+			}
+			setCommittedIkEdits([]);
+			setToast(
+				isKo
+					? `모션 로드됨: ${decoded.frames}프레임 @ ${decoded.fps} fps${hadIkKeys ? " — 이전 테이크의 IK 키는 초기화됐어요" : ""}`
+					: `Motion loaded: ${decoded.frames} frames @ ${decoded.fps} fps${hadIkKeys ? " — IK keys from the previous take were cleared" : ""}`,
+			);
+			// The applied stature, so a caller does not have to re-derive it
+			// (and cannot derive a different one).
+			return scale;
+		} catch (err) {
+			setMotion(null);
+			setMotionError(err?.message || String(err));
+		} finally {
+			setMotionBusy(false);
+		}
+	}
+
+	// Hosted-demo seed. A build served as static files has no ARDY sidecar, so
+	// a first-time visitor would otherwise land on a character standing still
 	// with no way to see generated motion. The clip below ships with the build
 	// and is loaded once, only when the bridge is absent and nothing has been
 	// loaded or generated yet. A local session with the bridge running is
 	// untouched.
+	const motionRefsRestored = useRef(false);
+	useEffect(() => {
+		if (motionRefsRestored.current) return;
+		motionRefsRestored.current = true;
+		restoreMotionRefs(startupStage.characters);
+		// Parse the thumbnail rigs during startup idle so the first pose-studio
+		// open starts rendering immediately instead of paying a 100ms+ FBX parse.
+		warmPoseThumbnails();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	const demoSeeded = useRef(false);
 	useEffect(() => {
 		if (demoSeeded.current) return;
 		if (!bridge || bridge.ok) return;
-		if (!rigA || motion || motionBusy) return;
+		if (!activeRig || motion || motionBusy) return;
 		demoSeeded.current = true;
 		// Loaded, not played: the clip walks the subject out of the default
 		// framing, so autoplay would greet a first-time visitor with an empty
@@ -2299,39 +3996,108 @@ globalThis.playMode = centerTab === "play";
 		loadMotion(DEMO_MOTION_URL, DEMO_MOTION_PROMPT).catch(() => {
 			/* the seed is a nicety, never a failure the visitor must act on */
 		});
-	}, [bridge, rigA, motion, motionBusy]);
+	}, [bridge, activeRig, motion, motionBusy]);
 
 	function clearMotion() {
 		setMotion(null);
 		setMotionError("");
-		// Back to the pre-generation timeline: the current duration at 20 fps.
+		motionFullRef.current.delete(activeChar.id);
+		// Corrections belong to the take. With the take gone they would sit on the
+		// Full-Body lane describing frames of nothing.
+		if (ikStateRef.current.keys.size > 0) {
+			ikStateRef.current.keys.clear();
+			ikStateRef.current.tracked.clear();
+			ikStateRef.current.plants.clear();
+			setIkTick((value) => value + 1);
+		}
+		setCommittedIkEdits([]);
+		// A cleared clip leaves the body canonical: the stature belonged to the
+		// take, not to the character.
+		setCharacters((list) => list.map((entry) => entry.id === activeChar.id ? { ...entry, scale: 1 } : entry));
+		// Back to the pre-generation timeline: the current duration on the production clock.
 		setTlFrameCount(maxDst + 1);
-		setTlFps(20);
+		setTlFps(TIMELINE_FPS);
 		setTlFrame((f) => Math.min(f, maxDst));
 		setTlPlaying(false);
 	}
 
-	// Drive Subject 1's rig from the loaded clip whenever the playhead moves.
-	// During playback the pose prop is null so Character's effect never
-	// overwrites the animation on unrelated re-renders.
+	/** Cut the ACTIVE character's take to [start, end] of the CURRENT view.
+	 *  Offsets compose, so a second cut still slices the original take; a cut
+	 *  take drops its bridge url — its frames no longer match the source npz,
+	 *  and IK-edit regeneration must not pretend they do. Per-character layers
+	 *  mean the cut lands on this layer only; nobody else's clip moves. */
+	function applyMotionTrim(start, end) {
+		const full = motionFullRef.current.get(activeChar.id);
+		if (!full || !motion) return;
+		const offset = (motion.trimOffset ?? 0) + start;
+		const last = (motion.trimOffset ?? 0) + end;
+		if (last >= full.frames || offset > last) return;
+		const sliced = sliceMotion(full, offset, last);
+		const isFull = offset === 0 && sliced.frames === full.frames;
+		setMotion({ ...sliced, url: isFull ? full.url : null, trimOffset: offset });
+		setTlFrameCount(sliced.frames);
+		setTlFrame((frame) => Math.min(frame, sliced.frames - 1));
+		setTlPlaying(false);
+		if (ikStateRef.current.keys.size > 0) {
+			// IK keys were authored on the pre-cut frame numbers.
+			ikStateRef.current.keys.clear();
+			ikStateRef.current.tracked.clear();
+			ikStateRef.current.plants.clear();
+			setIkTick((value) => value + 1);
+			setToast(isKo
+				? `테이크 잘라냄 — ${sliced.frames}프레임 (원본 ${offset}–${last}). 기존 프레임의 IK 키는 초기화됐어요`
+				: `Take cut to ${sliced.frames} frames (source ${offset}–${last}); IK keys keyed to the old frames were cleared`);
+		} else {
+			setToast(isKo
+				? `테이크 잘라냄 — ${sliced.frames}프레임 (원본 ${offset}–${last})`
+				: `Take cut to ${sliced.frames} frames (source ${offset}–${last})`);
+		}
+	}
+
+	function resetMotionTrim() {
+		const full = motionFullRef.current.get(activeChar.id);
+		if (!full || !motion || (motion.trimOffset ?? 0) === 0 && motion.frames === full.frames) return;
+		setMotion({ ...full });
+		setTlFrameCount(full.frames);
+		setTlFrame((frame) => Math.min(frame, full.frames - 1));
+		setToast(ko("Full take restored", "테이크 전체 길이 복원"));
+	}
+
+	// Drive every cast member from ITS OWN clip on the shared playhead. The
+	// active character's buffer motion and the stored session motions of the
+	// others all advance together; characters without a clip keep their pose.
 	useEffect(() => {
-		if (!motion || !rigA) return;
-		applyMotionFrame(rigA, motion, tlFrame);
-	}, [motion, rigA, tlFrame]);
+		for (const entry of characters) {
+			const clip = entry.id === activeChar.id ? motion : entry.sessionMotion;
+			const rig = rigs[entry.id];
+			if (clip && rig) applyMotionFrame(rig, clip, tlFrame);
+		}
+	}, [characters, activeChar.id, motion, rigs, tlFrame]);
+
+	// The shared timeline spans the LONGEST clip in the cast — a 300-frame
+	// clip on Subject 2 must not clamp just because Subject 1's is 40.
+	// Expansion only: shrinking stays owned by clearMotion and duration edits.
+	useEffect(() => {
+		const longest = characters.reduce((max, entry) => {
+			const clip = entry.id === activeChar.id ? motion : entry.sessionMotion;
+			return Math.max(max, clip?.frames ?? 0);
+		}, 0);
+		if (longest > 0) setTlFrameCount((count) => Math.max(count, longest));
+	}, [characters, activeChar.id, motion]);
 
 	/* ------------------------------ IK logic ------------------------------ */
 
-	// Resolve the IK rig (chains + FK swing joints) whenever Subject 1's rig
-	// (re)loads. A rig missing any bone resolves to null and IK mode stays
-	// unavailable.
+	// Resolve the IK rig (chains + FK swing joints) whenever the ACTIVE
+	// character's rig (re)loads. A rig missing any bone resolves to null and
+	// IK mode stays unavailable.
 	useEffect(() => {
-		const resolved = resolveIkRig(rigA);
+		const resolved = resolveIkRig(activeRig);
 		const chains = resolved ? resolved.chains : null;
 		setIkChains(chains);
 		setIkFkJoints(resolved ? resolved.fkJoints : null);
 		ikStateRef.current.chains = chains;
-		if (!chains) setIkMode(false);
-	}, [rigA]);
+		if (!chains) leaveIkMode();
+	}, [activeRig]);
 
 	function toggleIkMode() {
 		const next = !ikMode;
@@ -2372,7 +4138,7 @@ globalThis.playMode = centerTab === "play";
 		// current frame's keyed rotations the moment ikMode flips, so nothing
 		// the user authored is lost by toggling. Untracked/unkeyed parts keep
 		// their current (FK) pose.
-		setIkMode(false);
+		leaveIkMode();
 		setToast(ko("IK mode off — keyed poses keep playing", "IK 모드 꺼짐 — 키로 찍은 포즈는 계속 재생됩니다"));
 	}
 
@@ -2475,10 +4241,10 @@ globalThis.playMode = centerTab === "play";
 	// nothing to apply — pure FK posing / pure motion playback stays
 	// untouched.
 	useEffect(() => {
-		if (!ikChains || !rigA || posing) return;
+		if (!ikChains || !activeRig || posing) return;
 		if (!ikMode && ikStateRef.current.keys.size === 0) return;
 		ikEvaluate(ikChains, ikStateRef.current, tlFrame, ikFkJoints, motion ? IK_CORRECTION_BLEND_FRAMES : 0);
-	}, [ikMode, ikChains, rigA, motion, posing, tlFrame, ikTick, ikFkJoints]);
+	}, [ikMode, ikChains, activeRig, motion, posing, tlFrame, ikTick, ikFkJoints]);
 
 	// Re-seat the handles on the keyed pose when the FRAME changes with IK
 	// on — scrubbing to frame 39 shows that frame's interpolated pose AND
@@ -2490,16 +4256,16 @@ globalThis.playMode = centerTab === "play";
 	useEffect(() => {
 		const frameChanged = ikPrevFrameRef.current !== tlFrame;
 		ikPrevFrameRef.current = tlFrame;
-		if (!ikMode || !ikChains || !rigA || posing) return;
+		if (!ikMode || !ikChains || !activeRig || posing) return;
 		if (!frameChanged) return; // pure toggle-on: evaluate already ran
 		ikSeedTargets(ikChains, ikStateRef.current);
-	}, [ikMode, ikChains, rigA, motion, posing, tlFrame, ikTick, ikFkJoints]);
+	}, [ikMode, ikChains, activeRig, motion, posing, tlFrame, ikTick, ikFkJoints]);
 
 	// QA hook: lets headless visual checks read the live rig/motion state
 	// (tools/ardy/visual-qa.mjs). Harmless in normal use.
 	useEffect(() => {
 	window.__cozyclay = {
-			rigA, motion, tlFrame, ikMode, ikChains, ikFocus, ik: ikStateRef.current,
+			rigA: activeRig, motion, tlFrame, ikMode, ikChains, ikFocus, ik: ikStateRef.current,
 			committedIkEdits, waypoints,
 			// the camera the main view renders through (poser in IK mode) — QA
 			// projections must use this one, not the frozen shot camera
@@ -2510,7 +4276,7 @@ globalThis.playMode = centerTab === "play";
 			charA,
 			insetPane: insetPaneRef.current,
 		};
-	}, [rigA, motion, tlFrame, ikMode, ikChains, ikFocus, ikTick, charA, committedIkEdits, waypoints]);
+	}, [activeRig, motion, tlFrame, ikMode, ikChains, ikFocus, ikTick, charA, committedIkEdits, waypoints]);
 	// QA hook (plan §6.5): exposes history depth and the present === objects
 	// invariant so the browser suite can assert undo entry counts directly.
 	// Reads live store state at call time; re-registered after every render.
@@ -2599,7 +4365,8 @@ globalThis.playMode = centerTab === "play";
 	const followCamActive =
 		activeCamera.mode !== "keys" && !!followTrack?.[tlFrame] && (centerTab === "play" || (!ikMode && !waypointMode && !posing));
 
-	// Implied locomotion speed per authored segment (@ 20 fps). Shown in the
+	// Implied locomotion speed per authored segment, on the timeline clock
+	// (m/s is physical, so the judge always uses tlFps). Shown in the
 	// timeline hint so a path that forces a crawl or a sprint is visible
 	// before spending a generation on it.
 	const pathSpeed = useMemo(() => {
@@ -2618,7 +4385,7 @@ globalThis.playMode = centerTab === "play";
 		}
 		if (!Number.isFinite(min)) return null;
 		return { min, max, warn: min < 0.5 || max > 3 };
-	}, [charA.x, charA.z, tlFps, waypoints]);
+	}, [activeChar.x, activeChar.z, tlFps, waypoints]);
 
 	const stateBadge = ardyRunning
 		? { label: ko("GENERATING", "생성 중"), kind: "generating" }
@@ -2628,10 +4395,13 @@ globalThis.playMode = centerTab === "play";
 				? { label: ko("ROOT PATH", "루트 경로"), kind: "root" }
 				: null;
 
-	function openStudio(which) {
-		setPosing(which);
+	function openStudio(charId) {
+		setPosing(charId);
 		setPosingClosing(false);
-		setStudioPick((which === "B" ? poseB : poseA)?.id ?? null);
+		const entry = characters.find((item) => item.id === charId);
+		setStudioPick((entry?.pose ?? DEFAULT_POSE)?.id ?? null);
+		// The panel docks under the Inspector — make sure that tab is showing.
+		setSidebarTab("inspector");
 	}
 
 	function closeStudio() {
@@ -2674,21 +4444,24 @@ globalThis.playMode = centerTab === "play";
 		const p = PRESETS[key];
 		setPreset(key);
 		setFovDeg(p.fov);
-		setShowB(p.two);
-		if (p.charB) setCharB(p.charB);
+		// Camera presets no longer touch the cast: with a free-form cast the
+		// old two:false semantics would hide every extra character.
 		setNonce((n) => n + 1);
 	}
 
 	function bufferToPng(buffer) {
 		const canvas = document.createElement("canvas");
-		canvas.width = CAPTURE_W;
-		canvas.height = CAPTURE_H;
+		canvas.width = shotOutput.width;
+		canvas.height = shotOutput.height;
 		const ctx = canvas.getContext("2d");
-		const image = ctx.createImageData(CAPTURE_W, CAPTURE_H);
+		const image = ctx.createImageData(shotOutput.width, shotOutput.height);
 		// WebGL reads bottom-up; flip into canvas order.
-		for (let row = 0; row < CAPTURE_H; row += 1) {
-			const from = (CAPTURE_H - 1 - row) * CAPTURE_W * 4;
-			image.data.set(buffer.subarray(from, from + CAPTURE_W * 4), row * CAPTURE_W * 4);
+		for (let row = 0; row < shotOutput.height; row += 1) {
+			const from = (shotOutput.height - 1 - row) * shotOutput.width * 4;
+			image.data.set(
+				buffer.subarray(from, from + shotOutput.width * 4),
+				row * shotOutput.width * 4
+			);
 		}
 		ctx.putImageData(image, 0, 0);
 		return canvas.toDataURL("image/png");
@@ -2805,7 +4578,7 @@ globalThis.playMode = centerTab === "play";
 				railFollow: activeCamera.railFollow,
 				keys: cameraKeys,
 			} : null,
-			subjects: [subject, ...(showB ? [subject2] : [])],
+			subjects: characters.filter((entry) => !entry.hidden).map((entry) => entry.subject ?? "a person"),
 		};
 		setResult(nextResult);
 		setResultOpen(true);
@@ -2854,7 +4627,8 @@ globalThis.playMode = centerTab === "play";
 			look,
 			fovDeg,
 			slate: slateLine(shot),
-			rigName: posing === "B" ? "y-bot-tpose" : "x-bot-tpose",
+			// rigName follows the posed character's actual model below
+			rigName: posingChar?.model ?? charA.model,
 			root: captureArdyRoot(rig),
 		});
 		const blob = new Blob([JSON.stringify(pose, null, 2)], { type: "application/json" });
@@ -2888,7 +4662,7 @@ globalThis.playMode = centerTab === "play";
 		setPromptClips((prev) => [...prev, clip]);
 		setSelectedPromptId(clip.id);
 		setTlFrameCount((count) => Math.max(count, clip.endFrame));
-		setArdyDuration(Math.max(ARDY_DURATION_MIN, clip.endFrame / 20));
+		setArdyDuration(Math.max(ARDY_DURATION_MIN, clip.endFrame / TIMELINE_FPS));
 	}
 
 	function changePromptClip(id, text) {
@@ -2896,18 +4670,23 @@ globalThis.playMode = centerTab === "play";
 		if (id === selectedPromptId) setArdyPrompt(text);
 	}
 
-	function resizePromptClip(id, edge, rawFrame) {
+	// Quality policy: one prompt block never spans more than 4 s. ARDY's
+// trained window is 10 s, but long single blocks drift — chained 4 s
+// blocks keep each call inside the model's sweet spot.
+const PROMPT_BLOCK_MAX_FRAMES = 4 * TIMELINE_FPS;
+
+function resizePromptClip(id, edge, rawFrame) {
 		setPromptClips((prev) => {
 			const next = prev.map((clip) => {
 				if (clip.id !== id) return clip;
 				const snapped = Math.max(0, Math.round(rawFrame / ARDY_PROMPT_HORIZON_FRAMES) * ARDY_PROMPT_HORIZON_FRAMES);
 				return edge === "start"
-					? { ...clip, startFrame: Math.min(snapped, clip.endFrame - ARDY_PROMPT_HORIZON_FRAMES) }
-					: { ...clip, endFrame: Math.max(clip.startFrame + ARDY_PROMPT_HORIZON_FRAMES, snapped) };
+					? { ...clip, startFrame: Math.min(Math.max(snapped, clip.endFrame - PROMPT_BLOCK_MAX_FRAMES), clip.endFrame - ARDY_PROMPT_HORIZON_FRAMES) }
+					: { ...clip, endFrame: Math.min(Math.max(clip.startFrame + ARDY_PROMPT_HORIZON_FRAMES, snapped), clip.startFrame + PROMPT_BLOCK_MAX_FRAMES) };
 			});
 			const end = next.reduce((max, clip) => Math.max(max, clip.endFrame), ARDY_PROMPT_HORIZON_FRAMES);
 			setTlFrameCount((count) => Math.max(count, end));
-			setArdyDuration(end / 20);
+			setArdyDuration(end / TIMELINE_FPS);
 			return next;
 		});
 	}
@@ -2918,7 +4697,7 @@ globalThis.playMode = centerTab === "play";
 			if (next === prev) return prev;
 			const end = next.reduce((max, clip) => Math.max(max, clip.endFrame), ARDY_PROMPT_HORIZON_FRAMES);
 			setTlFrameCount((count) => Math.max(count, end));
-			setArdyDuration(end / 20);
+			setArdyDuration(end / TIMELINE_FPS);
 			return next;
 		});
 	}
@@ -2928,24 +4707,6 @@ globalThis.playMode = centerTab === "play";
 		if (selectedPromptId === id) setSelectedPromptId(null);
 	}
 
-	function changeDuration(value) {
-	const duration = Math.max(ARDY_DURATION_MIN, Math.min(Math.round(Number(value)) || ARDY_DURATION_MIN, ARDY_DURATION_MAX));
-		setArdyDuration(duration);
-		// Keep a stale destination frame in range when duration shrinks.
-		// The generation clip is duration × 20 frames; root waypoints beyond
-		// its end would be invalid for a new shorter generation, so prune
-		// them even while a motion is loaded (the frame-0 start survives).
-		const last = Math.max(0, duration * 20 - 1);
-		setWaypoints((prev) => prev.filter((w) => w.frame <= last));
-		// Without a loaded motion the timeline IS the generation clip: resize
-		// it to duration × 20 and clamp the playhead. While a motion is loaded
-		// the timeline keeps the clip's own frame count and playhead until clear.
-		if (!motion) {
-			setTlFrameCount(last + 1);
-			setTlFrame((f) => Math.min(f, last));
-		}
-	}
-
 	// Optional native-ARDY seed. Empty = request omits seed; the raw string
 	// is kept as typed (trimmed only). runArdy validates the bridge contract
 	// (integer in 0..2**31-1) right before the request and toasts on a
@@ -2963,7 +4724,7 @@ globalThis.playMode = centerTab === "play";
 			return;
 		}
 		const totalFrames = Math.max(...clips.map((clip) => clip.endFrame));
-		const duration = Math.max(ARDY_DURATION_MIN, Math.ceil(totalFrames / 20));
+		const duration = Math.max(ARDY_DURATION_MIN, Math.ceil(totalFrames / TIMELINE_FPS));
 		setArdyPrompt(clips[0].text);
 		setArdyDuration(duration);
 		runArdy({
@@ -2978,7 +4739,10 @@ globalThis.playMode = centerTab === "play";
 		durationOverride = ardyDuration,
 		promptClipsOverride = [],
 	} = {}) {
-		const rig = posedRig();
+		// Motion generation targets the ACTIVE character's layer; the pose
+		// studio only lends its rig when it is actually open.
+		const rig = posing ? posedRig() : activeRig;
+		const rigModel = posing ? (posingChar?.model ?? activeChar.model) : activeChar.model;
 		if (!rig) {
 			setToast(ko("Character not loaded yet", "캐릭터가 아직 로드되지 않았어요"));
 			return;
@@ -3015,7 +4779,11 @@ globalThis.playMode = centerTab === "play";
 		// prompt so the bridge always receives one contiguous 0..N sequence.
 		// Built BEFORE the root-path judge: whether the rollout is chained
 		// changes which window limit binds the path (per block, not per clip).
-		const clipFrames = duration * 20;
+		// `duration` is SECONDS — the one frame-rate-free number in the
+		// request, and the only one the bridge reads directly. Everything the
+		// app counts in frames from here on is on the timeline clock; the
+		// bridge's own count is duration * ARDY_FPS, reached via toArdyFrame.
+		const clipFrames = duration * TIMELINE_FPS;
 		const segments = [];
 		let cursor = 0;
 		const sourcePromptClips = promptClipsOverride
@@ -3033,7 +4801,7 @@ globalThis.playMode = centerTab === "play";
 		if (segments.length === 0) segments.push({ startFrame: 0, endFrame: clipFrames, prompt });
 		const hasPromptSchedule = segments.length > 1;
 		const rootPath = waypointMode
-			? [{ frame: 0, x: charA.x, z: charA.z, heading: null }, ...waypoints]
+			? [{ frame: 0, x: activeChar.x, z: activeChar.z, heading: null }, ...waypoints]
 			: [];
 		if (waypointMode) {
 			if (waypoints.length < 1) {
@@ -3053,17 +4821,19 @@ globalThis.playMode = centerTab === "play";
 			// whole path is re-judged at the door. A prompt schedule chains
 			// the rollout block by block, so the trained window binds each
 			// block instead of the whole clip.
-			const pathVerdict = judgeAuthoredPath(rootPath, 20, clipFrames, { chained: hasPromptSchedule });
+			// Physical plausibility (m/s, deg/s) — judged against the clock the
+			// pins were authored on, which is now the timeline's.
+			const pathVerdict = judgeAuthoredPath(rootPath, TIMELINE_FPS, clipFrames, { chained: hasPromptSchedule });
 			if (pathVerdict.errors.length > 0) {
 				setToast(isKo ? `생성하지 못했어요 — ${pathVerdict.errors[0]}` : `Not generated — ${pathVerdict.errors[0]}`);
 				return;
 			}
 			if (hasPromptSchedule) {
-				const longBlock = segments.find((segment) => segment.endFrame - segment.startFrame > PATH_LIMITS.clipMaxS * 20);
+				const longBlock = segments.find((segment) => segment.endFrame - segment.startFrame > PROMPT_BLOCK_MAX_FRAMES);
 				if (longBlock) {
 					setToast(isKo
-						? `생성하지 못했어요 — 루트 경로가 있을 때 각 프롬프트 블록은 ${PATH_LIMITS.clipMaxS}초 이내여야 해요(ARDY 연쇄 호출 학습 범위). ${((longBlock.endFrame - longBlock.startFrame) / 20).toFixed(1)}초 블록을 나눠 주세요`
-						: `Not generated — with a root path every prompt block must stay within ${PATH_LIMITS.clipMaxS} s (ARDY's trained window per chained call); split the ${((longBlock.endFrame - longBlock.startFrame) / 20).toFixed(1)} s block`);
+						? `생성하지 못했어요 — 프롬프트 블록은 ${PROMPT_BLOCK_MAX_FRAMES / TIMELINE_FPS}초 이내여야 해요. ${((longBlock.endFrame - longBlock.startFrame) / TIMELINE_FPS).toFixed(1)}초 블록을 나눠 주세요`
+						: `Not generated — prompt blocks are capped at ${PROMPT_BLOCK_MAX_FRAMES / TIMELINE_FPS} s; split the ${((longBlock.endFrame - longBlock.startFrame) / TIMELINE_FPS).toFixed(1)} s block`);
 					return;
 				}
 			}
@@ -3074,19 +4844,43 @@ globalThis.playMode = centerTab === "play";
 		// is +Z (heading 0) and resampled with path-tangent headings — sparse
 		// heading-less pins that fight the forced facing corrupt the whole
 		// track (see the sign-convention notes in ardy/waypoints.js).
-		const alignedRoot = waypointMode ? alignArdyPath(rootPath, charA.rot, MAX_WAYPOINTS) : null;
-		const ardyWaypoints = alignedRoot ? alignedRoot.waypoints : [];
+		// The 4 s block policy binds the schedule path too, not just
+		// root-constrained runs: chained blocks are the whole point of the cap.
+		if (!waypointMode && hasPromptSchedule) {
+			const longBlock = segments.find((segment) => segment.endFrame - segment.startFrame > PROMPT_BLOCK_MAX_FRAMES);
+			if (longBlock) {
+				setToast(isKo
+					? `생성하지 못했어요 — 프롬프트 블록은 ${PROMPT_BLOCK_MAX_FRAMES / TIMELINE_FPS}초 이내여야 해요. ${((longBlock.endFrame - longBlock.startFrame) / TIMELINE_FPS).toFixed(1)}초 블록을 나눠 주세요`
+					: `Not generated — prompt blocks are capped at ${PROMPT_BLOCK_MAX_FRAMES / TIMELINE_FPS} s; split the ${((longBlock.endFrame - longBlock.startFrame) / TIMELINE_FPS).toFixed(1)} s block`);
+				return;
+			}
+		}
+		const alignedRoot = waypointMode ? alignArdyPath(rootPath, activeChar.rot, MAX_WAYPOINTS) : null;
+		// Waypoints leave the app here, so their frames drop onto the bridge
+		// clock here. Rounding can merge two near-adjacent samples; the first
+		// wins — the bridge refuses non-ascending frame lists outright.
+		const ardyWaypoints = toArdyFrameEntries(alignedRoot ? alignedRoot.waypoints : []);
 
 		// Capture every block boundary plus every authored IK key. Each sample
 		// is the composite base-motion + IK pose at that frame and carries the
 		// live ARDY root recovered from positional skinning.
-		const editedSegments = motion && hasPromptSchedule
+		// A block "edit" is a LOCAL correction of the loaded take, addressed to
+		// that take's source npz. Without a bridge source there is nothing to edit
+		// against, so such keys must not divert a fresh generation into the edit
+		// path — that path sends no segments, and the whole schedule would collapse
+		// to the first block's prompt.
+		const editedSegments = motion?.url && hasPromptSchedule
 			? segments.filter((segment) =>
 				ikFrames.some((frame) => frame >= segment.startFrame && frame < segment.endFrame)
 			)
 			: [];
 		const hasBlockEdits = editedSegments.length > 0;
-		const shouldPin = hasBlockEdits || (!hasPromptSchedule && Boolean(motion || ikFrames.length > 0));
+		// Pin ONLY for authored IK edits. A loaded motion by itself must NOT
+		// pin: pose-pinned calls run the box's pose mode, which builds on a
+		// fixed implicit reference base — the new prompt then dresses up the
+		// canned root path instead of driving its own motion ("I changed the
+		// prompt but got the same walk").
+		const shouldPin = hasBlockEdits || (!hasPromptSchedule && ikFrames.length > 0);
 		const constraintFrames = !shouldPin
 			? []
 			: waypointMode
@@ -3118,7 +4912,7 @@ globalThis.playMode = centerTab === "play";
 					look,
 					fovDeg,
 					slate: slateLine(shot),
-					rigName: posing === "B" ? "y-bot-tpose" : "x-bot-tpose",
+					rigName: rigModel,
 					root: captureArdyRoot(rig),
 				}),
 			};
@@ -3132,95 +4926,243 @@ globalThis.playMode = centerTab === "play";
 		// always the origin; scene placement and the total scene->clip rotation
 		// (actor yaw plus the path-alignment fold) are restored only at
 		// playback, without constraining any later generated root frame.
-		const rootRotationDeg = alignedRoot ? alignedRoot.rotationDeg : charA.rot;
+		const rootRotationDeg = alignedRoot ? alignedRoot.rotationDeg : activeChar.rot;
+		const body = { prompt, duration, posePin: shouldPin };
+		// The bridge sees only wire frames; the timeline frames of the same
+		// keys are kept beside the payload so the commit can mark the markers
+		// the user actually authored.
+		let committedEditKeys = [];
+		if (shouldPin && !hasBlockEdits) body.poses = toArdyFrameEntries(poses);
+		if (ardySeed !== "") body.seed = Number(ardySeed);
+		if (waypointMode) {
+			body.waypoints = ardyWaypoints;
+			// A root path and a prompt schedule now travel TOGETHER: the
+			// sequence generator threads the Root2D constraint set through
+			// its chained calls (the interactive demo's pattern), so
+			// neither authored surface is silently dropped any more.
+			if (hasPromptSchedule && !hasBlockEdits) body.segments = toArdySegments(segments);
+			// Looser pin grip than ARDY's 0.04 default: authored paths are
+			// sparse and human-laid, so the postprocess gets 8 cm of room to
+			// trade pin exactness for less foot skate.
+			body.rootMargin = 0.08;
+			// A path asks the model to CHANGE course at authored frames, so a
+			// shorter 4 s history reacts faster to the pins than the default
+			// full-window lookback (which favors continuing whatever came before).
+			// A bridge-side frame count, so it is 4 s counted on the WIRE clock.
+			body.historyFrames = 4 * ARDY_FPS;
+		} else if (hasBlockEdits) {
+			if (!motion?.url) {
+				setToast(ko("The current motion has no bridge source; generate the prompt blocks once before regenerating IK edits", "현재 모션에 브리지 원본이 없어요. 프롬프트 블록을 한 번 생성한 뒤 IK 보정을 다시 생성하세요"));
+				return;
+			}
+			const startFrame = Math.min(...editedSegments.map((segment) => segment.startFrame));
+			const endFrame = Math.max(...editedSegments.map((segment) => segment.endFrame));
+			const posesByFrame = new Map(poses.map((entry) => [entry.frame, entry.pose]));
+			// Edits address the bridge-side source npz, so their frames drop
+			// onto the bridge clock here; the timeline frame rides along only
+			// for the app-side committed-keys bookkeeping (timeline markers).
+			// contextBefore/contextAfter count frames of that source npz, so
+			// they are already wire-clock numbers and do not convert.
+			const editEntries = [];
+			for (const timelineFrame of constraintFrames) {
+				const frame = toArdyFrame(timelineFrame);
+				if (editEntries.length && frame <= editEntries[editEntries.length - 1].frame) continue;
+				editEntries.push({
+					frame,
+					timelineFrame,
+					tracks: [...(ikStateRef.current.keys.get(timelineFrame)?.keys() || [])],
+					pose: posesByFrame.get(timelineFrame),
+				});
+			}
+			committedEditKeys = editEntries.map(({ timelineFrame, tracks }) => ({ frame: timelineFrame, tracks }));
+			body.motionEdit = {
+				sourceMotion: motion.url,
+				startFrame: toArdyFrame(startFrame),
+				endFrame: toArdyFrame(endFrame),
+				contextBefore: 40,
+				contextAfter: 20,
+				edits: editEntries.map(({ frame, tracks, pose }) => ({ frame, tracks, pose })),
+			};
+		} else if (hasPromptSchedule) body.segments = toArdySegments(segments);
+		// The request is fully packaged HERE, against the active character's
+		// live layer — the queue only needs the frozen payload. Results are
+		// delivered to THIS character even if the selection moves on while
+		// the box is still working.
+		enqueueMotionJob({
+			charId: activeChar.id,
+			charIndex: activeCharIndex,
+			prompt,
+			body,
+			hasBlockEdits,
+			committedEditKeys,
+			rootRotationDeg,
+			anchor: { x: activeChar.x, z: activeChar.z },
+			ikState: hasBlockEdits ? ikStateRef.current : null,
+		});
+	}
+
+	/* ------------------------- motion job queue ---------------------------
+	 * One box, one job at a time: Generate never blocks, it enqueues. The
+	 * payload is frozen at enqueue time; completion delivers the clip to the
+	 * REQUESTING character's layer, not whoever happens to be selected then. */
+	const [genQueue, setGenQueue] = useState([]);
+	const genRunningRef = useRef(false);
+	const genJobSeq = useRef(0);
+	function enqueueMotionJob(spec) {
+		const id = `gen-${++genJobSeq.current}`;
+		setGenQueue((queue) => [...queue, { id, status: "queued", ...spec }]);
+		setToast(isKo ? `인물 ${spec.charIndex + 1} 모션 생성을 대기열에 넣었어요` : `Queued motion generation for Subject ${spec.charIndex + 1}`);
+	}
+	useEffect(() => {
+		if (genRunningRef.current) return;
+		const next = genQueue.find((job) => job.status === "queued");
+		if (!next) return;
+		genRunningRef.current = true;
+		setGenQueue((queue) => queue.map((job) => (job.id === next.id ? { ...job, status: "running" } : job)));
+		(async () => {
+			try {
+				await executeMotionJob(next);
+				setGenQueue((queue) => queue.map((job) => (job.id === next.id ? { ...job, status: "done" } : job)));
+			} catch (err) {
+				const message = err?.name === "AbortError" ? ko("Cancelled", "취소됨") : err?.message || String(err);
+				setGenQueue((queue) => queue.map((job) => (job.id === next.id ? { ...job, status: "error", error: message } : job)));
+			} finally {
+				genRunningRef.current = false;
+			}
+		})();
+	}, [genQueue]);
+
+	async function executeMotionJob(job) {
 		const controller = new AbortController();
 		ardyAbortRef.current = controller;
 		setArdyRunning(true);
 		reportArdyStatus(ko("connecting…", "연결 중…"));
 		setArdyReport(null);
 		setArdyOutcome(null);
+		let editCommitReport = null;
 		try {
-			const body = { prompt, duration, posePin: shouldPin };
-			if (shouldPin && !hasBlockEdits) body.poses = poses;
-			if (ardySeed !== "") body.seed = Number(ardySeed);
-			if (waypointMode) {
-				body.waypoints = ardyWaypoints;
-				// A root path and a prompt schedule now travel TOGETHER: the
-				// sequence generator threads the Root2D constraint set through
-				// its chained calls (the interactive demo's pattern), so
-				// neither authored surface is silently dropped any more.
-				if (hasPromptSchedule && !hasBlockEdits) body.segments = segments;
-			} else if (hasBlockEdits) {
-				if (!motion?.url) {
-					throw new Error(ko("The current motion has no bridge source; generate the prompt blocks once before regenerating IK edits", "현재 모션에 브리지 원본이 없어요. 프롬프트 블록을 한 번 생성한 뒤 IK 보정을 다시 생성하세요"));
-				}
-				const startFrame = Math.min(...editedSegments.map((segment) => segment.startFrame));
-				const endFrame = Math.max(...editedSegments.map((segment) => segment.endFrame));
-				const posesByFrame = new Map(poses.map((entry) => [entry.frame, entry.pose]));
-				body.motionEdit = {
-					sourceMotion: motion.url,
-					startFrame,
-					endFrame,
-					contextBefore: 40,
-					contextAfter: 20,
-					edits: constraintFrames.map((frame) => ({
-						frame,
-						tracks: [...(ikStateRef.current.keys.get(frame)?.keys() || [])],
-						pose: posesByFrame.get(frame),
-					})),
-				};
-			} else if (hasPromptSchedule) body.segments = segments;
-			let editCommitReport = null;
 			const done = await ardyGenerate(
-				body,
+				job.body,
 				(event) => {
 					if (event.event === "status") reportArdyStatus(event.message);
 					else if (event.event === "report") {
 						setArdyReport(event.report);
-						if (hasBlockEdits) editCommitReport = event.report;
+						if (job.hasBlockEdits) editCommitReport = event.report;
 					}
 				},
 				{ signal: controller.signal },
 			);
 			if (
-				hasBlockEdits &&
+				job.hasBlockEdits &&
 				(
 					editCommitReport?.commit_verified !== true ||
-					!body.motionEdit.edits.every((entry) =>
+					!job.body.motionEdit.edits.every((entry) =>
 						editCommitReport.committed_keys?.includes(entry.frame)
 					)
 				)
 			) {
 				throw new Error(ko("ARDY returned motion without verified authored IK keys", "ARDY가 검증된 수동 IK 키 없이 모션을 반환했어요"));
 			}
-			setArdyOutcome({ ok: true, output: done.output, bytes: done.bytes, motionUrl: done.motionUrl, rotationDeg: rootRotationDeg });
+			setArdyOutcome({ ok: true, output: done.output, bytes: done.bytes, motionUrl: done.motionUrl, rotationDeg: job.rootRotationDeg });
 			// Fetch and decode the real npz right away; decode errors are shown
-			// in the card, playback is never faked.
-			if (done.motionUrl) await loadMotion(done.motionUrl, prompt, rootRotationDeg);
-			if (hasBlockEdits) {
-				setCommittedIkEdits((current) => [
-					...current,
-					...body.motionEdit.edits.map(({ frame, tracks }) => ({ frame, tracks })),
-				]);
-				ikStateRef.current.keys.clear();
-				ikStateRef.current.tracked.clear();
-				ikStateRef.current.plants.clear();
+			// in the card, playback is never faked. The clip lands on the
+			// REQUESTING character, not whoever is selected now.
+			if (done.motionUrl) await deliverMotion(job, done.motionUrl);
+			if (job.hasBlockEdits && job.ikState) {
+				// Timeline frames, not the wire frames in body.motionEdit.edits:
+				// these light up the IK markers on the production clock.
+				setCommittedIkEdits((current) => [...current, ...job.committedEditKeys]);
+				job.ikState.keys.clear();
+				job.ikState.tracked.clear();
+				job.ikState.plants.clear();
 				setIkTick((value) => value + 1);
 			}
-			setToast(ko("ARDY motion generated", "ARDY 모션 생성됨"));
+			setToast(isKo ? `인물 ${job.charIndex + 1} ARDY 모션 생성됨` : `ARDY motion generated for Subject ${job.charIndex + 1}`);
 		} catch (err) {
-			// Cancellation surfaces as an AbortError; everything else is the
-			// bridge or the generator explaining itself.
 			setArdyOutcome({
 				ok: false,
 				message: err?.name === "AbortError" ? ko("Cancelled", "취소됨") : err?.message || String(err),
 			});
+			throw err;
 		} finally {
 			setArdyRunning(false);
 			ardyAbortRef.current = null;
 		}
 	}
 
+	/** Hand a finished clip to the layer that asked for it: the buffer when
+	 * the requester is still active, its stored session motion otherwise. A
+	 * lightweight motionRef is persisted with the entry either way, so the
+	 * clip can be re-fetched after a reload. */
+	async function deliverMotion(job, motionUrl) {
+		const motionRef = {
+			url: motionUrl,
+			prompt: job.prompt,
+			rotationDeg: job.rootRotationDeg,
+			anchorX: job.anchor.x,
+			anchorZ: job.anchor.z,
+		};
+		setCharacters((list) => list.map((entry) => entry.id === job.charId ? { ...entry, motionRef } : entry));
+		if (job.charId === loadedLayerCharRef.current) {
+			await loadMotion(motionUrl, job.prompt, job.rootRotationDeg);
+			return;
+		}
+		// Inbound boundary for a clip delivered to a non-active layer.
+		const decoded = retimeMotion(await loadMotionFromUrl(motionUrl), TIMELINE_FPS);
+		const clip = {
+			...decoded,
+			url: motionUrl,
+			prompt: job.prompt,
+			anchorX: job.anchor.x,
+			anchorZ: job.anchor.z,
+			anchorFrame: 0,
+			rotationDeg: job.rootRotationDeg,
+		};
+		// Same stature rule as loadMotion, on the layer that asked for the clip.
+		const scale = characterScaleFor(decoded);
+		motionFullRef.current.set(job.charId, clip);
+		setCharacters((list) => list.map((entry) => entry.id === job.charId
+			? { ...entry, scale, sessionMotion: clip }
+			: entry));
+	}
+
+	/** After a scene (re)load, re-fetch every persisted clip reference and
+	 * rebuild the session motions. The bridge may be gone — failures just
+	 * leave the character posed, never an error the user must act on. */
+	function restoreMotionRefs(list) {
+		for (const entry of list) {
+			if (!entry.motionRef?.url) continue;
+			// Inbound boundary: a re-fetched clip is retimed exactly like a
+			// freshly generated one, so a reload cannot resurrect 20 fps frames.
+			loadMotionFromUrl(entry.motionRef.url).then((raw) => {
+				const decoded = retimeMotion(raw, TIMELINE_FPS);
+				const clip = {
+					...decoded,
+					url: entry.motionRef.url,
+					prompt: entry.motionRef.prompt,
+					anchorX: entry.motionRef.anchorX,
+					anchorZ: entry.motionRef.anchorZ,
+					anchorFrame: 0,
+					rotationDeg: entry.motionRef.rotationDeg,
+				};
+				motionFullRef.current.set(entry.id, clip);
+				setCharacters((current) => current.map((item) => item.id === entry.id
+					// The stature rides inside the npz, so a restored take
+					// re-applies it; the saved entry scale is only the fallback
+					// for a take whose npz never stored one.
+					? { ...item, scale: characterScaleFor(decoded, item.scale ?? 1), sessionMotion: clip }
+					: item));
+				// The buffer character's clip goes straight into the editing
+				// buffer too, so its motion survives the reload seamlessly.
+				if (entry.id === loadedLayerCharRef.current) {
+					setMotion(clip);
+					setTlFrameCount((count) => Math.max(count, decoded.frames));
+					setTlFps(decoded.fps);
+				}
+			}).catch(() => {});
+		}
+	}
+
 	function cancelArdy() {
 		ardyAbortRef.current?.abort();
 	}
@@ -3240,6 +5182,26 @@ globalThis.playMode = centerTab === "play";
 						Cozy <span>Clay</span>
 					</span>
 				</div>
+				<div className="project-menu-wrap">
+					<button
+						type="button"
+						className="project-menu-trigger"
+						aria-expanded={projectMenuOpen}
+						onClick={() => setProjectMenuOpen((open) => !open)}
+					>
+						{projectDirty && <i className="project-dirty-dot" aria-label={ko("Unsaved changes", "저장되지 않은 변경사항")} />}
+						{projectName ?? ko("Untitled Project", "제목 없는 프로젝트")}
+						<span className="caret">▾</span>
+					</button>
+					{projectMenuOpen && (
+						<div className="project-menu" role="menu" onClick={() => setProjectMenuOpen(false)}>
+							<button type="button" role="menuitem" onClick={newProject}>{ko("New Project", "새 프로젝트")}</button>
+							<button type="button" role="menuitem" onClick={() => setProjectBrowserOpen(true)}>{ko("Open Project…", "프로젝트 열기…")}</button>
+							<button type="button" role="menuitem" onClick={() => saveProject(false)}>{ko("Save Project", "프로젝트 저장")}</button>
+							<button type="button" role="menuitem" onClick={() => saveProject(true)}>{ko("Save Project As…", "다른 이름으로 저장…")}</button>
+						</div>
+					)}
+				</div>
 				<div className="topbar-actions">
 					<LocaleToggle />
 				</div>
@@ -3248,9 +5210,18 @@ globalThis.playMode = centerTab === "play";
 			<div className="main" style={workspaceStyle}>
 			<div className="workspace">
 				<aside className="panel hierarchy-left" aria-label={ko("Hierarchy", "계층")}>
+				{/* Project > Scene: the project is the document root, scenes live
+				    inside it — the picker sits at the top of the hierarchy column. */}
+				<div className="hierarchy-project" data-dirty={projectDirty || undefined}>
+					<span className="hierarchy-project-label">{ko("Project", "프로젝트")}</span>
+					<strong>{projectName ?? ko("Untitled", "제목 없음")}</strong>
+					{projectDirty && <i className="project-dirty-dot" aria-label={ko("Unsaved changes", "저장되지 않은 변경사항")} />}
+					<button type="button" onClick={() => setProjectBrowserOpen(true)}>{ko("Projects…", "프로젝트…")}</button>
+				</div>
 				<HierarchyPanel
 					selectedId={selectedHierarchyId}
 					onSelect={selectHierarchy}
+					characters={characters}
 					showB={showB}
 					motionFrames={motion?.frames ?? 0}
 					ikFrames={ikFrames.length}
@@ -3269,6 +5240,7 @@ globalThis.playMode = centerTab === "play";
 					onDuplicateObject={duplicateSelectedSceneObject}
 					onDeleteObject={deleteSceneObject}
 					onFrameObject={frameSelection}
+					propsDrop={propsDrop}
 				/>
 				</aside>
 				<div
@@ -3277,7 +5249,8 @@ globalThis.playMode = centerTab === "play";
 					aria-label={ko("Resize hierarchy panel", "계층 패널 크기 조절")}
 					onPointerDown={(event) => beginWorkspaceResize("hierarchy", event)}
 				/>
-				<div className="viewport">
+				<div className="viewport" data-drop={viewportDrop.over ? "over" : undefined} {...viewportDrop.handlers}>
+				<div className="viewport-titlebar">
 				<div className="pane-tabs" role="tablist" aria-label={ko("Center view", "가운데 보기")}>
 					<button
 						type="button"
@@ -3298,7 +5271,7 @@ globalThis.playMode = centerTab === "play";
 						{ko("PlayView", "재생 보기")}
 					</button>
 				</div>
-				{centerTab === "scene" && (
+				{centerTab === "scene" ? (
 				<div className="editor-toolbar scene-tools" aria-label={ko("Scene tools", "장면 도구")}>
 						<div className="tool-switch" role="group" aria-label={ko("Gizmo tool", "기즈모 도구")}>
 							<button
@@ -3341,8 +5314,87 @@ globalThis.playMode = centerTab === "play";
 						>
 							{ko("Snap", "스냅")}
 						</button>
+						<span className="viewport-toolbar-separator settings-separator" aria-hidden="true" />
+						<label className="viewport-toolbar-field shot-field">
+							<span>{ko("Shot", "샷")}</span>
+							<select
+								aria-label={ko("Shot preset", "샷 프리셋")}
+								value={preset}
+								onChange={(event) => applyPreset(event.target.value)}
+							>
+								{Object.entries(PRESETS).map(([key, value]) => (
+									<option key={key} value={key}>{value.label}</option>
+								))}
+							</select>
+						</label>
+						<label className="viewport-toolbar-field ratio-field">
+							<span>{ko("Ratio", "비율")}</span>
+							<select
+								aria-label={ko("Output aspect ratio", "출력 화면 비율")}
+								value={shotAspectKey}
+								onChange={(event) => setShotAspectKey(event.target.value)}
+							>
+								{Object.values(SHOT_ASPECT_PRESETS).map((value) => (
+									<option key={value.label} value={value.label}>{value.label}</option>
+								))}
+							</select>
+						</label>
+						<label className="viewport-fov-control">
+							<span>FOV</span>
+							<input
+								type="range"
+								min="14"
+								max="90"
+								step="1"
+								value={fovDeg}
+								onChange={(event) => setFovDeg(Number(event.target.value))}
+							/>
+							<output>{Math.round(fovDeg)}°</output>
+							<small>{shot.focalMm}mm</small>
+						</label>
+						<span className="viewport-toolbar-spacer" />
+						<button
+							type="button"
+							title={ko("Recenter on subject", "피사체 다시 맞추기")}
+							aria-label={ko("Recenter on subject", "피사체 다시 맞추기")}
+							onClick={() => setNonce((n) => n + 1)}
+						>
+							◎
+						</button>
+						<button
+							type="button"
+							aria-pressed={!workspaceLayout.insetCollapsed}
+							onClick={() => {
+								if (workspaceLayout.insetCollapsed) expandInset();
+								else setWorkspaceLayout((current) => ({ ...current, insetCollapsed: true }));
+							}}
+						>
+							{ko("Top", "탑")} {workspaceLayout.insetCollapsed ? "▸" : "▾"}
+						</button>
+					</div>
+				) : (
+					<div className="editor-toolbar play-tools" aria-label={ko("PlayView tools", "재생 보기 도구")}>
+						<span className="viewport-readout">{shotOutput.label}</span>
+						<span className="viewport-readout">FOV {Math.round(fovDeg)}° · {shot.focalMm}mm</span>
+						<span className="viewport-toolbar-spacer" />
+						<button type="button" onClick={() => stepFrame(-1)} aria-label={ko("Previous frame", "이전 프레임")}>◀</button>
+						<button type="button" onClick={() => setTlPlaying((value) => !value)}>
+							{tlPlaying ? "Ⅱ" : "▶"}
+						</button>
+						<button type="button" onClick={() => stepFrame(1)} aria-label={ko("Next frame", "다음 프레임")}>▶│</button>
+						<span className="viewport-readout">1.00×</span>
+						<span className="viewport-toolbar-separator" aria-hidden="true" />
+						<button
+							type="button"
+							className={recState === "recording" ? "recording" : ""}
+							disabled={recState !== "recording" && !hasCameraKeys && !motion}
+							onClick={toggleShotRecording}
+						>
+							{recState === "recording" ? ko("■ Stop", "■ 정지") : ko("● Record", "● 녹화")}
+						</button>
 					</div>
 				)}
+				</div>
 
 					<div className="stage" id="stage" ref={stageRef} data-render-loop={renderActive ? "always" : "demand"}>
 						<Canvas frameloop={renderActive ? "always" : "demand"} dpr={[1, 2]} gl={{ preserveDrawingBuffer: true, antialias: true }}>
@@ -3358,6 +5410,14 @@ globalThis.playMode = centerTab === "play";
 								planZoom={workspaceLayout.planZoom}
 							/>
 							<color attach="background" args={["#eef4f3"]} />
+							{/* The open stage runs 500 m; without a falloff the whole deck
+							    reads at once and the horizon sits a kilometre away. Blender's
+							    viewport answer is a clip distance that lets the neutral void
+							    show through; the fog below is the seamless version of the
+							    same idea — it fades the floor INTO the background colour, so
+							    past ~120 m the deck simply ceases to exist with no horizon
+							    line, no clip edge and no tone break. */}
+							<fog attach="fog" args={["#eef4f3", 18, 54]} />
 							<StageLights />
 							<Room />
 							<SetProps objects={sceneObjects} selectedId={selectedSceneObjectId} />
@@ -3390,24 +5450,47 @@ globalThis.playMode = centerTab === "play";
 								rotation={[-Math.PI / 2, 0, 0]}
 							/>
 
-							<Character
-								url={CHARACTER_MODEL_URL}
-								position={motion ? [motion.anchorX, 0, motion.anchorZ] : [charA.x, 0, charA.z]}
-								rot={motion ? motion.rotationDeg : charA.rot}
-								tint={CLAY}
-								pose={motion ? null : poseA}
-								onRig={setRigA}
-								pickId="A"
-							/>
-							{showB && (
+							{characterViews.map((view) => (
 								<Character
-									url={CHARACTER_MODEL_URL}
-									position={[charB.x, 0, charB.z]}
-									rot={charB.rot}
-									tint={CLAY_B}
-									pose={poseB}
-									onRig={setRigB}
-									pickId="B"
+									key={view.id}
+									url={view.url}
+									position={view.position}
+									rot={view.rot}
+									tint={view.tint}
+									pose={view.pose}
+									scale={view.scale}
+									onRig={view.onRig}
+									pickId={view.pickId}
+								/>
+							))}
+
+							{/* Selection marker: XYZ tripod + ring on the picked cast
+							    member; the X/Z arrows drag it across the deck. */}
+							{gizmoView && !playMode && !posing && !ikMode && (
+								<ObjectGizmo
+									pickOnly
+									object={characterGizmoObject}
+									objects={characterGizmoObject ? [characterGizmoObject] : []}
+									mode={gizmoMode}
+									snap={snapEnabled}
+									enabled={!planIsMain && !posing && !ikMode && !playMode && !!characterGizmoObject}
+									paneRef={mainPaneRef}
+									camRef={shotCamRef}
+									shotAspect={shotOutput.aspect}
+									onChange={(id, patch) => moveCharacter(activeChar.id, () => {
+										const next = {};
+										if (patch.x !== undefined) next.x = THREE.MathUtils.clamp(patch.x, -4, 4);
+										if (patch.y !== undefined) next.y = THREE.MathUtils.clamp(patch.y, 0, 4);
+										if (patch.z !== undefined) next.z = THREE.MathUtils.clamp(patch.z, -4, 4);
+										// a body only yaws — the X/Z rings and the screen ring's
+										// other channels have nowhere to go on a character
+										if (patch.rotY !== undefined) next.rot = patch.rotY;
+										// one stature knob: any scale axis reads as uniform
+										const s = patch.scaleX ?? patch.scaleY ?? patch.scaleZ;
+										if (s !== undefined) next.scale = THREE.MathUtils.clamp(s, 0.2, 3);
+										return next;
+									})}
+									onDragStart={recordCharacterUndo}
 								/>
 							)}
 
@@ -3483,7 +5566,7 @@ globalThis.playMode = centerTab === "play";
 								onCameraChange={commitManualCameraFraming}
 							/>
 							<PoseHandles
-								root={posing === "B" ? rigB : rigA}
+								root={posedRig()}
 								enabled={!!posing && !planIsMain && !playMode}
 								onChange={() => setPoseTick((n) => n + 1)}
 							/>
@@ -3503,11 +5586,10 @@ globalThis.playMode = centerTab === "play";
 								shotCamRef={shotCamRef}
 								look={look}
 								fovDeg={fovDeg}
-								charA={charA}
-								setCharA={setCharA}
-								charB={charB}
-								setCharB={setCharB}
-								showB={showB}
+								characters={characters}
+								onMoveCharacter={moveCharacter}
+								onCharacterGestureStart={recordCharacterUndo}
+								pathStart={activeChar}
 								waypoints={waypoints}
 								activeWaypointFrame={activeWaypointFrame}
 								onSelectWaypoint={(frame) => { setActiveWaypointFrame(frame); setTlFrame(Math.min(frame, tlFrameCount - 1)); setWaypointMode(true); }}
@@ -3518,7 +5600,7 @@ globalThis.playMode = centerTab === "play";
 								// issued by onObjectMoveStart cannot leak.
 								onSelectEntity={(id) => {
 									store.settle();
-									setSelectedHierarchyId(id.startsWith("object:") ? id : id === "cam" ? "camera" : id === "b" ? "characterB" : "characterA");
+									setSelectedHierarchyId(id.startsWith("object:") ? id : id === "cam" ? "camera" : charKeyToHierarchyId(id));
 								}}
 								sceneObjects={sceneObjects}
 								selectedSceneObjectId={selectedSceneObjectId}
@@ -3549,12 +5631,13 @@ globalThis.playMode = centerTab === "play";
 								enabled={!planIsMain && !posing && !ikMode && !playMode}
 								paneRef={mainPaneRef}
 								camRef={shotCamRef}
+								shotAspect={shotOutput.aspect}
 								onChange={changeSceneObject}
 								onDragStart={beginSceneTransaction}
 								onDragEnd={endSceneTransaction}
 								onSelect={(id) =>
 									selectHierarchy(
-										id === "char:A" ? "characterA" : id === "char:B" ? "characterB" : id ? `object:${id}` : "props",
+										id?.startsWith("char:") ? charKeyToHierarchyId(id) : id ? `object:${id}` : "props",
 									)
 								}
 								onGroundClick={waypointMode && !planIsMain ? addFloorWaypoint : undefined}
@@ -3566,7 +5649,12 @@ globalThis.playMode = centerTab === "play";
 							{waypointMode && centerTab === "scene" && (
 								<ShotPathPreview waypoints={waypoints} start={charA} activeWaypointFrame={activeWaypointFrame} />
 							)}
-							<CaptureRig apiRef={captureRef} camRef={shotCamRef} />
+							<CaptureRig
+								apiRef={captureRef}
+								camRef={shotCamRef}
+								width={shotOutput.width}
+								height={shotOutput.height}
+							/>
 							<DualRender
 								stageRef={stageRef}
 								mainRef={mainPaneRef}
@@ -3579,6 +5667,7 @@ globalThis.playMode = centerTab === "play";
 								playMode={playMode}
 								insetCollapsed={workspaceLayout.insetCollapsed}
 								planZoom={workspaceLayout.planZoom}
+								shotAspect={shotOutput.aspect}
 							/>
 						</Canvas>
 
@@ -3587,7 +5676,10 @@ globalThis.playMode = centerTab === "play";
 							ref={insetPaneRef}
 							hidden={playMode}
 							className={"vp-pane vp-inset" + (planIsMain || ikMode ? " shot" : " plan") + (workspaceLayout.insetCollapsed ? " collapsed" : "")}
-							style={insetPos ? { left: insetPos.x, top: insetPos.y, right: "auto" } : undefined}
+							style={{
+								"--shot-aspect": shotOutput.aspect,
+								...(insetPos ? { left: insetPos.x, top: insetPos.y, right: "auto" } : {}),
+							}}
 						>
 							<span
 								className="vp-inset-tag"
@@ -3645,37 +5737,6 @@ globalThis.playMode = centerTab === "play";
 							</div>
 						)}
 
-						{posing && (
-							<PoseStudioPanel
-								subject={posing === "B" ? 2 : 1}
-								poses={allPoses}
-								selectedId={studioPick}
-								closing={posingClosing}
-								motionActive={Boolean(motion)}
-								onSelect={setStudioPick}
-								onApply={(selectedPoseId) => {
-									const pose = allPoses.find((p) => p.id === selectedPoseId);
-									if (pose) {
-										const hadMotion = Boolean(motion);
-										if (hadMotion) clearMotion();
-										setPosed(pose);
-										closeStudio();
-										setToast(hadMotion ? ko("Cleared the current motion and applied the pose", "현재 모션을 지우고 포즈를 적용했어요") : ko("Pose applied", "포즈를 적용했어요"));
-									} else {
-										setToast(ko("Couldn't find the selected pose — pick again", "선택한 포즈를 찾지 못했어요. 다시 골라 주세요"));
-									}
-								}}
-								onReset={() => {
-									if (motion) clearMotion();
-									setStudioPick(DEFAULT_POSE.id);
-									setPosed(DEFAULT_POSE);
-									setToast(ko("Back to the default pose", "기본 포즈로 돌아왔어요"));
-								}}
-								onSave={savePose}
-								onDelete={removePose}
-								onClose={closeStudio}
-							/>
-						)}
 						</div>
 					</div>
 
@@ -3725,19 +5786,12 @@ globalThis.playMode = centerTab === "play";
 						</div>
 					)}
 					<div className="inspector-scroll">
-				<Foldout hidden={sidebarTab !== "shot"} title={ko("Shot type", "샷 종류")}>
-						<div className="presets">
-							{Object.entries(PRESETS).map(([key, p]) => (
-								<button key={key} className={preset === key ? "active" : ""} onClick={() => applyPreset(key)}>
-									{p.label}
-								</button>
-							))}
-						</div>
-					</Foldout>
+				{/* Shot TYPE presets live in the viewport toolbar dropdown — not
+					    duplicated here. */}
 
 					{/* Camera animation is authored against the same playhead as motion,
 					    so keep its controls beside the Motion tools as well as Shot setup. */}
-					<Foldout hidden={!(sidebarTab === "shot" || sidebarTab === "motion" || (sidebarTab === "inspector" && selectedHierarchyId === "camera"))} title={ko("Camera", "카메라")}>
+					<Foldout hidden={!(sidebarTab === "shot" || (sidebarTab === "inspector" && selectedHierarchyId === "camera"))} title={ko("Camera", "카메라")}>
 					<Slider label={ko("Lens (FOV)", "렌즈 (FOV)")} min={14} max={90} step={1} value={fovDeg} unit="°" onChange={setFovDeg} />
 						<div className="readout">
 						<span title={ko("camera to subject", "카메라와 피사체 거리")}>{shot.distance.toFixed(2)} m</span>
@@ -3820,25 +5874,21 @@ globalThis.playMode = centerTab === "play";
 						</p>
 					</Foldout>
 
-				<Foldout hidden={sidebarTab !== "inspector" || !["characters", "characterA", "characterB"].includes(selectedHierarchyId)} title={showB ? ko("Subjects", "인물들") : ko("Subject", "인물")}>
+				<Foldout hidden={sidebarTab !== "inspector" || !(selectedHierarchyId === "characters" || selectedHierarchyId === "characterA" || selectedHierarchyId === "characterB" || selectedHierarchyId.startsWith("character:"))} title={showB ? ko("Subjects", "인물들") : ko("Subject", "인물")}>
 						<div className={"subjects-row" + (showB ? "" : " single")}>
-							<SubjectBox
-							label={ko("Subject 1", "인물 1")}
-								value={charA}
-								onChange={setCharA}
-								onPose={() => openStudio("A")}
-								posing={posing === "A"}
-							/>
-							{showB && (
+							{characters.map((entry, index) => entry.hidden ? null : (
 								<SubjectBox
-								label={ko("Subject 2", "인물 2")}
-									value={charB}
-									onChange={setCharB}
-									onRemove={() => setShowB(false)}
-									onPose={() => openStudio("B")}
-									posing={posing === "B"}
+									key={entry.id}
+									label={ko(`Subject ${index + 1}`, `인물 ${index + 1}`)}
+									value={entry}
+									onChange={(next) => updateCharacterAt(index, next)}
+									onPose={() => openStudio(entry.id)}
+									posing={posing === entry.id}
+									onRemove={index > 0 ? () => removeCharacter(entry.id) : undefined}
+									color={entry.tint ?? defaultCharacterTint(entry, index)}
+									onColorChange={(tint) => updateCharacterAt(index, { tint })}
 								/>
-							)}
+							))}
 						</div>
 						{!showB && (
 							<button type="button" className="add-subject" onClick={() => setShowB(true)}>
@@ -3848,7 +5898,7 @@ globalThis.playMode = centerTab === "play";
 						)}
 					</Foldout>
 
-				<Foldout hidden={sidebarTab !== "inspector" || !["characters", "characterA", "characterB"].includes(selectedHierarchyId)} title={ko("Pose", "포즈")}>
+				<Foldout hidden={sidebarTab !== "inspector" || !(selectedHierarchyId === "characters" || selectedHierarchyId === "characterA" || selectedHierarchyId === "characterB" || selectedHierarchyId.startsWith("character:"))} title={ko("Pose", "포즈")}>
 					<Field label={showB ? ko("Subject 1 pose", "인물 1 포즈") : ko("Pose", "포즈")}>
 							<Dropdown
 							ariaLabel={ko("Subject 1 pose", "인물 1 포즈")}
@@ -3898,16 +5948,15 @@ globalThis.playMode = centerTab === "play";
 							</label>
 						</div>
 
-						{!hasCharSheet && (
-						<Field label={showB ? ko("Subject 1", "인물 1") : ko("Subject", "인물")}>
-								<input type="text" value={subject} onChange={(e) => setSubject(e.target.value)} />
-							</Field>
-						)}
-						{!hasCharSheet && showB && (
-						<Field label={ko("Subject 2", "인물 2")}>
-								<input type="text" value={subject2} onChange={(e) => setSubject2(e.target.value)} />
+						{!hasCharSheet && characters.map((entry, index) => entry.hidden ? null : (
+							<Field key={entry.id} label={characters.filter((c) => !c.hidden).length > 1 ? ko(`Subject ${index + 1}`, `인물 ${index + 1}`) : ko("Subject", "인물")}>
+								<input
+									type="text"
+									value={entry.subject ?? ""}
+									onChange={(e) => updateCharacterAt(index, { subject: e.target.value })}
+								/>
 							</Field>
-						)}
+						))}
 						{!hasEnvSheet && (
 						<Field label={ko("Environment", "환경")}>
 								<input type="text" value={environment} onChange={(e) => setEnvironment(e.target.value)} />
@@ -3947,69 +5996,217 @@ globalThis.playMode = centerTab === "play";
 							<input type="text" value={style} onChange={(e) => setStyle(e.target.value)} />
 						</Field>
 
-						<button
-							className="btn ghost full"
-							title={ko("Export the posed character as an ARDY CozyClayPoseV1 JSON", "포즈가 잡힌 캐릭터를 ARDY CozyClayPoseV1 JSON으로 내보내기")}
-							onClick={downloadArdyPose}
-						>
-							{ko("Export ARDY pose", "ARDY 포즈 내보내기")}
-						</button>
 						<button className="btn primary full generate" onClick={generate}>
-							{ko("Generate", "만들기")}
+							{mode === "video" ? ko("Generate video", "영상 만들기") : ko("Generate image", "이미지 만들기")}
 						</button>
 					</Foldout>
+				<Foldout hidden={sidebarTab !== "motion"} title={ko("Video capture", "영상 모캡")}>
+					<div className="multimodel-card">
+						<div className="multimodel-card-head">
+							<div>
+								<strong>{ko("Footage → motion", "영상 → 모션")}</strong>
+								<span>{ko("Prepare a source inside the Motion workspace.", "모션 작업공간에서 입력 영상을 준비하세요.")}</span>
+							</div>
+							<span className={"multimodel-status " + multiModelStatus}>
+								{multiModelStatus === "ready"
+									? ko("READY", "준비됨")
+									: multiModelStatus === "error"
+										? ko("CHECK", "확인 필요")
+										: multiModelStatus === "busy"
+											? (multiModelStage === "fetching" ? ko("FETCHING", "받는 중") : ko("PROBING", "분석 중"))
+											: ko("IDLE", "대기")}
+							</span>
+						</div>
+						<div className="multimodel-input-block">
+							<div className="multimodel-input-label">
+								<strong>{ko("Local video file", "로컬 비디오 파일")}</strong>
+								<span>{ko("Upload from this computer", "이 컴퓨터에서 업로드")}</span>
+							</div>
+							<div className="multimodel-source-row">
+								<button type="button" className="btn ghost" onClick={() => multiModelFileRef.current?.click()}>
+									{ko("Choose video", "영상 선택")}
+								</button>
+								<input ref={multiModelFileRef} className="multimodel-file-input" type="file" accept="video/*" onChange={chooseMultiModelFile} />
+								<span className="multimodel-file-name">{multiModelSource?.kind === "file" ? multiModelSource.name : ko("No file selected", "파일이 선택되지 않음")}</span>
+							</div>
+						</div>
+						<div className="multimodel-input-block">
+							<div className="multimodel-input-label">
+								<strong>{ko("Video URL", "비디오 URL")}</strong>
+								<span>{ko("Use a hosted or local route", "호스팅 또는 로컬 경로 사용")}</span>
+							</div>
+							<input
+								className="multimodel-url-input"
+								type="text"
+								value={multiModelUrl}
+								onChange={(event) => setMultiModelUrl(event.target.value)}
+								onKeyDown={(event) => { if (event.key === "Enter") useMultiModelUrl(); }}
+								placeholder={ko("https://…/boxing.mp4", "https://…/boxing.mp4")}
+								aria-label={ko("Multi-Model video URL", "멀티 모델 영상 URL")}
+								spellCheck={false}
+							/>
+							<div className="multimodel-url-actions">
+								<button type="button" className="btn ghost" onClick={pasteMultiModelUrl}>
+									{ko("Paste", "붙여넣기")}
+								</button>
+								<button type="button" className="btn ghost" onClick={() => setMultiModelUrl("")} disabled={!multiModelUrl}>
+									{ko("Clear", "지우기")}
+								</button>
+								<button type="button" className="btn primary" onClick={useMultiModelUrl} disabled={!multiModelUrl.trim()}>
+									{ko("Use URL", "URL 사용")}
+								</button>
+							</div>
+						</div>
+						{multiModelStatus === "busy" && (
+							<div className="multimodel-progress">
+								<div className="multimodel-progress-track">
+									<div
+										className={"multimodel-progress-bar" + (multiModelProgress === null ? " indeterminate" : "")}
+										style={multiModelProgress === null ? undefined : { width: `${Math.round(multiModelProgress * 100)}%` }}
+									/>
+								</div>
+								<span>
+									{multiModelStage === "fetching"
+										? (multiModelProgress === null
+											? ko("Downloading…", "다운로드 중…")
+											: `${Math.round(multiModelProgress * 100)}%`)
+										: ko("Decoding…", "디코딩 중…")}
+								</span>
+							</div>
+						)}
+						{multiModelError && <p className="multimodel-error">{multiModelError}</p>}
+						{multiModelFootage && (
+							<div className="multimodel-receipt">
+								<video className="multimodel-preview" src={multiModelFootage.objectUrl} muted playsInline preload="metadata" />
+								<div className="multimodel-receipt-body">
+									<strong>{multiModelSource?.name}</strong>
+									<span>{footageSummary(multiModelFootage)}</span>
+									<span className="multimodel-receipt-timeline">
+										{isKo
+											? `타임라인 0–${multiModelFootage.frames - 1} 프레임으로 맞춤`
+											: `Timeline sized to frames 0–${multiModelFootage.frames - 1}`}
+									</span>
+								</div>
+							</div>
+						)}
+						{multiModelFootage && (
+							<div className="multimodel-extract">
+								<button
+									type="button"
+									className="btn primary"
+									onClick={extractMultiModelMotion}
+									disabled={multiModelExtract === "running"}
+								>
+									{multiModelExtract === "running"
+										? ko("Extracting…", "추출 중…")
+										: multiModelTake
+											? ko("Extract again", "다시 추출")
+											: ko("Extract motion", "모션 추출")}
+								</button>
+								{multiModelExtract === "running" && (
+									<div className="multimodel-progress">
+										<div className="multimodel-progress-track">
+											<div
+												className={"multimodel-progress-bar" + (multiModelExtractProgress === null ? " indeterminate" : "")}
+												style={multiModelExtractProgress === null ? undefined : { width: `${Math.round(multiModelExtractProgress * 100)}%` }}
+											/>
+										</div>
+										<span>
+											{multiModelExtractProgress === null
+												? ko("Engine…", "엔진 준비…")
+												: `${Math.round(multiModelExtractProgress * 100)}%`}
+										</span>
+									</div>
+								)}
+								{multiModelExtract === "error" && <p className="multimodel-error">{multiModelExtractError}</p>}
+								{multiModelTake && (
+									<p className="multimodel-extract-receipt">
+										{multiModelTake.gpu
+											? (isKo
+												? `GPU 테이크 ${multiModelTake.frames}프레임 추출됨 — 타임라인에서 재생하세요`
+												: `GPU take extracted, ${multiModelTake.frames} frames — press play on the timeline`)
+											: (isKo
+												? `${multiModelTake.frames}프레임 테이크 구움 (실측 ${multiModelTake.fitted} · 유지 ${multiModelTake.held}) — 타임라인에서 재생하세요`
+												: `Baked a ${multiModelTake.frames}-frame take (${multiModelTake.fitted} measured · ${multiModelTake.held} held) — press play on the timeline`)}
+									</p>
+								)}
+								{multiModelTake?.persons > 1 && (
+									<p className="multimodel-extract-receipt">
+										{isKo
+											? `${multiModelTake.persons}명의 테이크를 각 인물 레이어에 배치했어요`
+											: `${multiModelTake.persons} performers landed on their own subject layers`}
+									</p>
+								)}
+								{multiModelExtract === "idle" && !multiModelTake && (
+									<p className="multimodel-note">
+										{bridge === null
+											? ko("Checking for the dev bridge…", "개발 브리지를 확인하는 중…")
+											: bridge.ok
+												? ko(
+													"Extraction runs on the GPU box (about a minute per 15 s of footage).",
+													"추출은 GPU 박스에서 돌아갑니다(영상 15초당 약 1분)."
+												)
+												: ko(
+													"No bridge: extraction runs in this browser (rougher). First run downloads the pose engine (~15 MB).",
+													"브리지 없음: 이 브라우저에서 추출합니다(품질 낮음). 첫 실행은 포즈 엔진(~15 MB)을 내려받습니다."
+												)}
+									</p>
+								)}
+							</div>
+						)}
+						<p className="multimodel-note">
+							{ko("Locked-off footage with both performers in frame is best.", "두 사람이 함께 보이는 고정 카메라 영상이 가장 적합합니다.")}
+						</p>
+					</div>
+				</Foldout>
 				<Foldout hidden={sidebarTab !== "motion"} title={ko("ARDY motion", "ARDY 모션")}>
+					{/* One compact status line: which layer is being edited and on
+					    which box — the long hint texts lived here before. */}
+					<p className="ardy-meta">
+						{isKo ? `인물 ${activeCharIndex + 1} 레이어` : `Subject ${activeCharIndex + 1} layer`}
+						{bridge?.ok ? ` · ${bridge.host ?? ko("box", "로컬")}` : ""}
+					</p>
+					{/* Per-character layer status: every cast member's clip and
+					    queue position at a glance. */}
+					{characters.length > 0 && (
+						<ul className="gen-layers">
+							{characters.map((entry, index) => {
+								const job = genQueue.find((item) => item.charId === entry.id && (item.status === "queued" || item.status === "running" || item.status === "error"));
+								const clip = entry.id === activeChar.id ? motion : entry.sessionMotion;
+								const state = job?.status === "running"
+									? ko("generating…", "생성 중…")
+									: job?.status === "queued"
+										? ko("queued", "대기 중")
+										: job?.status === "error"
+											? ko("failed", "실패")
+											: clip
+												? (isKo ? `${clip.frames}프레임 로드됨` : `${clip.frames} frames loaded`)
+												: ko("no motion", "모션 없음");
+								return (
+									<li key={entry.id} className={entry.id === activeChar.id ? "active" : ""}>
+										<span className="gen-layers-name">S{index + 1}</span>
+										<span className={`gen-layers-state ${job?.status ?? (clip ? "loaded" : "")}`}>{state}</span>
+										{job?.status === "queued" && (
+											<button type="button" title={ko("Remove from queue", "대기열에서 제거")} onClick={() => setGenQueue((queue) => queue.filter((item) => item.id !== job.id))}>✕</button>
+										)}
+									</li>
+								);
+							})}
+						</ul>
+					)}
 					{bridge === null ? (
 						<p className="ardy-hint">{ko("Checking for the dev bridge…", "개발 브리지를 확인하는 중…")}</p>
 					) : bridge.ok ? (
 						<>
-							<p className="ardy-meta">
-								{bridge.host ?? ko("box", "로컬")} · {isKo ? `장치 ${bridge.device ?? "알 수 없음"}` : bridge.device ?? "device?"} · {ko("encoder", "인코더")}{" "}
-								{bridge.encoder ?? ko("?", "알 수 없음")}
-							</p>
-							<p className="ardy-hint">{ko("Neutral skeleton · block boundaries and IK keys are pinned automatically.", "중립 스켈레톤 · 블록 경계와 IK 키는 자동으로 고정됩니다.")}</p>
-							<Field label={ko("Motion prompt", "모션 프롬프트")}>
-								<input
-									type="text"
-									value={ardyPrompt}
-									onChange={(e) => setArdyPrompt(e.target.value)}
-									placeholder={ko("what the subject should do", "피사체가 할 동작을 설명하세요")}
-									maxLength={ARDY_PROMPT_MAX}
-								/>
-								<span className="ardy-clamp">{isKo ? `최대 ${ARDY_PROMPT_MAX}자 · 필수` : `max ${ARDY_PROMPT_MAX} chars · required`}</span>
-							</Field>
-							<Field label={ko("Duration (s)", "길이 (초)")}>
-								<input
-									type="number"
-									min={ARDY_DURATION_MIN}
-									max={ARDY_DURATION_MAX}
-									step={1}
-									value={ardyDuration}
-									onChange={(e) => changeDuration(e.target.value)}
-								/>
-							</Field>
-							<Field label={ko("Seed (optional)", "Seed (선택)")}>
-								<input
-									type="text"
-									inputMode="numeric"
-									value={ardySeed}
-									onChange={(e) => changeArdySeed(e.target.value)}
-									placeholder={ko("empty = random", "비우면 랜덤")}
-								/>
-								<span className="ardy-clamp">{isKo ? `RT 기본값 2 · 비우면 랜덤 · 0..${ARDY_SEED_MAX}` : `RT default 2 · empty = random · 0..${ARDY_SEED_MAX}`}</span>
-							</Field>
-							{ardyRunning ? (
+							{/* Generation is authored in Prompt Blocks below: a block owns
+							    both its wording and its frame range, so the range decides the
+							    duration and a separate prompt/duration pair here could only
+							    disagree with it. This box reports the run instead of starting
+							    one. */}
+							{ardyRunning && (
 								<button type="button" className="btn ghost full" onClick={cancelArdy}>
 									{ko("Cancel run", "실행 취소")}
 								</button>
-							) : (
-								<button
-									type="button"
-									className="btn primary full generate"
-									onClick={() => runArdy()}
-								>
-									{ko("Generate motion", "모션 생성")}
-								</button>
 							)}
 							{ardyStatus && <p className="ardy-status">{ardyStatus}</p>}
 							{ardyReport && (
@@ -4046,7 +6243,7 @@ globalThis.playMode = centerTab === "play";
 								<p className="ardy-hint">{ko("Decoding motion…", "모션 디코딩 중…")}</p>
 									) : motion ? (
 										<p className="ardy-outcome done">
-									{isKo ? `모션 로드됨 — ${motion.frames}프레임 @ ${motion.fps} fps, 인물 1에 재생 중` : `Motion loaded — ${motion.frames} frames @ ${motion.fps} fps, playing on Subject 1`}
+									{isKo ? `모션 로드됨 — ${motion.frames}프레임 @ ${motion.fps} fps, 인물 ${activeCharIndex + 1}에 재생 중` : `Motion loaded — ${motion.frames} frames @ ${motion.fps} fps, playing on Subject ${activeCharIndex + 1}`}
 										</p>
 									) : motionError ? (
 										<>
@@ -4122,16 +6319,34 @@ globalThis.playMode = centerTab === "play";
 								/>
 							</Field>
 						)}
+						{/* The seed belongs with the button that consumes it. Duration does
+						    not appear at all: the blocks' own frame ranges are the length. */}
+						<Field label={ko("Seed", "시드")}>
+							<input
+								type="text"
+								inputMode="numeric"
+								value={ardySeed}
+								onChange={(e) => changeArdySeed(e.target.value)}
+								placeholder={ko("empty = random", "비우면 랜덤")}
+							/>
+						</Field>
 						<button
 							type="button"
 							className="btn primary full generate prompt-block-generate"
-							disabled={!bridge?.ok || !promptClips.some((clip) => clip.text.trim()) || ardyRunning}
+							disabled={!bridge?.ok || !promptClips.some((clip) => clip.text.trim())}
 							onClick={runAllPromptBlocks}
 						>
-							{ardyRunning
-								? (isKo ? `${promptClips.length}개 블록 생성 중…` : `Generating ${promptClips.length} blocks…`)
-								: (isKo ? `${promptClips.length}개 블록 모두 생성` : `Generate all ${promptClips.length} blocks`)}
+							{ardyRunning || genQueue.some((job) => job.status === "queued")
+								? ko("Queue block generation", "블록 생성 대기열에 추가")
+								: isKo
+									? `${promptClips.length}개 블록 모두 생성`
+									: `Generate all ${promptClips.length} blocks`}
 						</button>
+						{ardyRunning && (
+							<button type="button" className="btn ghost full" onClick={cancelArdy}>
+								{ko("Cancel run", "실행 취소")}
+							</button>
+						)}
 					{!bridge?.ok && <p className="ardy-hint">{ko("Start the ARDY bridge to enable generation.", "생성을 사용하려면 ARDY 브리지를 시작하세요.")}</p>}
 						{ardyStatus && <p className="ardy-status">{ardyStatus}</p>}
 						<button type="button" className="btn ghost full" onClick={() => addPromptClip(tlFrame)}>
@@ -4155,76 +6370,6 @@ globalThis.playMode = centerTab === "play";
 						</button>
 					</Foldout>
 
-				<Foldout hidden={sidebarTab !== "motion"} title={ko("Root Path", "루트 경로")}>
-						<div className="inspector-status-grid">
-						<span>{ko("Path mode", "경로 모드")}</span><b>{waypointMode ? ko("ON", "켜짐") : ko("OFF", "꺼짐")}</b>
-						<span>{ko("Waypoints", "웨이포인트")}</span><b>{waypoints.length}</b>
-						<span>{ko("Current frame", "현재 프레임")}</span><b>{tlFrame}</b>
-						</div>
-						<button type="button" className={"btn full" + (waypointMode ? " primary" : "")} onClick={toggleWaypointMode}>
-						{waypointMode ? ko("Finish path editing", "경로 편집 끝내기") : ko("Edit root path", "루트 경로 편집")}
-						</button>
-						{waypointMode && (
-						<p className="inspector-hint">{ko("Pick a frame on the timeline's 2D root lane first, and the next Shot-view floor click lands there. Already-placed pins can be dragged in the Top-View.", "타임라인 2D 루트 레인에서 프레임을 먼저 고르면 다음 샷 뷰 바닥 클릭이 그 프레임에 놓입니다. 이미 놓은 점은 탑뷰에서 드래그해 위치를 조정하세요.")}</p>
-						)}
-						<div className="inspector-list compact">
-							{waypoints.map((waypoint) => (
-								<button
-									type="button"
-									key={waypoint.frame}
-									className={activeWaypointFrame === waypoint.frame ? "active" : ""}
-									onClick={() => {
-										setActiveWaypointFrame(waypoint.frame);
-										setTlFrame(waypoint.frame);
-										setWaypointMode(true);
-									}}
-									onContextMenu={(event) => {
-										event.preventDefault();
-										removeWaypoint(waypoint.frame);
-									}}
-								>
-								<span>{isKo ? `프레임 ${waypoint.frame}` : `Frame ${waypoint.frame}`}</span>
-									<small>{waypoint.x.toFixed(2)}, {waypoint.z.toFixed(2)}</small>
-								</button>
-							))}
-						</div>
-					</Foldout>
-
-				<Foldout hidden={sidebarTab !== "motion"} title={ko("IK Corrections", "IK 보정")}>
-						<div className="inspector-status-grid">
-						<span>{ko("IK mode", "IK 모드")}</span><b>{ikMode ? ko("ON", "켜짐") : ko("OFF", "꺼짐")}</b>
-						<span>{ko("Current frame", "현재 프레임")}</span><b>{tlFrame}</b>
-						<span>{ko("Keys", "키")}</span><b>{ikFrames.length}</b>
-						</div>
-						<button type="button" className={"btn full" + (ikMode ? " primary" : "")} onClick={toggleIkMode} disabled={!ikChains}>
-						{ikMode ? ko("Exit IK mode", "IK 모드 나가기") : ko("Enter IK mode", "IK 모드 들어가기")}
-						</button>
-						<label className="check">
-							<input type="checkbox" checked={footSnap} onChange={() => setFootSnap((value) => !value)} />
-						<span>{ko("Keep feet planted during body edits", "몸을 편집하는 동안 발 고정")}</span>
-						</label>
-						<button type="button" className="btn ghost full" onClick={ikAddKeyframe} disabled={!ikChains}>
-						{isKo ? `프레임 ${tlFrame}에 키 추가` : `Add key at frame ${tlFrame}`}
-						</button>
-						<div className="inspector-list compact">
-							{ikFrames.map((frame) => (
-								<button
-									type="button"
-									key={frame}
-									className={tlFrame === frame ? "active" : ""}
-									onClick={() => setTlFrame(frame)}
-									onContextMenu={(event) => {
-										event.preventDefault();
-										ikDeleteKeyframe(frame);
-									}}
-								>
-								<span>{isKo ? `프레임 ${frame}` : `Frame ${frame}`}</span>
-								<small>{tlFrame === frame ? ko("Current", "현재") : ko("right-click removes", "오른쪽 클릭으로 삭제")}</small>
-								</button>
-							))}
-						</div>
-					</Foldout>
-
 				<Foldout hidden={sidebarTab !== "inspector" || selectedHierarchyId !== "environment"} title={ko("Environment", "환경")}>
 						<label className="check">
 							<input type="checkbox" checked={hasEnvSheet} onChange={(event) => setHasEnvSheet(event.target.checked)} />
@@ -4241,8 +6386,31 @@ globalThis.playMode = centerTab === "play";
 					</Foldout>
 
 				<Foldout hidden={sidebarTab !== "inspector" || selectedHierarchyId !== "props"} title={ko("Props", "소품")}>
-					<p className="inspector-hint">{ko("Everything you add to the set lives here. Pick one to edit it, or click it in the shot view.", "세트에 추가한 모든 소품이 여기에 모입니다. 편집하려면 하나를 고르거나 샷 뷰에서 클릭하세요.")}</p>
+					<div className="props-drop" data-drop={inspectorDrop.over ? "over" : "target"} {...inspectorDrop.handlers}>
+					<p className="inspector-hint">{ko("Everything you add to the set lives here. Pick one to edit it, or click it in the shot view. Drop a picture anywhere here — or on the shot view — to stand it up as a cutout.", "세트에 추가한 모든 소품이 여기에 모입니다. 편집하려면 하나를 고르거나 샷 뷰에서 클릭하세요. 사진을 이 영역이나 샷 뷰에 끌어다 놓으면 컷아웃으로 세워집니다.")}</p>
 					<AddObjectMenu onAdd={addSceneObject} label={ko("Add object to the set", "세트에 오브젝트 추가")} />
+					<button
+						type="button"
+						className="btn ghost full"
+						onClick={() => cutoutInputRef.current?.click()}
+						title={ko("A photo of the real thing, standing in the set as a card", "실제 사진을 판때기로 세워 세트에 배치합니다")}
+					>
+						{ko("Import image as cutout", "이미지를 컷아웃으로 가져오기")}
+					</button>
+					<input
+						ref={cutoutInputRef}
+						type="file"
+						hidden
+						accept={ASSET_IMAGE_TYPES.join(",")}
+						onChange={(event) => {
+							const [file] = event.target.files ?? [];
+							// Cleared before the await: picking the same file twice in a
+							// row has to fire change twice, and it will not if the input
+							// still holds it.
+							event.target.value = "";
+							importCutout(file);
+						}}
+					/>
 						<div className="inspector-list compact">
 							{sceneObjects.map((object) => (
 								<button
@@ -4255,6 +6423,7 @@ globalThis.playMode = centerTab === "play";
 								</button>
 							))}
 						</div>
+					</div>
 					</Foldout>
 
 				<Foldout hidden={sidebarTab !== "inspector" || !selectedSceneObject} title={ko("Object Transform", "오브젝트 변환")}>
@@ -4319,6 +6488,195 @@ globalThis.playMode = centerTab === "play";
 										{ axis: "Z", value: selectedSceneObject.scaleZ ?? 1, step: 0.05, precision: 2, onChange: (scaleZ) => changeSceneObject(selectedSceneObject.id, { scaleZ }), onScrubStart: beginSceneTransaction, onScrubEnd: endSceneTransaction },
 									]}
 								/>
+								{selectedSceneObject.renderer === CUTOUT_KIND && (
+									<>
+										<Field label={ko("Card height (m)", "판 높이 (m)")}>
+											<input
+												type="number"
+												data-field="cutout-height"
+												min="0.05"
+												max={CUTOUT_MAX_HEIGHT}
+												step="0.05"
+												value={selectedSceneObject.height ?? CUTOUT_DEFAULT_HEIGHT}
+												onChange={(event) => changeSceneObject(selectedSceneObject.id, { height: Number(event.target.value) })}
+											/>
+										</Field>
+										<p className="inspector-hint">
+											{isKo
+												? `가로 ${(selectedSceneObject.footprint?.width ?? 0).toFixed(2)} m — 사진 비율에 맞춰 자동 계산됩니다. 사진 속에서 높이를 알 수 있는 것(문 2 m, 사람 1.8 m)에 맞추세요.`
+												: `${(selectedSceneObject.footprint?.width ?? 0).toFixed(2)} m wide, from the picture's own aspect. Measure against something you know: a door is 2 m, a person 1.8 m.`}
+										</p>
+										<div className="matte-editor">
+											{!!selectedSceneObject.matteAssetId && (
+												<p className="inspector-hint matte-state">
+													{ko(
+														"This card's background is removed. You are editing the original photograph — apply again to change what goes.",
+														"이 카드는 배경이 지워진 상태입니다. 지금 보이는 것은 원본 사진이며, 다시 적용하면 지워지는 범위가 바뀝니다.",
+													)}
+												</p>
+											)}
+											<canvas
+												ref={matteCanvasRef}
+												className="matte-canvas"
+												// Focusable for the space-drag pan, not for a shortcut: undo
+												// belongs to the buttons here. Ctrl+Z is the scene's, and one
+												// key meaning two different undos in two different panels is
+												// worse than a key that means one thing everywhere.
+												tabIndex={0}
+												aria-label={ko("Background editor — drag over the background to cut it out", "배경 편집기 — 배경 위를 드래그하면 그 영역이 잘려 나갑니다")}
+											/>
+											<p className="inspector-hint">
+												{matteStats.painted
+													? isKo
+														? `사진의 ${Math.round(matteStats.coverage * 100)}%가 선택됨 — 보라색이 지워집니다.`
+														: `${Math.round(matteStats.coverage * 100)}% of the picture marked — purple is what goes.`
+													: ko(
+															"Drag over the background — the cut grows out from wherever the brush touches.",
+															"배경 위를 드래그하세요 — 브러시가 닿은 곳에서 같은 배경으로 번져 나가며 잘립니다.",
+														)}
+											</p>
+										</div>
+										{/* Two hands: what the brush does on the left, what to do
+										    about what it did on the right. Clear sits under Undo and
+										    Redo because it is the same kind of act — taking work
+										    back — only all of it. */}
+										<div className="matte-tools">
+											<div className="presets matte-modes">
+												<button
+													type="button"
+													className={matteMode === "paint" ? "active" : ""}
+													onClick={() => {
+														setMatteMode("paint");
+														matteEditorRef.current?.setMode("paint");
+													}}
+												>
+													{ko("Cut out", "누끼 따기")}
+												</button>
+												<button
+													type="button"
+													className={matteMode === "erase" ? "active" : ""}
+													onClick={() => {
+														setMatteMode("erase");
+														matteEditorRef.current?.setMode("erase");
+													}}
+												>
+													{ko("Bring back", "되살리기")}
+												</button>
+											</div>
+											{/* Icons, not words: undo, redo and clear are the same three
+											    acts in every tool anyone has used, and spelling them out
+											    took more width than the two that actually name what this
+											    brush does. The label lives in the tooltip and in the
+											    accessible name. */}
+											<div className="matte-history">
+												<div className="presets matte-modes matte-icons">
+													<button
+														type="button"
+														disabled={!matteStats.canUndo}
+														title={ko("Undo", "실행 취소")}
+														aria-label={ko("Undo", "실행 취소")}
+														onClick={() => matteEditorRef.current?.undo()}
+													>
+														<span aria-hidden="true">↩️</span>
+													</button>
+													<button
+														type="button"
+														disabled={!matteStats.canRedo}
+														title={ko("Redo", "다시 실행")}
+														aria-label={ko("Redo", "다시 실행")}
+														onClick={() => matteEditorRef.current?.redo()}
+													>
+														<span aria-hidden="true">↪️</span>
+													</button>
+												</div>
+												<div className="presets matte-modes matte-icons matte-clear">
+													<button
+														type="button"
+														title={ko("Clear the selection", "선택 모두 지우기")}
+														aria-label={ko("Clear the selection", "선택 모두 지우기")}
+														onClick={() => matteEditorRef.current?.clear()}
+													>
+														<span aria-hidden="true">🗑️</span>
+													</button>
+												</div>
+											</div>
+										</div>
+										<div className="matte-slider">
+											<label htmlFor="matte-tolerance">{ko("Tolerance", "허용치")}</label>
+											<input
+												id="matte-tolerance"
+												type="range"
+												min="0.02"
+												max="0.6"
+												step="0.01"
+												value={matteTolerance}
+												onChange={(event) => {
+													const value = Number(event.target.value);
+													setMatteTolerance(value);
+													matteEditorRef.current?.setTolerance(value);
+												}}
+											/>
+											<input
+												type="number"
+												data-field="matte-tolerance"
+												min="0.02"
+												max="0.6"
+												step="0.01"
+												value={matteTolerance}
+												aria-label={ko("Tolerance", "허용치")}
+												onChange={(event) => {
+													const value = Number(event.target.value);
+													if (!Number.isFinite(value)) return;
+													setMatteTolerance(value);
+													matteEditorRef.current?.setTolerance(value);
+												}}
+											/>
+										</div>
+										<p className="inspector-hint">
+											{ko(
+												"Tolerance is how far a drag spreads: low keeps to one flat colour, high walks across a shaded wall. It applies to the next drag and to Auto-detect, not to what is already purple.",
+												"허용치는 드래그가 얼마나 번질지입니다. 낮으면 한 가지 색에 머무르고, 높으면 명암이 변하는 벽까지 따라갑니다. 이미 칠한 보라가 아니라 다음 드래그와 자동 인식에 적용됩니다.",
+											)}
+										</p>
+										<button
+											type="button"
+											className="btn ghost full"
+											onClick={() => {
+												const added = matteEditorRef.current?.autoDetect(matteTolerance) ?? 0;
+												if (!added) {
+													setToast(
+														isKo
+															? "자동 인식이 더 칠할 곳을 찾지 못했어요 — 허용치를 높이거나 직접 칠하세요"
+															: "Auto-detect found nothing new to paint — raise the tolerance, or paint it by hand",
+													);
+												}
+											}}
+										>
+											{ko("Auto-detect background", "배경 자동 인식")}
+										</button>
+										<button
+											type="button"
+											className="btn primary full matte-apply"
+											disabled={matteBusy || !matteStats.painted}
+											onClick={() => applyMatte(selectedSceneObject.id)}
+										>
+											{matteBusy
+												? ko("Removing…", "지우는 중…")
+												: matteStats.painted
+													? isKo
+														? `보라색 부분 지우기 — 사진의 ${Math.round(matteStats.coverage * 100)}%`
+														: `Remove what is purple — ${Math.round(matteStats.coverage * 100)}% of the picture`
+													: ko("Nothing is marked yet", "아직 선택된 부분이 없습니다")}
+										</button>
+										<p className="inspector-hint">
+											{ko(
+												"Cut out grows the selection from wherever you drag; Bring back is the same growth fenced to what is already selected, so one drag returns a wrongly-cut region whole. Applying removes exactly what is purple and trims the empty margin — the card keeps the original photograph and this selection, so you can come back and change your mind.",
+												"누끼 따기는 드래그한 자리에서 선택 영역을 키우고, 되살리기는 그 성장을 이미 선택된 범위 안으로 가둔 것이라 잘못 잘린 부분이 드래그 한 번에 통째로 돌아옵니다. 적용하면 보라색 부분만 지우고 여백을 잘라냅니다 — 원본 사진과 지금 선택한 영역은 카드에 남아 있어 언제든 다시 열어 고칠 수 있습니다.",
+											)}
+										</p>
+									</>
+								)}
+								{selectedSceneObject.renderer !== CUTOUT_KIND && (
 						<div className="object-colors" role="group" aria-label={ko("Object colour", "오브젝트 색상")}>
 									{OBJECT_COLORS.map((color) => (
 										<button
@@ -4332,6 +6690,7 @@ globalThis.playMode = centerTab === "play";
 										/>
 									))}
 								</div>
+								)}
 							</>
 						)}
 					</Foldout>
@@ -4349,6 +6708,41 @@ globalThis.playMode = centerTab === "play";
 						</div>
 					)}
 					</section>
+					{/* Pose Studio docks under the inspector instead of floating over
+					    the shot: the viewport keeps the posed character unobstructed. */}
+					{posing && (
+						<PoseStudioPanel
+							docked
+							subject={posingIndex >= 0 ? posingIndex + 1 : 1}
+							model={posingChar?.model ?? charA.model}
+							poses={allPoses}
+							selectedId={studioPick}
+							closing={posingClosing}
+							motionActive={Boolean(motion)}
+							onSelect={setStudioPick}
+							onApply={(selectedPoseId) => {
+								const pose = allPoses.find((p) => p.id === selectedPoseId);
+								if (pose) {
+									const hadMotion = Boolean(motion);
+									if (hadMotion) clearMotion();
+									setPosed(pose);
+									closeStudio();
+									setToast(hadMotion ? ko("Cleared the current motion and applied the pose", "현재 모션을 지우고 포즈를 적용했어요") : ko("Pose applied", "포즈를 적용했어요"));
+								} else {
+									setToast(ko("Couldn't find the selected pose — pick again", "선택한 포즈를 찾지 못했어요. 다시 골라 주세요"));
+								}
+							}}
+							onReset={() => {
+								if (motion) clearMotion();
+								setStudioPick(DEFAULT_POSE.id);
+								setPosed(DEFAULT_POSE);
+								setToast(ko("Back to the default pose", "기본 포즈로 돌아왔어요"));
+							}}
+							onSave={savePose}
+							onDelete={removePose}
+							onClose={closeStudio}
+						/>
+					)}
 				</aside>
 			</div>
 
@@ -4376,7 +6770,18 @@ globalThis.playMode = centerTab === "play";
 					>
 						{ko("Console", "콘솔")}
 					</button>
+					<button
+						type="button"
+						className={bottomTab === "assets" ? "active" : ""}
+						aria-pressed={bottomTab === "assets"}
+						onClick={() => setBottomTab("assets")}
+					>
+						{ko("Assets", "에셋")}
+					</button>
 				</nav>
+				<div className="assets-pane" hidden={bottomTab !== "assets"}>
+					<AssetPane onAssetGrab={beginAssetDrag} />
+				</div>
 				<div className="console-pane" hidden={bottomTab !== "console"}>
 					{consoleLines.length === 0 ? (
 						<p className="console-empty">{ko("No messages yet — ARDY status lines appear here.", "아직 메시지가 없어요 — ARDY 상태 줄이 여기에 표시됩니다.")}</p>
@@ -4395,6 +6800,9 @@ globalThis.playMode = centerTab === "play";
 					frameCount={tlFrameCount}
 					fps={tlFps}
 					playbackSpeed={DEFAULT_PLAYBACK_SPEED}
+				trackOwner={characters.length > 1 ? `S${activeCharIndex + 1}` : null}
+				ghostLayers={ghostLayers}
+				pathSpeed={pathSpeed}
 				playing={tlPlaying}
 				waypointMode={waypointMode}
 				waypointFrames={waypoints.map((w) => w.frame)}
@@ -4405,6 +6813,9 @@ globalThis.playMode = centerTab === "play";
 				badge={stateBadge}
 				ikMode={ikMode}
 				ikDisabled={!ikChains}
+				motion={motion ? { frames: motion.frames, label: motion.prompt || ko("Loaded take", "불러온 테이크") } : null}
+				onMotionTrim={applyMotionTrim}
+				onMotionTrimReset={resetMotionTrim}
 				ikFrames={ikFrames}
 				footSnap={footSnap}
 					shots={shots}
@@ -4525,7 +6936,28 @@ globalThis.playMode = centerTab === "play";
 				/>
 			)}
 
+			{projectBrowserOpen && (
+				<ProjectBrowser
+					currentName={projectName}
+					onOpen={(entry) => openProjectByHandle(entry.handle)}
+					onOpenFile={() => {
+						setProjectBrowserOpen(false);
+						openProject();
+					}}
+					onNew={() => {
+						setProjectBrowserOpen(false);
+						newProject();
+					}}
+					onClose={() => setProjectBrowserOpen(false)}
+				/>
+			)}
 			<Toast message={toast} onDone={() => setToast("")} />
+			{assetDrag && (
+				<div className="asset-drag-ghost" style={{ left: assetDrag.x, top: assetDrag.y }} aria-hidden="true">
+					<span className="asset-card-swatch" data-model={assetDrag.asset.id} />
+					<span>{assetDrag.asset.label}</span>
+				</div>
+			)}
 		</div>
 	);
 }
@@ -4553,13 +6985,23 @@ function Foldout({ title, hidden, children }) {
 	);
 }
 
-function SubjectBox({ label, value, onChange, onRemove, onPose, posing }) {
+function SubjectBox({ label, value, onChange, onRemove, onPose, posing, color, onColorChange }) {
 	const set = (key) => (v) => onChange((prev) => ({ ...prev, [key]: v }));
 	return (
 		<div className="subject-box">
 			<div className="subject-box-head">
 				<span className="sb-name">{label}</span>
 				<div className="sb-actions">
+					{onColorChange && (
+						<input
+							type="color"
+							className="sb-color"
+							title={ko("Character color", "인물 색상")}
+							aria-label={ko("Character color", "인물 색상")}
+							value={color}
+							onChange={(e) => onColorChange(e.target.value)}
+						/>
+					)}
 					{onPose && (
 						<button
 							type="button"
@@ -4578,6 +7020,7 @@ function SubjectBox({ label, value, onChange, onRemove, onPose, posing }) {
 				</div>
 			</div>
 			<Slider compact label={ko("Left / right", "좌 / 우")} min={-4} max={4} step={0.1} value={value.x} onChange={set("x")} />
+			<Slider compact label={ko("Height", "높이")} min={0} max={4} step={0.05} value={value.y ?? 0} onChange={set("y")} />
 			<Slider compact label={ko("Depth", "깊이")} min={-4} max={4} step={0.1} value={value.z} onChange={set("z")} />
 			<Slider compact label={ko("Rotate", "회전")} min={-180} max={180} step={1} value={value.rot} unit="°" onChange={set("rot")} />
 		</div>