cozyclay 1.2.0 → 1.3.0

package/src/styles.css

@@ -129,6 +129,262 @@ select {
 	gap: 6px;
 }
 
+/* Project menu (game-engine file workflow) */
+.project-menu-wrap {
+	position: relative;
+	margin-left: 14px;
+	align-self: center;
+}
+
+.project-menu-trigger {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 10px;
+	border-radius: 8px;
+	border: 1px solid var(--line2);
+	background: var(--card2);
+	color: var(--fg);
+	font-size: 12px;
+	font-weight: 600;
+	cursor: pointer;
+	max-width: 300px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.project-menu-trigger:hover {
+	border-color: var(--accent);
+}
+
+.project-menu-trigger .caret {
+	color: var(--muted2);
+	font-size: 10px;
+}
+
+.project-dirty-dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: #f5b453;
+	flex: none;
+}
+
+.project-menu {
+	position: absolute;
+	top: calc(100% + 6px);
+	left: 0;
+	z-index: 60;
+	display: flex;
+	flex-direction: column;
+	min-width: 200px;
+	padding: 4px;
+	background: var(--panel);
+	border: 1px solid var(--line2);
+	border-radius: 10px;
+	box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
+}
+
+.project-menu button {
+	text-align: left;
+	padding: 8px 10px;
+	border: none;
+	border-radius: 7px;
+	background: none;
+	color: var(--fg);
+	font-size: 12px;
+	cursor: pointer;
+}
+
+.project-menu button:hover {
+	background: var(--hover);
+}
+
+/* Project header at the top of the hierarchy column (Project > Scene). */
+.hierarchy-project {
+	display: flex;
+	align-items: center;
+	gap: 7px;
+	padding: 9px 12px 8px;
+	border-bottom: 1px solid var(--line);
+}
+
+.hierarchy-project-label {
+	font-size: 10px;
+	font-weight: 700;
+	letter-spacing: .08em;
+	text-transform: uppercase;
+	color: var(--muted2);
+}
+
+.hierarchy-project strong {
+	flex: 1;
+	font-size: 12.5px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.hierarchy-project button {
+	padding: 3px 9px;
+	font-size: 11px;
+	border-radius: 6px;
+	border: 1px solid var(--line2);
+	background: var(--card2);
+	color: var(--fg);
+	cursor: pointer;
+}
+
+.hierarchy-project button:hover {
+	border-color: var(--accent);
+}
+
+/* Project browser modal */
+.project-browser-backdrop {
+	position: fixed;
+	inset: 0;
+	z-index: 200;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(0, 0, 0, .55);
+}
+
+.project-browser {
+	width: min(560px, 92vw);
+	max-height: 80vh;
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+	padding: 16px;
+	background: var(--panel);
+	border: 1px solid var(--line2);
+	border-radius: 14px;
+	box-shadow: 0 16px 60px rgba(0, 0, 0, .6);
+	overflow-y: auto;
+}
+
+.project-browser-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	font-size: 15px;
+}
+
+.project-browser-head .x {
+	background: none;
+	border: none;
+	color: var(--muted);
+	font-size: 16px;
+	cursor: pointer;
+	padding: 2px 6px;
+}
+
+.project-browser section {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.project-browser-section-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: .06em;
+	text-transform: uppercase;
+	color: var(--muted);
+}
+
+.project-browser-section-head .row-actions {
+	display: flex;
+	gap: 6px;
+}
+
+.project-browser-section-head button {
+	font-size: 10px;
+	padding: 2px 8px;
+	border-radius: 6px;
+	border: 1px solid var(--line2);
+	background: none;
+	color: var(--fg);
+	cursor: pointer;
+}
+
+.project-browser-empty {
+	font-size: 11px;
+	color: var(--muted2);
+	padding: 8px 10px;
+	background: var(--card2);
+	border-radius: 8px;
+}
+
+.project-browser-list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+}
+
+.project-browser-list li {
+	display: flex;
+	align-items: stretch;
+	gap: 4px;
+}
+
+.project-browser-list li > button:first-child {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 10px;
+	padding: 8px 10px;
+	border: 1px solid var(--line);
+	border-radius: 8px;
+	background: var(--card2);
+	color: var(--fg);
+	font-size: 12px;
+	cursor: pointer;
+	text-align: left;
+}
+
+.project-browser-list li > button:first-child span {
+	font-size: 10px;
+	color: var(--muted2);
+	flex: none;
+}
+
+.project-browser-list li.active > button:first-child {
+	border-color: var(--accent);
+}
+
+.project-browser-list li > button:first-child:hover {
+	border-color: var(--accent);
+}
+
+.project-browser-list .del {
+	border: none;
+	background: none;
+	color: var(--muted2);
+	cursor: pointer;
+	padding: 0 6px;
+	font-size: 11px;
+}
+
+.project-browser-foot {
+	display: flex;
+	justify-content: space-between;
+	gap: 8px;
+}
+
+.project-browser-foot .btn {
+	flex: 1;
+}
+
 .locale-toggle {
 	display: inline-flex;
 	align-items: center;
@@ -398,7 +654,7 @@ select {
 	pointer-events: auto;
 }
 .vp-inset.shot {
-	aspect-ratio: 16 / 9;
+	aspect-ratio: var(--shot-aspect, 16 / 9);
 }
 .vp-inset-tag {
 	position: absolute;
@@ -723,56 +979,244 @@ select {
 .pose-studio.closing {
 	animation: studioOut .2s var(--ease) both;
 }
-.pose-studio:before {
-	content: "";
-	position: absolute;
-	left: 0;
-	right: 0;
-	top: 0;
-	height: 2px;
-	border-radius: 18px 18px 0 0;
-	background: linear-gradient(90deg, #2b3cf5, #4d7bff 50%, #79c9ff);
-	background-size: 200% 100%;
-	animation: stripeShift 6s linear infinite;
-	opacity: .9;
-}
 
-.studio-head {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-.studio-head span {
-	font-family: var(--display);
-	font-weight: 720;
-	font-size: 18px;
-	letter-spacing: -.025em;
-	color: var(--fg);
-}
-.studio-head .x {
-	background: none;
-	border: none;
-	color: var(--muted);
-	font-size: 17px;
-	cursor: pointer;
-	padding: 3px 8px;
-	border-radius: 8px;
-	transition: color var(--fast), background var(--fast);
+/* Compact pass: tighter chrome so more of the panel is pose tiles. Scoped
+   to the studio so global buttons elsewhere keep their rhythm. */
+.pose-studio {
+	gap: 8px;
+	padding: 10px;
 }
-.studio-head .x:hover {
-	color: var(--fg);
-	background: var(--card2);
+
+.pose-studio .studio-head span {
+	font-size: 13px;
+	font-weight: 650;
 }
 
-.studio-hint {
-	font-size: 11.5px;
-	color: var(--muted);
-	margin: -2px 0 0;
-	line-height: 1.45;
+.pose-studio .studio-actions {
+	flex-direction: row;
+	gap: 6px;
 }
 
-.studio-actions {
-	display: flex;
+.pose-studio .studio-actions .btn {
+	flex: 1;
+	width: auto;
+	height: 28px;
+	padding: 0 8px;
+	font-size: 11px;
+	font-weight: 600;
+}
+
+.pose-studio .studio-hint {
+	font-size: 10px;
+	margin: 0;
+	line-height: 1.35;
+}
+
+.pose-studio .studio-filters {
+	flex-wrap: nowrap;
+	overflow-x: auto;
+	gap: 4px;
+	scrollbar-width: none;
+}
+
+.pose-studio .studio-filters::-webkit-scrollbar {
+	display: none;
+}
+
+.pose-studio .studio-filters .btn {
+	flex: 0 0 auto;
+	width: auto;
+	min-width: 0;
+	height: 24px;
+	padding: 0 10px;
+	font-size: 10px;
+}
+
+.pose-studio .pose-grid {
+	gap: 6px;
+}
+
+/* Ghost (other characters') clips and pins on the timeline lanes: visible
+   for schedule awareness, never interactive. */
+.tl-chip.ghost {
+	opacity: 0.42;
+	pointer-events: none;
+	border-style: dashed;
+}
+
+.tl-chip-ghost-label {
+	font-size: 9px;
+	padding: 0 4px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: block;
+}
+
+.tl-marker.wp.ghost {
+	opacity: 0.42;
+	pointer-events: none;
+}
+
+/* ARDY row: duration + seed side by side (Motion tab compacting). */
+.ardy-row {
+	display: flex;
+	gap: 8px;
+}
+
+.ardy-row > * {
+	flex: 1;
+	min-width: 0;
+}
+
+/* Per-character motion layer status in the Motion tab. */
+.gen-layers {
+	list-style: none;
+	margin: 0;
+	padding: 4px 6px;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	background: var(--card2, rgba(255,255,255,.04));
+	border: 1px solid var(--line);
+	border-radius: 8px;
+}
+
+.gen-layers li {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 11px;
+	color: var(--muted);
+	padding: 2px 4px;
+	border-radius: 5px;
+}
+
+.gen-layers li.active {
+	color: var(--fg);
+	background: var(--hover, rgba(255,255,255,.06));
+}
+
+.gen-layers-name {
+	font-weight: 700;
+	color: var(--cyan, #5a9bd4);
+	width: 22px;
+	flex: none;
+}
+
+.gen-layers-state {
+	flex: 1;
+}
+
+.gen-layers-state.running { color: #f5b453; }
+.gen-layers-state.queued { color: var(--muted2); }
+.gen-layers-state.error { color: #e06c6c; }
+.gen-layers-state.loaded { color: #7bc98b; }
+
+.gen-layers li button {
+	background: none;
+	border: none;
+	color: var(--muted2);
+	cursor: pointer;
+	font-size: 10px;
+	padding: 0 2px;
+}
+
+/* Timeline track owner chip: which character's layer a Prompts/2D Root
+   track belongs to. */
+.tl-track-owner {
+	font-style: normal;
+	font-size: 9px;
+	font-weight: 700;
+	color: var(--cyan, #5a9bd4);
+	border: 1px solid var(--cyan, #5a9bd4);
+	border-radius: 4px;
+	padding: 0 3px;
+	margin-left: 4px;
+	vertical-align: 1px;
+}
+
+/* 2D Root leg speed readout: green-ish in the natural gait band, amber
+   outside it so a bad path is caught before generation. */
+.tl-path-speed {
+	font-style: normal;
+	font-size: 9px;
+	font-weight: 600;
+	color: #7bc98b;
+	margin-left: 6px;
+	vertical-align: 1px;
+}
+
+.tl-path-speed.warn {
+	color: #f5b453;
+}
+
+/* Docked variant: the panel lives in-flow at the bottom of the inspector
+   sidebar instead of floating over the shot pane. */
+.pose-studio.docked {
+	position: relative;
+	top: auto;
+	right: auto;
+	bottom: auto;
+	left: auto;
+	width: auto;
+	flex: none;
+	height: min(52vh, 560px);
+	z-index: 1;
+	margin: 8px 10px 10px;
+	border-radius: 10px;
+	box-shadow: none;
+}
+.pose-studio:before {
+	content: "";
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	height: 2px;
+	border-radius: 18px 18px 0 0;
+	background: linear-gradient(90deg, #2b3cf5, #4d7bff 50%, #79c9ff);
+	background-size: 200% 100%;
+	animation: stripeShift 6s linear infinite;
+	opacity: .9;
+}
+
+.studio-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+.studio-head span {
+	font-family: var(--display);
+	font-weight: 720;
+	font-size: 18px;
+	letter-spacing: -.025em;
+	color: var(--fg);
+}
+.studio-head .x {
+	background: none;
+	border: none;
+	color: var(--muted);
+	font-size: 17px;
+	cursor: pointer;
+	padding: 3px 8px;
+	border-radius: 8px;
+	transition: color var(--fast), background var(--fast);
+}
+.studio-head .x:hover {
+	color: var(--fg);
+	background: var(--card2);
+}
+
+.studio-hint {
+	font-size: 11.5px;
+	color: var(--muted);
+	margin: -2px 0 0;
+	line-height: 1.45;
+}
+
+.studio-actions {
+	display: flex;
 	flex-direction: column;
 	gap: 8px;
 }
@@ -797,8 +1241,8 @@ select {
 	min-height: 0;
 	overflow-y: auto;
 	display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: 10px;
+	grid-template-columns: 1fr 1fr 1fr;
+	gap: 8px;
 	align-content: start;
 	grid-auto-rows: min-content;
 	padding-right: 3px;
@@ -841,7 +1285,7 @@ select {
 	right: 0;
 	bottom: 0;
 	background: linear-gradient(transparent, #06060aeb);
-	font-size: 11px;
+	font-size: 10px;
 	font-weight: 700;
 	color: #fff;
 	text-align: center;
@@ -1051,7 +1495,11 @@ select {
 }
 
 .scene-list-item.active > button { background: rgba(87, 111, 221, .16); color: var(--fg); }
-.scene-document-icon { width: 8px; height: 10px; border: 1px solid #7284bd; border-radius: 1px; }
+.scene-document-icon {
+	width: 15px;
+	height: 15px;
+	color: #8fa8ff;
+}
 .scene-rename-input {
 	width: 100%;
 	height: 23px;
@@ -1114,8 +1562,10 @@ select {
 	flex: 0 0 20px;
 	display: grid;
 	place-items: center;
-	color: #7d8596;
-	font-size: 11px;
+	color: #929bad;
+	font-size: 14px;
+	font-weight: 700;
+	line-height: 1;
 	cursor: pointer;
 }
 
@@ -1134,26 +1584,22 @@ select {
 
 .hierarchy-icon {
 	flex: none;
-	width: 9px;
-	height: 9px;
-	border: 1px solid #65708b;
-	border-radius: 2px;
-	background: rgba(111, 127, 165, .12);
+	width: 15px;
+	height: 15px;
+	color: #82909d;
+	overflow: visible;
 }
 
-.hierarchy-icon.shot { border-radius: 50%; border-color: #8a9cff; box-shadow: inset 0 0 0 2px #222a52; }
-.hierarchy-icon.camera { border-color: #72a9ff; transform: skewX(-8deg); }
-.hierarchy-icon.character { border-radius: 50% 50% 3px 3px; border-color: #8ed4c0; }
-.hierarchy-icon.motion,
-.hierarchy-icon.clip,
-.hierarchy-icon.prompt { border-color: #7687ff; background: rgba(69, 88, 226, .3); }
-.hierarchy-icon.key { border-color: #ffb45f; transform: rotate(45deg) scale(.72); }
+.hierarchy-icon.scene { color: #8fa8ff; }
+.hierarchy-icon.camera { color: #e1a84b; }
+.hierarchy-icon.group,
+.hierarchy-icon.character { color: #82c9ad; }
 .hierarchy-icon.rig,
-.hierarchy-icon.bone { border-radius: 50%; border-color: #d39cff; }
-.hierarchy-icon.path { width: 11px; height: 5px; border-color: #60c7d0; border-radius: 999px; }
-.hierarchy-icon.environment { border-radius: 50%; border-color: #77a878; }
-.hierarchy-icon.props { border-color: #b8936b; }
-.hierarchy-icon.object { border-color: #d0a36f; background: rgba(188, 126, 63, .22); transform: rotate(45deg) scale(.78); }
+.hierarchy-icon.bone { color: #bd94d4; }
+.hierarchy-icon.environment { color: #75b692; }
+.hierarchy-icon.props,
+.hierarchy-icon.object { color: #d18b70; }
+.selected .hierarchy-icon { filter: brightness(1.2); }
 
 .hierarchy-label {
 	min-width: 0;
@@ -1827,6 +2273,16 @@ input[type=range]::-moz-range-thumb {
 	flex: none;
 }
 
+.sb-color {
+	width: 26px;
+	height: 25px;
+	padding: 1px;
+	border: 1px solid var(--line2);
+	border-radius: 8px;
+	background: #ffffff05;
+	cursor: pointer;
+}
+
 .cam-toggle {
 	width: 30px;
 	height: 25px;
@@ -2633,6 +3089,61 @@ input[type=range]::-moz-range-thumb {
 }
 
 
+.tl-motion-clip {
+	box-sizing: border-box;
+	position: absolute;
+	top: 50%;
+	height: min(20px, calc(100% - 6px));
+	transform: translateY(-50%);
+	left: calc(var(--tl-f-start) * 100%);
+	width: calc((var(--tl-f-end) - var(--tl-f-start)) * 100%);
+	display: flex;
+	align-items: center;
+	padding: 0 8px;
+	background: linear-gradient(103deg, rgba(126, 208, 143, .28), rgba(126, 208, 143, .14));
+	border: 1px solid rgba(126, 208, 143, .45);
+	border-radius: 5px;
+	color: #9fe0a7;
+	font-size: 9px;
+	font-weight: 600;
+	letter-spacing: .02em;
+	white-space: nowrap;
+	overflow: hidden;
+	pointer-events: none; /* passive: IK markers on this lane stay clickable */
+}
+
+.tl-motion-clip.trimming {
+	background: linear-gradient(103deg, rgba(126, 208, 143, .45), rgba(126, 208, 143, .25));
+	border-color: rgba(126, 208, 143, .8);
+}
+
+.tl-motion-clip-label {
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: center;
+}
+
+/* the strip body stays click-through (IK markers live on this lane); only
+   the trim handles take the pointer */
+.tl-motion-clip-handle {
+	pointer-events: auto;
+	flex: none;
+	width: 8px;
+	align-self: stretch;
+	margin: 0;
+	padding: 0;
+	border: none;
+	background: rgba(126, 208, 143, .55);
+	border-radius: 3px;
+	cursor: ew-resize;
+	touch-action: none;
+}
+
+.tl-motion-clip-handle:hover {
+	background: rgba(126, 208, 143, .95);
+}
+
 .tl-chip {
 	box-sizing: border-box;
 	position: absolute;
@@ -3735,30 +4246,19 @@ input[type=range]::-moz-range-thumb {
 }
 
 .hierarchy-icon {
-	border-color: #71818d;
-	background: rgba(255, 255, 255, .04);
-}
-
-.hierarchy-icon.shot {
-	border-color: #3a7cbf;
-	box-shadow: inset 0 0 0 2px #3c3c3c;
+	color: #82909d;
 }
 
-.hierarchy-icon.camera { border-color: #d4972d; }
-.hierarchy-icon.character { border-color: #6f9f86; }
-.hierarchy-icon.motion,
-.hierarchy-icon.clip,
-.hierarchy-icon.prompt {
-	border-color: #3a7cbf;
-	background: rgba(58, 124, 191, .13);
-}
-.hierarchy-icon.key { border-color: #d65f55; }
+.hierarchy-icon.scene { color: #78a8dc; }
+.hierarchy-icon.camera { color: #d9a34a; }
+.hierarchy-icon.group,
+.hierarchy-icon.character { color: #73aa8d; }
 .hierarchy-icon.rig,
-.hierarchy-icon.bone { border-color: #8a759d; }
-.hierarchy-icon.path { border-color: #6f9f86; }
-.hierarchy-icon.environment { border-color: #6f9f86; }
+.hierarchy-icon.bone { color: #a98cc0; }
+.hierarchy-icon.environment { color: #73aa8d; }
 .hierarchy-icon.props,
-.hierarchy-icon.object { border-color: #c7836f; }
+.hierarchy-icon.object { color: #cb826b; }
+.selected .hierarchy-icon { filter: brightness(1.25); }
 
 .inspector-scroll {
 	background: #282828;
@@ -5090,6 +5590,90 @@ input[type=range]::-moz-range-thumb {
 	font-size: 11px;
 }
 
+.assets-pane {
+	height: var(--timeline-height);
+	min-height: 110px;
+	max-height: 58vh;
+	overflow-y: auto;
+	padding: 10px 12px;
+	background: var(--panel);
+}
+
+.assets-grid {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+}
+
+.asset-card {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 6px;
+	width: 108px;
+	padding: 12px 8px 10px;
+	background: var(--panel2, #1d1d1f);
+	border: 1px solid var(--line);
+	border-radius: 8px;
+	color: var(--fg);
+	cursor: grab;
+	user-select: none;
+	touch-action: none;
+}
+
+.asset-card:hover {
+	border-color: var(--accent, #d8a24a);
+}
+
+.asset-card:active {
+	cursor: grabbing;
+}
+
+.asset-card-swatch {
+	width: 44px;
+	height: 44px;
+	border-radius: 10px;
+	background: #f2eee6;
+}
+
+.asset-card-swatch[data-model="x-bot-tpose"] {
+	background: #faf8f2;
+	border: 1px solid #d8d2c4;
+}
+
+.asset-card-label {
+	font-size: 12px;
+	font-weight: 600;
+}
+
+.asset-card-kind {
+	font-size: 10px;
+	color: var(--muted2);
+}
+
+.asset-drag-ghost {
+	position: fixed;
+	z-index: 1000;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 12px;
+	border-radius: 8px;
+	background: var(--panel2, #1d1d1f);
+	border: 1px solid var(--accent, #d8a24a);
+	color: var(--fg);
+	font-size: 12px;
+	pointer-events: none;
+	transform: translate(-50%, -120%);
+	opacity: 0.92;
+}
+
+.asset-drag-ghost .asset-card-swatch {
+	width: 22px;
+	height: 22px;
+	border-radius: 6px;
+}
+
 .console-empty {
 	margin: 8px 4px;
 	color: var(--muted2);
@@ -5232,11 +5816,24 @@ input[type=range]::-moz-range-thumb {
 }
 
 /* Unity pane tabs (Scene / PlayView) — the pane's title strip */
-.pane-tabs {
+.viewport-titlebar {
 	position: absolute;
 	top: 0;
 	left: 0;
+	right: 0;
 	z-index: 8;
+	height: 27px;
+	display: flex;
+	align-items: stretch;
+	min-width: 0;
+	overflow: hidden;
+	background: var(--panel);
+	border-bottom: 1px solid var(--line);
+}
+
+.pane-tabs {
+	position: static;
+	flex: none;
 	display: flex;
 }
 
@@ -5245,7 +5842,7 @@ input[type=range]::-moz-range-thumb {
 	padding: 0 14px;
 	border: 0;
 	border-right: 1px solid var(--line);
-	border-bottom: 1px solid var(--line);
+	border-bottom: 2px solid transparent;
 	background: var(--panel);
 	color: var(--muted);
 	font: inherit;
@@ -5261,7 +5858,7 @@ input[type=range]::-moz-range-thumb {
 .pane-tabs button.active {
 	background: #232323;
 	color: var(--fg);
-	border-bottom-color: #232323;
+	border-bottom-color: #3a7cbf;
 }
 
 /* the Shot/Top-View toggle sits right of the pane tabs in Scene view */
@@ -5602,45 +6199,303 @@ input[type=range]::-moz-range-thumb {
 	margin: 0;
 }
 
-.foldout-head:hover {
-	background: rgba(255, 255, 255, .04);
+.foldout-head:hover {
+	background: rgba(255, 255, 255, .04);
+}
+
+.foldout-arrow {
+	font-size: 8px;
+	width: 12px;
+}
+
+.foldout-body {
+	padding: 4px 12px 0;
+}
+
+/* property rows: label left, value right, 22px tall */
+.row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-height: 22px;
+	margin: 3px 0;
+	font-size: 11px;
+}
+
+.row > span:first-child {
+	width: 84px;
+	flex: none;
+	color: var(--muted);
+	font-size: 11px;
+}
+
+.row .val {
+	width: auto;
+	min-width: 34px;
+	font-size: 11px;
+}
+
+/* sliders hug their row */
+input[type=range] {
+	height: 3px;
+}
+
+.multimodel-card {
+	padding: 8px;
+	border: 1px solid rgba(58, 124, 191, .38);
+	background: linear-gradient(180deg, rgba(58, 124, 191, .12), rgba(255, 255, 255, .025));
+	border-radius: 3px;
+}
+
+.multimodel-card-head {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 8px;
+}
+
+.multimodel-card-head strong,
+.multimodel-card-head span {
+	display: block;
+}
+
+.multimodel-card-head strong {
+	font-size: 11px;
+	color: #dce7ff;
+}
+
+.multimodel-card-head div > span {
+	margin-top: 2px;
+	color: var(--muted);
+	font-size: 9px;
+}
+
+.multimodel-status {
+	padding: 2px 5px;
+	border: 1px solid var(--line);
+	color: var(--muted);
+	font-family: var(--mono);
+	font-size: 8px;
+	letter-spacing: .08em;
+}
+
+.multimodel-status.ready {
+	border-color: rgba(126, 208, 143, .55);
+	color: #9fe0a7;
+}
+
+.multimodel-status.error {
+	border-color: rgba(229, 72, 77, .65);
+	color: #ff9b9f;
+}
+
+.multimodel-source-row,
+.multimodel-url-row {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	margin-top: 8px;
+}
+
+.multimodel-input-block {
+	margin-top: 9px;
+	padding: 8px;
+	border: 1px solid rgba(255, 255, 255, .1);
+	background: rgba(0, 0, 0, .12);
+}
+
+.multimodel-input-block + .multimodel-input-block {
+	margin-top: 6px;
+}
+
+.multimodel-input-label {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: 8px;
+}
+
+.multimodel-input-label strong {
+	color: #c9d8f7;
+	font-size: 10px;
+	font-weight: 600;
+}
+
+.multimodel-input-label span {
+	color: var(--muted2);
+	font-size: 8px;
+	white-space: nowrap;
+}
+
+.multimodel-file-input {
+	display: none;
+}
+
+.multimodel-file-name {
+	min-width: 0;
+	overflow: hidden;
+	color: var(--muted2);
+	font-size: 9px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.multimodel-url-input {
+	display: block;
+	box-sizing: border-box;
+	width: 100%;
+	margin-top: 7px;
+	height: 26px;
+	padding: 2px 8px;
+	border: 1px solid var(--line);
+	background: var(--card2);
+	color: var(--fg);
+	font-family: var(--mono);
+	font-size: 10px;
+}
+
+.multimodel-url-input::placeholder {
+	color: var(--muted2);
+}
+
+.multimodel-url-input:focus {
+	outline: none;
+	border-color: var(--accent);
+	box-shadow: 0 0 0 1px var(--accent);
+}
+
+.multimodel-url-actions {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	margin-top: 6px;
+}
+
+.multimodel-url-actions .btn {
+	flex: 1;
+}
+
+.multimodel-status.busy {
+	border-color: rgba(126, 160, 224, .55);
+	color: #a8c4f2;
+}
+
+.multimodel-progress {
+	display: flex;
+	align-items: center;
+	gap: 7px;
+	margin-top: 9px;
+}
+
+.multimodel-progress-track {
+	flex: 1;
+	height: 4px;
+	background: rgba(0, 0, 0, .35);
+	overflow: hidden;
+}
+
+.multimodel-progress-bar {
+	height: 100%;
+	width: 0;
+	background: var(--accent);
+	transition: width .12s linear;
+}
+
+.multimodel-progress-bar.indeterminate {
+	width: 35%;
+	animation: multimodel-slide 1.1s ease-in-out infinite;
+}
+
+@keyframes multimodel-slide {
+	0% { transform: translateX(-100%); }
+	100% { transform: translateX(300%); }
+}
+
+.multimodel-progress span {
+	flex: none;
+	min-width: 62px;
+	text-align: right;
+	color: var(--muted2);
+	font-family: var(--mono);
+	font-size: 9px;
+}
+
+.multimodel-error {
+	margin: 9px 0 0;
+	padding: 6px 8px;
+	border: 1px solid rgba(229, 72, 77, .45);
+	background: rgba(229, 72, 77, .1);
+	color: #ff9b9f;
+	font-size: 9.5px;
+	line-height: 1.45;
+}
+
+.multimodel-receipt {
+	display: flex;
+	gap: 8px;
+	margin-top: 9px;
+	padding: 7px;
+	border: 1px solid rgba(126, 208, 143, .3);
+	background: rgba(126, 208, 143, .07);
+}
+
+.multimodel-preview {
+	flex: none;
+	width: 76px;
+	height: 44px;
+	object-fit: cover;
+	background: #000;
+	border: 1px solid rgba(255, 255, 255, .12);
+}
+
+.multimodel-receipt-body {
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.multimodel-receipt-body strong {
+	overflow: hidden;
+	color: #dbe8ff;
+	font-size: 10px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
-.foldout-arrow {
-	font-size: 8px;
-	width: 12px;
+.multimodel-receipt-body span {
+	color: var(--muted2);
+	font-family: var(--mono);
+	font-size: 9px;
 }
 
-.foldout-body {
-	padding: 4px 12px 0;
+.multimodel-receipt-timeline {
+	color: #9fe0a7 !important;
 }
 
-/* property rows: label left, value right, 22px tall */
-.row {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	min-height: 22px;
-	margin: 3px 0;
-	font-size: 11px;
+.multimodel-extract {
+	margin-top: 9px;
 }
 
-.row > span:first-child {
-	width: 84px;
-	flex: none;
-	color: var(--muted);
-	font-size: 11px;
+.multimodel-extract .btn {
+	width: 100%;
 }
 
-.row .val {
-	width: auto;
-	min-width: 34px;
-	font-size: 11px;
+.multimodel-extract-receipt {
+	margin: 8px 0 0;
+	padding: 6px 8px;
+	border: 1px solid rgba(126, 208, 143, .3);
+	background: rgba(126, 208, 143, .07);
+	color: #9fe0a7;
+	font-size: 9.5px;
+	line-height: 1.45;
 }
 
-/* sliders hug their row */
-input[type=range] {
-	height: 3px;
+.multimodel-note {
+	margin: 8px 0 0;
+	color: var(--muted2);
+	font-size: 9px;
+	line-height: 1.45;
 }
 
 /* readouts: single quiet line */
@@ -5865,22 +6720,26 @@ input[type=range] {
 	border-radius: 2px;
 }
 
-/* ------------------------------------------------ Unity scene tools overlay --- */
-/* Unity puts the transform tools in the scene view's top-left corner, under
-   the pane tab — not in a window toolbar. */
+/* ------------------------------------------------ Unity scene title bar --- */
+/* View tabs and their context tools share one uninterrupted horizontal bar. */
 .editor-toolbar.scene-tools {
-	position: absolute;
-	top: 27px;
-	left: 0;
-	z-index: 8;
+	position: static;
+	flex: 1;
+	height: 27px;
 	display: flex;
+	justify-content: flex-start;
 	gap: 0;
+	min-width: 0;
+	overflow-x: auto;
+	overflow-y: hidden;
+	scrollbar-width: none;
 	background: var(--panel);
-	border-right: 1px solid var(--line);
-	border-bottom: 1px solid var(--line);
 }
 
+.editor-toolbar.scene-tools::-webkit-scrollbar { display: none; }
+
 .editor-toolbar.scene-tools .tool-switch {
+	flex: none;
 	border: 0;
 	border-radius: 0;
 	padding: 0;
@@ -5896,6 +6755,24 @@ input[type=range] {
 	background: transparent;
 }
 
+.editor-toolbar.scene-tools .tool-switch button {
+	width: 29px;
+	padding: 0;
+	gap: 0;
+	font-size: 0;
+	justify-content: center;
+}
+
+.editor-toolbar.scene-tools .tool-switch .tool-icon {
+	width: 14px;
+	height: 14px;
+}
+
+.editor-toolbar.scene-tools .snap-switch {
+	padding: 0 6px;
+	font-size: 8px;
+}
+
 .editor-toolbar.scene-tools .tool-switch button.active {
 	background: #2d5c8a;
 	color: #fff;
@@ -5906,6 +6783,122 @@ input[type=range] {
 	color: var(--fg);
 }
 
+.viewport-toolbar-separator {
+	flex: 0 0 1px;
+	align-self: stretch;
+	background: var(--line);
+}
+
+.editor-toolbar.scene-tools .settings-separator {
+	margin-left: auto;
+}
+
+.viewport-toolbar-field,
+.viewport-fov-control {
+	flex: none;
+	height: 26px;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	padding: 0 4px;
+	border-right: 1px solid var(--line);
+	color: #9aa0a6;
+	font-size: 9px;
+	white-space: nowrap;
+}
+
+.viewport-toolbar-field > span { display: none; }
+
+.viewport-toolbar-field select {
+	height: 21px;
+	min-width: 0;
+	padding: 0 18px 0 5px;
+	border: 1px solid #494949;
+	border-radius: 2px;
+	background: #242424;
+	color: #dedede;
+	font: inherit;
+	font-size: 10px;
+}
+
+.viewport-toolbar-field.shot-field select { width: 92px; }
+.viewport-toolbar-field.ratio-field select { width: 64px; }
+
+.viewport-fov-control input {
+	width: 54px;
+	accent-color: #4b8bc4;
+}
+
+.viewport-fov-control output {
+	min-width: 25px;
+	color: #efefef;
+	font-size: 10px;
+	text-align: right;
+}
+
+.viewport-fov-control small {
+	color: #9aa0a6;
+	font-size: 9px;
+}
+
+.viewport-toolbar-spacer {
+	display: none;
+}
+
+.editor-toolbar.scene-tools > button,
+.editor-toolbar.play-tools > button {
+	flex: none;
+	height: 26px;
+	padding: 0 6px;
+	border: 0;
+	border-right: 1px solid var(--line);
+	background: transparent;
+	color: #bdbdbd;
+	font: inherit;
+	font-size: 9px;
+	cursor: pointer;
+	white-space: nowrap;
+}
+
+.editor-toolbar.scene-tools > button:hover,
+.editor-toolbar.play-tools > button:hover {
+	background: #363636;
+	color: #fff;
+}
+
+.editor-toolbar.play-tools > button:disabled {
+	opacity: .38;
+	cursor: default;
+}
+
+.editor-toolbar.play-tools {
+	position: static;
+	flex: 1;
+	min-width: 0;
+	height: 27px;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 0;
+	background: var(--panel);
+}
+
+.viewport-readout {
+	flex: none;
+	height: 26px;
+	display: inline-flex;
+	align-items: center;
+	padding: 0 8px;
+	border-right: 1px solid var(--line);
+	color: #b7b7b7;
+	font-size: 9px;
+	white-space: nowrap;
+}
+
+.editor-toolbar.play-tools > button.recording {
+	color: #ff8d86;
+}
+
 /* ----------------------------------------------------- Unity axis colors --- */
 /* X red / Y green / Z blue — Unity's axis colour-coding (class-Transform). */
 .vec3-row .number-field:nth-of-type(1) .axis { color: #e5484d; }
@@ -5914,8 +6907,8 @@ input[type=range] {
 
 /* ----------------------------------------------------- Unity tree polish --- */
 .hierarchy-toggle {
-	font-size: 8px;
-	color: #8a8a8a;
+	font-size: 11px;
+	color: #a0a0a0;
 }
 
 .hierarchy-row-wrap {
@@ -6438,3 +7431,177 @@ input[type=range] {
 .inspector-scroll > .card {
 	flex-shrink: 0;
 }
+
+/* ---------------------------------------------------------- background --- */
+/* The matte editor: the picture with everything that will be removed painted
+   violet. Purple never occurs in a photographed set, so a stray purple blob on
+   the subject — or a patch of wall that stayed its own colour — reads at a
+   glance, which a finished cutout cannot show you. */
+
+.matte-editor {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	margin: 6px 0 2px;
+}
+
+.matte-canvas {
+	display: block;
+	/* A stage, not a framed picture: the canvas fills this box and paints its
+	   own ground, so the picture sits ON it and nothing outside the canvas can
+	   crop the picture once it is zoomed past fit. */
+	width: 100%;
+	height: 240px;
+	background: #141819;
+	border: 1px solid var(--line);
+	border-radius: 3px;
+	touch-action: none;
+	cursor: crosshair;
+}
+
+.presets.matte-modes {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+}
+
+/* ------------------------------------------------------------ drop it --- */
+/* A picture dropped on the Props branch, the Props inspector or the shot view
+   becomes a cutout. A drop zone that gives no sign it is armed reads as dead
+   area, so each one lights its own edge while a file is over it. */
+
+.props-drop {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	border: 1px dashed transparent;
+	border-radius: 4px;
+	padding: 2px;
+	transition: border-color 120ms ease, background 120ms ease;
+}
+
+.props-drop[data-drop="over"],
+.hierarchy-row-wrap[data-drop="over"] {
+	border-color: var(--accent, #e7b557);
+	background: rgba(231, 181, 87, 0.1);
+}
+
+.hierarchy-row-wrap[data-drop="over"] {
+	border: 1px dashed var(--accent, #e7b557);
+	border-radius: 3px;
+}
+
+.viewport[data-drop="over"] {
+	outline: 2px dashed var(--accent, #e7b557);
+	outline-offset: -6px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.props-drop { transition: none; }
+}
+
+/* The matte editor's two dials. A bare range in a dark panel is nearly
+   invisible — no accent, intrinsic width, no label alignment — so both get a
+   real row: name, a full-width track, and a box you can type an exact number
+   into. Tolerance especially: 0.18 and 0.22 are different answers, and a drag
+   along an unlabelled track cannot tell you which one you have. */
+
+.matte-slider {
+	display: grid;
+	grid-template-columns: auto 1fr 4.6rem;
+	align-items: center;
+	gap: 10px;
+	margin: 8px 0;
+}
+
+.matte-slider label {
+	font-size: 11.5px;
+	color: var(--muted);
+}
+
+.matte-slider input[type="range"] {
+	width: 100%;
+	min-width: 0;
+	accent-color: var(--accent);
+}
+
+.matte-slider input[type="number"] {
+	width: 100%;
+	padding: 5px 6px;
+	background: var(--card2);
+	border: 1px solid var(--line);
+	border-radius: 4px;
+	color: var(--fg);
+	font-size: 12px;
+	font-variant-numeric: tabular-nums;
+	text-align: right;
+}
+
+.btn.matte-apply {
+	margin-top: 4px;
+}
+
+.btn.matte-apply[disabled] {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.inspector-hint.matte-state {
+	padding: 6px 8px;
+	border-left: 2px solid var(--accent);
+	background: var(--card2);
+	border-radius: 0 3px 3px 0;
+}
+
+
+/* The matte tools read as two hands: what the brush does on the left, what to
+   do about what it did on the right. Clear sits under Undo/Redo because it is
+   the same kind of act — taking work back — only all of it.
+
+   The buttons are one fixed size and the SPACE between the two groups is what
+   flexes, so the panel can be dragged wider without five buttons growing into
+   five different shapes. */
+
+.matte-tools {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 12px;
+	margin: 8px 0;
+}
+
+.matte-history {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	gap: 6px;
+}
+
+.matte-tools .presets.matte-modes {
+	display: flex;
+	flex-wrap: nowrap;
+	gap: 6px;
+	margin: 0;
+}
+
+.matte-tools .presets.matte-modes button {
+	/* Fixed width, centred label: the panel resizes by moving the two groups
+	   apart, never by restyling five buttons into five shapes. */
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex: 0 0 auto;
+	width: 4rem;
+	padding: 9px 2px;
+	font-size: 11.5px;
+	line-height: 1.2;
+	text-align: center;
+	white-space: nowrap;
+}
+
+/* Undo, redo and clear are icons — a symbol the width of a glyph, not a word
+   that has to be read. They keep their names in the tooltip. */
+.matte-tools .presets.matte-icons button {
+	width: 2.3rem;
+	font-size: 13px;
+}