cozyclay 1.10.0 → 2.0.2

package/src/styles.css

@@ -1,37 +1,78 @@
-@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-latin.woff2) format("woff2")}
+@layer tokens, legacy, shell, regions;
 
+@font-face {
+	font-family: "IBM Plex Sans";
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url("../fonts/ibm-plex-sans-400-latin.woff2") format("woff2");
+}
+
+@font-face {
+	font-family: "IBM Plex Sans";
+	font-style: normal;
+	font-weight: 500;
+	font-display: swap;
+	src: url("../fonts/ibm-plex-sans-500-latin.woff2") format("woff2");
+}
+
+@font-face {
+	font-family: "IBM Plex Sans";
+	font-style: normal;
+	font-weight: 600;
+	font-display: swap;
+	src: url("../fonts/ibm-plex-sans-600-latin.woff2") format("woff2");
+}
+
+@font-face {
+	font-family: "JetBrains Mono";
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url("../fonts/jetbrains-mono-400-latin.woff2") format("woff2");
+}
+
+@font-face {
+	font-family: "JetBrains Mono";
+	font-style: normal;
+	font-weight: 500;
+	font-display: swap;
+	src: url("../fonts/jetbrains-mono-500-latin.woff2") format("woff2");
+}
+
+@layer legacy {
 /* Cozy Clay uses one neutral grotesk family across its editing surfaces.
    Monospace is reserved for coordinates, frame values and machine status. */
 
 :root {
-	--bg: #1e1e1e;
-	--bg-grad: linear-gradient(145deg, #1e1e1e 0%, #1e1e1e 100%);
-	--panel: #2c2c2c;
-	--card: #383838;
-	--card2: rgba(255, 255, 255, .04);
-	--hover: rgba(255, 255, 255, .06);
-	--line: #1a1a1a;
-	--line2: #3c3c3c;
-	--track: #3a3a3a;
-	--fg: #d2d2d2;
-	--muted: #9a9a9a;
-	--muted2: #6f6f6f;
-	--accent: #3a7cbf;
-	--accent-2: #2d5c8a;
-	--cyan: #5a9bd4;
-	--accent-soft: rgba(45, 92, 138, .35);
-	--accent-ring: rgba(58, 124, 191, .5);
-	--on-accent: #ffffff;
-	--grad: linear-gradient(103deg, #2d5c8a 0%, #2d5c8a 100%);
-	--grad-soft: linear-gradient(103deg, #2d5c8a, #3a7cbf);
-	--display: "Inter", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
-	--sans: "Inter", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
-	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-	--radius: 2px;
+	--bg: var(--surface-0);
+	--bg-grad: var(--surface-0);
+	--panel: var(--surface-panel);
+	--card: var(--surface-raised);
+	--card2: var(--field);
+	--hover: var(--surface-active);
+	--line: var(--surface-0);
+	--line2: var(--row-divider);
+	--track: var(--surface-bar);
+	--fg: var(--text-1);
+	--muted: var(--text-2);
+	--muted2: var(--text-3);
+	--accent: var(--select);
+	--accent-2: var(--primary);
+	--cyan: var(--camera);
+	--accent-soft: var(--select-tint);
+	--accent-ring: var(--select-tint);
+	--on-accent: var(--text-selected);
+	--grad: var(--primary);
+	--grad-soft: var(--primary);
+	--display: var(--sans);
+	--sans: "IBM Plex Sans", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
+	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+	--radius: var(--r-1);
 	--shadow: 0 1px 2px rgba(0, 0, 0, .4);
 	--shadow-md: 0 5px 16px rgba(0, 0, 0, .5);
 	--shadow-lg: 0 14px 34px rgba(0, 0, 0, .6);
-	--glow: 0 0 0 1px rgba(58, 124, 191, .45);
+	--glow: 0 0 0 1px var(--select-tint);
 	--ease: cubic-bezier(.22, .68, .2, 1);
 	--spring: cubic-bezier(.34, 1.4, .5, 1);
 	--fast: .14s;
@@ -56,41 +97,6 @@
 	font-family: var(--sans);
 	padding: 24px;
 }
-.crash-card {
-	max-width: 440px;
-	background: var(--panel);
-	border: 1px solid var(--line2);
-	border-radius: 10px;
-	padding: 28px;
-	color: var(--fg);
-	text-align: center;
-}
-.crash-card h1 { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
-.crash-card p { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 14px; }
-.crash-card code {
-	display: block;
-	background: var(--card);
-	border: 1px solid var(--line);
-	border-radius: 6px;
-	padding: 10px;
-	font-family: var(--mono);
-	font-size: 11px;
-	color: #e08a7a;
-	text-align: left;
-	word-break: break-all;
-	margin-bottom: 18px;
-}
-.crash-card button {
-	background: var(--accent);
-	color: #fff;
-	border: 0;
-	border-radius: 6px;
-	padding: 9px 22px;
-	font-size: 14px;
-	font-weight: 600;
-	cursor: pointer;
-}
-.crash-card button:hover { filter: brightness(1.12); }
 
 body,
 #root {
@@ -124,12 +130,12 @@ select {
 	height: 11px;
 }
 ::-webkit-scrollbar-thumb {
-	background: #4a4a4a;
+	background: var(--lg-4a4a4a, #4a4a4a);
 	border-radius: 8px;
 	border: 3px solid var(--panel);
 }
 ::-webkit-scrollbar-thumb:hover {
-	background: #5c5c5c;
+	background: var(--lg-5c5c5c, #5c5c5c);
 }
 ::-webkit-scrollbar-track {
 	background: rgba(231, 181, 87, .16);
@@ -164,29 +170,6 @@ select {
 	animation-play-state: paused;
 }
 
-.logo {
-	display: flex;
-	align-items: center;
-	justify-self: start;
-}
-
-.topbar-actions {
-	grid-column: 3;
-	justify-self: end;
-	display: flex;
-	align-items: center;
-	gap: 6px;
-}
-
-.project-actions {
-	display: inline-flex;
-	align-items: center;
-	gap: 5px;
-	margin-right: 4px;
-	padding-right: 10px;
-	border-right: 1px solid var(--line2);
-}
-
 .topbar-action {
 	min-height: 28px;
 	padding: 3px 10px;
@@ -215,17 +198,6 @@ select {
 	cursor: not-allowed;
 }
 
-.project-save-action {
-	background: var(--accent);
-	border-color: var(--accent);
-	color: #20180d;
-}
-
-.project-save-action:hover:not(:disabled) {
-	background: #f2c56d;
-	border-color: #f2c56d;
-}
-
 .project-export-action.recording {
 	border-color: #e87878;
 	color: #ffb1b1;
@@ -384,84 +356,6 @@ select {
 	box-shadow: 0 22px 80px rgba(0, 0, 0, .7);
 }
 
-.project-browser-intro {
-	margin: -4px 0 2px;
-	font-size: 12px;
-	line-height: 1.55;
-	color: var(--muted);
-}
-
-/* The first-run sheet gives a new author one obvious starting action and a
- * small mental model of the editor before the full studio is opened. */
-.beginner-start {
-	display: grid;
-	gap: 16px;
-	padding: 16px;
-	border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line2));
-	border-radius: 12px;
-	background: color-mix(in srgb, var(--accent) 7%, var(--panel));
-}
-
-.beginner-start-actions {
-	display: flex;
-	gap: 10px;
-	align-items: center;
-}
-
-.beginner-create {
-	min-height: 42px;
-	padding-inline: 18px;
-	font-size: 13px;
-}
-
-.beginner-open {
-	min-height: 42px;
-}
-
-.beginner-step-grid {
-	display: grid;
-	grid-template-columns: repeat(3, minmax(0, 1fr));
-	gap: 10px;
-}
-
-.beginner-step {
-	display: grid;
-	grid-template-columns: auto 1fr;
-	column-gap: 8px;
-	row-gap: 2px;
-	padding: 10px;
-	border: 1px solid var(--line2);
-	border-radius: 9px;
-	background: color-mix(in srgb, var(--panel) 82%, transparent);
-}
-
-.beginner-step b {
-	grid-row: span 2;
-	display: grid;
-	place-items: center;
-	width: 22px;
-	height: 22px;
-	border-radius: 50%;
-	background: var(--accent);
-	color: #fff;
-	font-size: 11px;
-}
-
-.beginner-step strong {
-	font-size: 12px;
-}
-
-.beginner-step span {
-	font-size: 10.5px;
-	line-height: 1.35;
-	color: var(--muted);
-}
-
-@media (max-width: 620px) {
-	.beginner-step-grid { grid-template-columns: 1fr; }
-	.beginner-start-actions { flex-direction: column; align-items: stretch; }
-}
-
 .project-name-dialog-backdrop {
 	position: fixed;
 	inset: 0;
@@ -527,7 +421,7 @@ select {
 	background: color-mix(in srgb, var(--panel) 96%, #101218);
 	border: 1px solid var(--accent);
 	border-radius: 14px;
-	box-shadow: 0 18px 58px rgba(0, 0, 0, .58), 0 0 0 1px rgba(255, 255, 255, .04);
+	box-shadow: 0 18px 58px rgba(0, 0, 0, .58), 0 0 0 1px rgba(var(--lg-ink-rgb, 255,255,255), .04);
 	animation: rise .28s var(--ease) both;
 }
 
@@ -737,13 +631,6 @@ select {
 	}
 }
 
-.project-browser-head {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	font-size: 15px;
-}
-
 .project-browser-head .x {
 	background: none;
 	border: none;
@@ -759,85 +646,10 @@ select {
 	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;
@@ -847,12 +659,6 @@ select {
 	font-size: 11px;
 }
 
-.project-browser-foot {
-	display: flex;
-	justify-content: space-between;
-	gap: 8px;
-}
-
 .project-browser-foot .btn {
 	flex: 1;
 }
@@ -860,19 +666,15 @@ select {
 .auto-color-hex {
 	align-self: center;
 	font-size: 10px;
-	color: var(--fg-dim, #9a9a9a);
+	color: var(--fg-dim, var(--lg-9a9a9a, #9a9a9a));
 	font-variant-numeric: tabular-nums;
 }
-
-.toolbar-balance {
-	min-width: 0;
-}
 .wordmark {
 	font-family: var(--display);
 	font-weight: 750;
 	font-size: 18px;
 	line-height: 1;
-	color: #d2d2d2;
+	color: var(--lg-d2d2d2, #d2d2d2);
 	letter-spacing: -.045em;
 }
 .wordmark span {
@@ -918,118 +720,6 @@ select {
 	text-decoration: underline;
 }
 
-.tagline {
-	font-size: 12.5px;
-	color: var(--muted);
-	position: relative;
-	padding-left: 17px;
-}
-.tagline:before {
-	content: "";
-	position: absolute;
-	left: 0;
-	top: 50%;
-	transform: translateY(-50%);
-	width: 1px;
-	height: 18px;
-	background: var(--line2);
-}
-
-.controls-menu {
-	position: relative;
-	justify-self: end;
-	z-index: 20;
-}
-
-.controls-menu summary {
-	height: 30px;
-	display: flex;
-	align-items: center;
-	gap: 7px;
-	padding: 0 10px 0 12px;
-	border: 1px solid rgba(255, 255, 255, .24);
-	border-radius: 6px;
-	background: #2c2c2c;
-	color: #52616b;
-	font-size: 10px;
-	font-weight: 700;
-	letter-spacing: .02em;
-	cursor: pointer;
-	list-style: none;
-	user-select: none;
-}
-
-.controls-menu summary::-webkit-details-marker {
-	display: none;
-}
-
-.controls-menu summary span {
-	font-size: 12px;
-	line-height: 1;
-	transition: transform var(--fast) var(--ease);
-}
-
-.controls-menu[open] summary {
-	color: #d2d2d2;
-	border-color: #3a7cbf;
-	background: #383838;
-}
-
-.controls-menu[open] summary span {
-	transform: rotate(180deg);
-}
-
-.controls-popover {
-	position: absolute;
-	top: calc(100% + 8px);
-	right: 0;
-	width: 250px;
-	padding: 12px;
-	border: 1px solid rgba(255, 255, 255, .24);
-	border-radius: 8px;
-	background: #2c2c2c;
-	box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
-}
-
-.controls-grid {
-	display: grid;
-	grid-template-columns: max-content 1fr;
-	align-items: center;
-	gap: 8px 12px;
-}
-
-.controls-grid kbd {
-	min-width: 46px;
-	padding: 3px 6px;
-	border: 1px solid rgba(255, 255, 255, .22);
-	border-bottom-width: 2px;
-	border-radius: 4px;
-	background: #232323;
-	color: #d2d2d2;
-	font: 650 9px var(--mono);
-	text-align: center;
-}
-
-.controls-grid span,
-.controls-popover p {
-	color: #9a9a9a;
-	font-size: 10.5px;
-	line-height: 1.35;
-}
-
-.controls-popover p {
-	margin: 0;
-}
-
-.controls-popover p strong {
-	display: block;
-	margin-bottom: 4px;
-	color: #d2d2d2;
-	font-size: 10px;
-	text-transform: uppercase;
-	letter-spacing: .08em;
-}
-
 .main {
 	flex: 1;
 	display: flex;
@@ -1076,7 +766,7 @@ select {
 	height: 100%;
 	max-width: 100%;
 	max-height: 100%;
-	border: 1px solid rgba(255, 255, 255, .38);
+	border: 1px solid rgba(var(--lg-ink-rgb, 255,255,255), .38);
 	border-radius: 0;
 	overflow: hidden;
 	box-shadow: var(--shadow-md);
@@ -1209,7 +899,8 @@ select {
 .app[data-tutorial-step="shot"] .tl-track.shots .tl-track-add,
 .app[data-tutorial-step="rail"] .tl-track.shots .tl-shot-block:not(.selected),
 .app[data-tutorial-step="rail"] .tl-rail-draw,
-.app[data-tutorial-step="play"] .vp-look-through {
+.app[data-tutorial-step="play"] .vp-look-through,
+.app[data-tutorial-step="play"] .dock-shot-look {
 	animation: tutorial-spotlight 1.5s var(--ease) infinite;
 	box-shadow: 0 0 0 3px var(--accent);
 }
@@ -1377,64 +1068,6 @@ select {
 	position: static;
 }
 
-.scene-loading {
-	position: absolute;
-	inset: auto 0 0 0;
-	z-index: 4;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 8px;
-	padding: 0 0 26px;
-	pointer-events: none;
-}
-.scene-loading-bar {
-	width: 180px;
-	height: 2px;
-	border-radius: 2px;
-	overflow: hidden;
-	background: var(--track);
-}
-.scene-loading-bar span {
-	display: block;
-	height: 100%;
-	background: var(--accent);
-	transition: width .25s var(--ease);
-}
-.scene-loading-label {
-	font-size: 11px;
-	letter-spacing: .06em;
-	text-transform: uppercase;
-	color: var(--muted);
-}
-
-.scene-error {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	z-index: 5;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 10px;
-	text-align: center;
-	padding: 24px;
-	background: var(--bg);
-}
-.scene-error-title {
-	font-size: 15px;
-	font-weight: 600;
-	color: var(--fg);
-}
-.scene-error-hint {
-	font-size: 13px;
-	color: var(--muted);
-	max-width: 320px;
-}
-
 /* Composition guides (Blender's camera display guides): chrome over the shot
    frame, never over exported pixels. The SVG letterboxes itself via its
    viewBox, so no JS measures the frame rect. */
@@ -1451,7 +1084,7 @@ select {
 }
 .shot-guides line,
 .shot-guides rect {
-	stroke: rgba(255, 255, 255, .34);
+	stroke: rgba(var(--lg-ink-rgb, 255,255,255), .34);
 	stroke-width: 1px;
 	fill: none;
 }
@@ -1463,7 +1096,7 @@ select {
 	border: 0;
 	padding: 1px 2px;
 	background: none;
-	color: rgba(255, 255, 255, .5);
+	color: rgba(var(--lg-ink-rgb, 255,255,255), .5);
 	cursor: pointer;
 	border-radius: 3px;
 }
@@ -1483,7 +1116,7 @@ select {
 	position: absolute;
 	width: 17px;
 	height: 17px;
-	border: 1.5px solid rgba(255, 255, 255, .3);
+	border: 1.5px solid rgba(var(--lg-ink-rgb, 255,255,255), .3);
 }
 .film-frame span:nth-child(1) {
 	top: 0;
@@ -1518,27 +1151,11 @@ select {
 .caption,
 .viewmode {
 	background: #0e0e108c;
-	border: 1px solid rgba(255, 255, 255, .1);
+	border: 1px solid rgba(var(--lg-ink-rgb, 255,255,255), .1);
 	backdrop-filter: blur(14px) saturate(1.2);
 	-webkit-backdrop-filter: blur(14px) saturate(1.2);
 }
 
-.hud {
-	position: absolute;
-	left: 16px;
-	top: 15px;
-	z-index: 6;
-	font-size: 11.5px;
-	color: #eeeef2;
-	padding: 6px 12px;
-	border-radius: 9px;
-	font-weight: 500;
-	display: flex;
-	align-items: center;
-	gap: 7px;
-	animation: rise var(--med) var(--ease) both;
-}
-
 .caption {
 	position: absolute;
 	left: 50%;
@@ -1563,86 +1180,11 @@ select {
 	border-color: rgba(229, 72, 77, .5);
 	color: #ffc9cb;
 }
-
-.viewmode {
-	position: static;
-	justify-self: center;
-	display: flex;
-	gap: 2px;
-	padding: 3px;
-	border-radius: 7px;
-	animation: none;
-}
-.viewmode button {
-	background: none;
-	border: none;
-	color: #dcdce2;
-	cursor: pointer;
-	height: 26px;
-	padding: 0 12px;
-	border-radius: 5px;
-	font-size: 10px;
-	font-weight: 700;
-	transition: all .16s var(--ease);
-}
-.viewmode button:hover {
-	color: #fff;
-}
-.viewmode button.active {
-	background: var(--grad);
-	color: #fff;
-	box-shadow: 0 3px 12px #3346ff66;
-}
-
-.puck-label {
-	/* the plan board is a drag surface; a label that takes the pointer kills it */
-	pointer-events: none;
-	background: #0e0d10d9;
-	border: 1px solid var(--line2);
-	color: #fff;
-	padding: 3px 10px;
-	border-radius: 20px;
-	font-size: 11px;
-	font-weight: 600;
-	white-space: nowrap;
-	-webkit-user-select: none;
-	user-select: none;
-	font-family: var(--sans);
-	box-shadow: 0 2px 8px #0006;
-}
-
-.pose-fab {
-	font-family: var(--sans);
-	font-size: 12.5px;
-	font-weight: 600;
-	color: #fff;
-	background: var(--grad);
-	border: none;
-	padding: 8px 16px;
-	border-radius: 22px;
-	cursor: pointer;
-	white-space: nowrap;
-	box-shadow: var(--glow), 0 4px 14px #0006;
-	transition: transform .14s var(--spring), box-shadow .15s ease;
-	animation: fabPop .28s var(--spring) both;
-}
-.pose-fab:hover {
-	transform: translateY(-2px) scale(1.03);
-	box-shadow: 0 10px 30px #3346ff80;
-}
-.pose-fab:active {
-	transform: scale(.96);
-}
-
-.pose-bar {
-	display: flex;
-	gap: 8px;
-}
-.pose-btns {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-}
+.viewmode button.active {
+	background: var(--grad);
+	color: #fff;
+	box-shadow: 0 3px 12px #3346ff66;
+}
 .pose-btns .btn.full {
 	margin-top: 0;
 }
@@ -1751,54 +1293,9 @@ select {
 	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;
+	background: var(--hover, rgba(var(--lg-ink-rgb, 255,255,255),.06));
 }
 
 .gen-layers-state.running { color: #f5b453; }
@@ -1806,15 +1303,6 @@ select {
 .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 {
@@ -2110,7 +1598,7 @@ select {
 	justify-content: space-between;
 	gap: 10px;
 	padding: 13px 14px 11px;
-	border-bottom: 1px solid rgba(255, 255, 255, .055);
+	border-bottom: 1px solid rgba(var(--lg-ink-rgb, 255,255,255), .055);
 }
 
 .hierarchy-heading > div { min-width: 0; }
@@ -2137,16 +1625,6 @@ select {
 	text-transform: uppercase;
 }
 
-.hierarchy-frame-status {
-	flex: none;
-	padding: 3px 7px;
-	border: 1px solid rgba(126, 154, 255, .16);
-	border-radius: 999px;
-	background: rgba(87, 111, 221, .08);
-	color: #9aa9d8;
-	font-size: 8px;
-}
-
 /* Disclosures that keep a once-in-a-while control out of the permanent
    furniture: a summary you can read, a panel that opens where it stands. */
 .object-colors-pop > summary {
@@ -2171,7 +1649,7 @@ select {
 	display: block;
 	width: 22px;
 	height: 22px;
-	border: 1px solid rgba(255, 255, 255, .28);
+	border: 1px solid rgba(var(--lg-ink-rgb, 255,255,255), .28);
 	border-radius: 6px;
 }
 
@@ -2263,10 +1741,10 @@ select {
 	top: -7px;
 	bottom: 13px;
 	width: 1px;
-	background: rgba(255, 255, 255, .055);
+	background: rgba(var(--lg-ink-rgb, 255,255,255), .055);
 }
 
-.hierarchy-row-wrap:hover { background: rgba(255, 255, 255, .045); }
+.hierarchy-row-wrap:hover { background: rgba(var(--lg-ink-rgb, 255,255,255), .045); }
 
 .hierarchy-row-wrap.selected {
 	background: linear-gradient(90deg, rgba(70, 92, 230, .32), rgba(67, 93, 190, .12));
@@ -2364,7 +1842,7 @@ select {
 	min-width: 16px;
 	padding: 2px 4px;
 	border-radius: 999px;
-	background: rgba(255, 255, 255, .065);
+	background: rgba(var(--lg-ink-rgb, 255,255,255), .065);
 	color: #8f97a9;
 	font-size: 7px;
 	text-align: center;
@@ -2476,31 +1954,6 @@ select {
 	line-height: 1.55;
 }
 
-.inspector-status-grid {
-	display: grid;
-	/* `auto` let a long value push the row past the panel. Both tracks may now
-	   shrink, and the value wraps instead of demanding a width nothing has. */
-	grid-template-columns: minmax(0, 1fr) minmax(0, auto);
-	gap: 7px 12px;
-	margin: 0 0 12px;
-	padding: 9px 10px;
-	border: 1px solid rgba(255, 255, 255, .06);
-	border-radius: 6px;
-	background: rgba(0, 0, 0, .12);
-	font-size: 8px;
-}
-
-.inspector-status-grid span { color: var(--muted); min-width: 0; }
-.inspector-status-grid b {
-	color: #c7cde0;
-	font-weight: 600;
-	min-width: 0;
-	/* An id or a path has no spaces to break at; break it anywhere rather than
-	   let it decide the panel's width. */
-	overflow-wrap: anywhere;
-	text-align: right;
-}
-
 .inspector-list {
 	display: grid;
 	gap: 5px;
@@ -2514,9 +1967,9 @@ select {
 	justify-content: space-between;
 	gap: 10px;
 	padding: 8px 9px;
-	border: 1px solid rgba(255, 255, 255, .065);
+	border: 1px solid rgba(var(--lg-ink-rgb, 255,255,255), .065);
 	border-radius: 5px;
-	background: rgba(255, 255, 255, .025);
+	background: rgba(var(--lg-ink-rgb, 255,255,255), .025);
 	color: #aeb4c2;
 	text-align: left;
 	cursor: pointer;
@@ -2551,7 +2004,7 @@ select {
 	position: relative;
 	overflow: hidden;
 	background: linear-gradient(180deg, #141417, #0b0b0d);
-	border: 1px solid rgba(255, 255, 255, .06);
+	border: 1px solid rgba(var(--lg-ink-rgb, 255,255,255), .06);
 	border-radius: 16px;
 	padding: 17px 18px 19px;
 	margin-bottom: 14px;
@@ -2872,10 +2325,6 @@ input[type=range]::-moz-range-thumb {
 .segmented button.active {
 	color: #fff;
 }
-
-.sheet-checks {
-	margin-bottom: 4px;
-}
 .sheet-checks .check {
 	margin-top: 9px;
 }
@@ -2959,7 +2408,7 @@ input[type=range]::-moz-range-thumb {
 	left: -60%;
 	width: 45%;
 	height: 100%;
-	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
+	background: linear-gradient(100deg, transparent, rgba(var(--lg-ink-rgb, 255,255,255), .28), transparent);
 	transform: skew(-18deg);
 	transition: left .5s var(--ease);
 }
@@ -2979,43 +2428,6 @@ input[type=range]::-moz-range-thumb {
 }
 /* ------------------------------------------------------ ardy panel ------- */
 
-.ardy-meta {
-	margin: 0 0 4px;
-	font-size: 11px;
-	color: var(--muted2);
-	letter-spacing: .04em;
-}
-
-.ardy-hint {
-	margin: 0;
-	font-size: 11.5px;
-	line-height: 1.6;
-	color: var(--muted);
-}
-
-.ardy-hint + .ardy-hint {
-	margin-top: 6px;
-}
-
-.ardy-hint code,
-.ardy-outcome code {
-	padding: 1px 6px;
-	border-radius: 6px;
-	background: var(--card2);
-	border: 1px solid var(--line);
-	color: #dcdce2;
-	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-	font-size: 11px;
-	word-break: break-all;
-}
-
-.ardy-clamp {
-	display: block;
-	margin-top: 5px;
-	font-size: 10.5px;
-	color: var(--muted2);
-}
-
 .ardy-status {
 	margin: 10px 0 0;
 	font-size: 11.5px;
@@ -3028,45 +2440,6 @@ input[type=range]::-moz-range-thumb {
 	color: var(--cyan);
 }
 
-.ardy-report {
-	margin-top: 12px;
-	padding: 10px 12px;
-	border: 1px solid var(--line);
-	border-radius: 10px;
-	background: var(--card2);
-	animation: rise var(--med) var(--ease);
-}
-
-.ardy-report-grid {
-	display: grid;
-	grid-template-columns: 1fr auto;
-	gap: 4px 12px;
-	font-size: 11.5px;
-}
-
-.ardy-report-grid span {
-	color: var(--muted);
-}
-
-.ardy-report-grid b {
-	color: var(--fg);
-	font-weight: 600;
-	font-variant-numeric: tabular-nums;
-}
-
-.ardy-caveat {
-	margin: 8px 0 0;
-	font-size: 10.5px;
-	line-height: 1.55;
-	color: var(--muted2);
-}
-
-.ardy-outcome {
-	margin: 10px 0 0;
-	font-size: 11.5px;
-	line-height: 1.6;
-}
-
 .ardy-outcome.done {
 	color: var(--muted);
 }
@@ -3282,7 +2655,7 @@ input[type=range]::-moz-range-thumb {
 	justify-content: space-between;
 	gap: 8px;
 	background: var(--card2);
-	border: 1px solid rgba(255, 255, 255, .08);
+	border: 1px solid rgba(var(--lg-ink-rgb, 255,255,255), .08);
 	color: var(--fg);
 	border-radius: 10px;
 	padding: 10px 12px;
@@ -3737,7 +3110,7 @@ input[type=range]::-moz-range-thumb {
 	vector-effect: non-scaling-stroke;
 }
 
-.sg-outside { fill: rgba(255, 255, 255, .05); }
+.sg-outside { fill: rgba(var(--lg-ink-rgb, 255,255,255), .05); }
 
 .sg-fill { fill: url(#sg-fade); }
 
@@ -3989,7 +3362,7 @@ input[type=range]::-moz-range-thumb {
 	vector-effect: non-scaling-stroke;
 }
 
-.sg-outside { fill: rgba(255, 255, 255, .04); }
+.sg-outside { fill: rgba(var(--lg-ink-rgb, 255,255,255), .04); }
 
 .sg-cut {
 	stroke: #ffb454;
@@ -4301,7 +3674,7 @@ input[type=range]::-moz-range-thumb {
 	font-size: 12px;
 	font-variant-numeric: tabular-nums;
 	color: var(--muted);
-	background: #101013;
+	background: var(--lg-101013, #101013);
 	border: 1px solid var(--line);
 	border-radius: 6px;
 	white-space: nowrap;
@@ -4391,7 +3764,7 @@ input[type=range]::-moz-range-thumb {
 	display: grid;
 	grid-template-columns: var(--tl-label-w) 1fr;
 	height: auto;
-	background: #101013;
+	background: var(--lg-101013, #101013);
 	border-bottom: 1px solid var(--line);
 }
 
@@ -4465,7 +3838,7 @@ input[type=range]::-moz-range-thumb {
 	height: auto;
 	min-height: 18px;
 	/* One continuous row separator across label + lane. */
-	border-bottom: 1px solid rgba(255, 255, 255, .06);
+	border-bottom: 1px solid rgba(var(--lg-ink-rgb, 255,255,255), .06);
 }
 
 .tl-track-label {
@@ -4496,7 +3869,7 @@ input[type=range]::-moz-range-thumb {
 	bottom: 0;
 	left: calc(var(--tl-f) * 100%);
 	width: 1px;
-	background: rgba(255, 255, 255, .03);
+	background: rgba(var(--lg-ink-rgb, 255,255,255), .03);
 	pointer-events: none;
 }
 
@@ -4684,7 +4057,7 @@ input[type=range]::-moz-range-thumb {
 }
 
 .tl-chip-input::placeholder {
-	color: rgba(255, 255, 255, .72);
+	color: rgba(var(--lg-ink-rgb, 255,255,255), .72);
 }
 
 .tl-chip-handle {
@@ -4694,7 +4067,7 @@ input[type=range]::-moz-range-thumb {
 	width: 8px;
 	padding: 0;
 	border: 0;
-	background: rgba(255, 255, 255, .2);
+	background: rgba(var(--lg-ink-rgb, 255,255,255), .2);
 	cursor: ew-resize;
 	z-index: 2;
 }
@@ -4702,14 +4075,6 @@ input[type=range]::-moz-range-thumb {
 .tl-chip-handle.start { left: 0; }
 .tl-chip-handle.end { right: 0; }
 
-.tl-chip-text {
-	flex: 1;
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
 /* No motion prompt yet: identical frame 0..end geometry, visually quiet. */
 .tl-chip.empty {
 	background: linear-gradient(103deg, #2a2d3a, #3b4050);
@@ -4761,27 +4126,8 @@ input[type=range]::-moz-range-thumb {
 	text-align: center;
 }
 
-.tl-shot-empty-add {
-	flex: none;
-	padding: 4px 8px;
-	border: 1px solid #735ba0;
-	border-radius: 4px;
-	background: rgba(80, 63, 109, .72);
-	color: #e7d9ff;
-	font: inherit;
-	font-style: normal;
-	cursor: pointer;
-}
-
-.tl-shot-empty-add:hover,
-.tl-shot-empty-add:focus-visible {
-	background: #5b467b;
-	border-color: #b79be8;
-	color: #fff;
-}
-
 .tl-shot-block.active {
-	border-color: #e7b557;
+	border-color: var(--select);
 	background: #503f6d;
 }
 
@@ -4881,8 +4227,8 @@ input[type=range]::-moz-range-thumb {
 	width: 100%;
 	height: 16px;
 	padding: 0 3px;
-	border: 1px solid #e7b557;
-	background: #232323;
+	border: 1px solid var(--select);
+	background: var(--lg-232323, #232323);
 	color: #fff;
 	font: inherit;
 	outline: 0;
@@ -4896,9 +4242,9 @@ input[type=range]::-moz-range-thumb {
 	width: 14px;
 	padding: 0;
 	border: 0;
-	border-left: 2px solid #e7b557;
+	border-left: 2px solid var(--select);
 	background: transparent;
-	color: #e7b557;
+	color: var(--select);
 	font-size: 14px;
 	line-height: 1;
 	cursor: ew-resize;
@@ -4913,7 +4259,7 @@ input[type=range]::-moz-range-thumb {
 	left: auto;
 	right: 0;
 	border-left: 0;
-	border-right: 2px solid #e7b557;
+	border-right: 2px solid var(--select);
 }
 
 .tl-shot-actions {
@@ -4940,7 +4286,7 @@ input[type=range]::-moz-range-thumb {
 	padding: 0 4px;
 	border: 0;
 	border-radius: 2px;
-	background: rgba(255, 255, 255, .12);
+	background: rgba(var(--lg-ink-rgb, 255,255,255), .12);
 	color: inherit;
 	font-size: 9px;
 	line-height: 1;
@@ -4971,7 +4317,7 @@ input[type=range]::-moz-range-thumb {
 
 .tl-camera-block-state {
 	padding: 1px 3px;
-	border: 1px solid rgba(255, 255, 255, .22);
+	border: 1px solid rgba(var(--lg-ink-rgb, 255,255,255), .22);
 	border-radius: 2px;
 	background: rgba(0, 0, 0, .16);
 	color: #d8ccef;
@@ -5014,27 +4360,6 @@ input[type=range]::-moz-range-thumb {
 		display: none;
 	}
 }
-.tl-crane-point {
-	box-sizing: border-box;
-	position: absolute;
-	width: 18px;
-	height: 18px;
-	padding: 0;
-	transform: translate(-50%, -50%);
-	border: 2px solid #211b31;
-	border-radius: 50%;
-	background: #a78bfa;
-	box-shadow: 0 0 0 1px rgba(203, 183, 255, .65), 0 0 8px rgba(167, 139, 250, .9);
-	cursor: ns-resize;
-	pointer-events: auto;
-	z-index: 5;
-}
-
-.tl-crane-point:hover,
-.tl-crane-point:focus-visible {
-	outline: 2px solid #fff;
-	outline-offset: 1px;
-}
 
 .tl-crane-point.selected {
 	background: #ffb454;
@@ -5334,9 +4659,6 @@ input[type=range]::-moz-range-thumb {
 		aspect-ratio: auto;
 		max-height: none;
 	}
-	.tagline {
-		display: none;
-	}
 	.pose-studio {
 		top: 15%;
 		right: 8px;
@@ -5360,12 +4682,6 @@ input[type=range]::-moz-range-thumb {
 		gap: 10px;
 		height: 54px;
 	}
-	.kbd-hint {
-		display: none;
-	}
-	.wordmark {
-		font-size: 22px;
-	}
 	.viewport {
 		min-height: 46vh;
 		padding: 10px;
@@ -5644,14 +4960,6 @@ input[type=range]::-moz-range-thumb {
 		width: 2px;
 	}
 
-	.hierarchy-splitter {
-		position: relative;
-		z-index: 3;
-		height: 6px;
-		cursor: row-resize;
-		background: var(--panel);
-	}
-
 	.hierarchy-splitter:after,
 	.timeline-splitter:after {
 		left: 0;
@@ -5691,8 +4999,8 @@ input[type=range]::-moz-range-thumb {
 		position: absolute;
 		right: 5px;
 		bottom: 5px;
-		border-right: 2px solid rgba(255, 255, 255, .72);
-		border-bottom: 2px solid rgba(255, 255, 255, .72);
+		border-right: 2px solid rgba(var(--lg-ink-rgb, 255,255,255), .72);
+		border-bottom: 2px solid rgba(var(--lg-ink-rgb, 255,255,255), .72);
 	}
 
 	.vp-inset-resize:before {
@@ -5710,11 +5018,6 @@ input[type=range]::-moz-range-thumb {
 		user-select: none !important;
 	}
 
-	body.resize-sidebar,
-	body.resize-sidebar * {
-		cursor: col-resize !important;
-	}
-
 	body.resize-hierarchy,
 	body.resize-hierarchy *,
 	body.resize-timeline,
@@ -5733,39 +5036,33 @@ input[type=range]::-moz-range-thumb {
    untouched so the production workflow remains familiar. */
 
 .panel.hierarchy-sidebar {
-	background: #282828;
-	border-color: rgba(255, 255, 255, .22);
+	background: var(--surface-panel);
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .22);
 }
 
 .hierarchy-pane {
-	background: #2c2c2c;
-	border-color: rgba(255, 255, 255, .22);
+	background: var(--lg-2c2c2c, #2c2c2c);
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .22);
 }
 
 .hierarchy-heading,
 .inspector-heading {
-	border-color: rgba(255, 255, 255, .14);
-	background: #232323;
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .14);
+	background: var(--lg-232323, #232323);
 }
 
 .hierarchy-heading strong,
 .inspector-heading strong {
-	color: #d2d2d2;
+	color: var(--lg-d2d2d2, #d2d2d2);
 }
 
 .hierarchy-kicker,
 .inspector-heading > span {
-	color: #9a9a9a;
-}
-
-.hierarchy-frame-status {
-	border-color: rgba(58, 124, 191, .35);
-	background: rgba(58, 124, 191, .09);
-	color: #5a9bd4;
+	color: var(--lg-9a9a9a, #9a9a9a);
 }
 
 .hierarchy-row-wrap:before {
-	background: rgba(255, 255, 255, .13);
+	background: rgba(var(--lg-ink-rgb, 255,255,255), .13);
 }
 
 .hierarchy-row-wrap:hover {
@@ -5782,7 +5079,7 @@ input[type=range]::-moz-range-thumb {
 }
 
 .hierarchy-label {
-	color: #d2d2d2;
+	color: var(--lg-d2d2d2, #d2d2d2);
 }
 
 .selected .hierarchy-label {
@@ -5794,8 +5091,8 @@ input[type=range]::-moz-range-thumb {
 }
 
 .hierarchy-badge {
-	background: rgba(255, 255, 255, .08);
-	color: #9a9a9a;
+	background: rgba(var(--lg-ink-rgb, 255,255,255), .08);
+	color: var(--lg-9a9a9a, #9a9a9a);
 }
 
 .hierarchy-icon {
@@ -5814,12 +5111,12 @@ input[type=range]::-moz-range-thumb {
 .selected .hierarchy-icon { filter: brightness(1.25); }
 
 .inspector-scroll {
-	background: #282828;
+	background: var(--surface-panel);
 }
 
 .card {
-	background: #2c2c2c;
-	border-color: rgba(255, 255, 255, .18);
+	background: var(--lg-2c2c2c, #2c2c2c);
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .18);
 	border-radius: 8px;
 	box-shadow: var(--shadow);
 }
@@ -5835,7 +5132,7 @@ input[type=range]::-moz-range-thumb {
 }
 
 .card h3 {
-	color: #9a9a9a;
+	color: var(--lg-9a9a9a, #9a9a9a);
 }
 
 .card h3:before {
@@ -5851,62 +5148,52 @@ input[type=range]::-moz-range-thumb {
 .field label,
 .row,
 .readout {
-	color: #9a9a9a;
+	color: var(--lg-9a9a9a, #9a9a9a);
 }
 
 .hint b,
 .ardy-hint code,
 .ardy-outcome code {
-	color: #d2d2d2;
-}
-
-.inspector-status-grid,
-.ardy-report {
-	border-color: rgba(255, 255, 255, .14);
-	background: rgba(255, 255, 255, .035);
-}
-
-.inspector-status-grid b {
-	color: #d2d2d2;
+	color: var(--lg-d2d2d2, #d2d2d2);
 }
 
 .inspector-list button {
-	border-color: rgba(255, 255, 255, .16);
-	background: rgba(255, 255, 255, .38);
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .16);
+	background: rgba(var(--lg-ink-rgb, 255,255,255), .38);
 	color: #3d4d58;
 }
 
 .inspector-list button:hover,
 .inspector-list button.active {
 	border-color: rgba(58, 124, 191, .56);
-	background: #3c3c3c;
-	color: #d2d2d2;
+	background: var(--lg-3c3c3c, #3c3c3c);
+	color: var(--lg-d2d2d2, #d2d2d2);
 }
 
 .presets button {
-	background: #383838;
-	border-color: rgba(255, 255, 255, .16);
+	background: var(--lg-383838, #383838);
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .16);
 	color: #3d4d58;
 	border-radius: 6px;
 }
 
 .presets button:hover {
-	background: #3c3c3c;
+	background: var(--lg-3c3c3c, #3c3c3c);
 	border-color: rgba(58, 124, 191, .48);
-	color: #d2d2d2;
+	color: var(--lg-d2d2d2, #d2d2d2);
 	transform: none;
 }
 
 .presets button.active {
 	border-color: #3a7cbf;
 	background: #2d5c8a;
-	color: #d2d2d2;
+	color: var(--lg-d2d2d2, #d2d2d2);
 	box-shadow: 0 0 0 1px rgba(58, 124, 191, .16);
 }
 
 .row .val,
 .readout strong {
-	color: #d2d2d2;
+	color: var(--lg-d2d2d2, #d2d2d2);
 }
 
 input[type=range] {
@@ -5914,13 +5201,13 @@ input[type=range] {
 }
 
 input[type=range]::-webkit-slider-thumb {
-	background: #2c2c2c;
+	background: var(--lg-2c2c2c, #2c2c2c);
 	border-color: #3a7cbf;
 	box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
 }
 
 input[type=range]::-moz-range-thumb {
-	background: #2c2c2c;
+	background: var(--lg-2c2c2c, #2c2c2c);
 	border-color: #3a7cbf;
 	box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
 }
@@ -5931,8 +5218,8 @@ input[type=range]::-moz-range-thumb {
 .field select,
 .dropdown .trigger {
 	background-color: #323232;
-	border-color: rgba(255, 255, 255, .2);
-	color: #d2d2d2;
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .2);
+	color: var(--lg-d2d2d2, #d2d2d2);
 	border-radius: 6px;
 	box-shadow: none;
 }
@@ -5943,13 +5230,13 @@ input[type=range]::-moz-range-thumb {
 }
 
 .field select option {
-	background: #2c2c2c;
-	color: #d2d2d2;
+	background: var(--lg-2c2c2c, #2c2c2c);
+	color: var(--lg-d2d2d2, #d2d2d2);
 }
 
 .dropdown-menu {
-	background: #2c2c2c;
-	border-color: rgba(255, 255, 255, .24);
+	background: var(--lg-2c2c2c, #2c2c2c);
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .24);
 	border-radius: 7px;
 	box-shadow: var(--shadow-md);
 }
@@ -5960,8 +5247,8 @@ input[type=range]::-moz-range-thumb {
 }
 
 .dropdown-item:hover {
-	background: #3c3c3c;
-	color: #d2d2d2;
+	background: var(--lg-3c3c3c, #3c3c3c);
+	color: var(--lg-d2d2d2, #d2d2d2);
 }
 
 .dropdown-item.active {
@@ -5969,8 +5256,8 @@ input[type=range]::-moz-range-thumb {
 }
 
 .segmented {
-	background: #1e1e1e;
-	border-color: rgba(255, 255, 255, .18);
+	background: var(--lg-1e1e1e, #1e1e1e);
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .18);
 	border-radius: 7px;
 }
 
@@ -5981,11 +5268,11 @@ input[type=range]::-moz-range-thumb {
 }
 
 .segmented button {
-	color: #9a9a9a;
+	color: var(--lg-9a9a9a, #9a9a9a);
 }
 
 .segmented button:hover {
-	color: #d2d2d2;
+	color: var(--lg-d2d2d2, #d2d2d2);
 }
 
 .segmented button.active {
@@ -5993,43 +5280,43 @@ input[type=range]::-moz-range-thumb {
 }
 
 .btn {
-	border-color: rgba(255, 255, 255, .24);
-	background: #383838;
-	color: #d2d2d2;
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .24);
+	background: var(--lg-383838, #383838);
+	color: var(--lg-d2d2d2, #d2d2d2);
 	border-radius: 6px;
 	box-shadow: none;
 }
 
 .btn:hover {
-	background: #424242;
+	background: var(--lg-424242, #424242);
 	border-color: rgba(58, 124, 191, .55);
 	box-shadow: none;
 	transform: none;
 }
 
 .btn.ghost {
-	border-color: rgba(255, 255, 255, .18);
-	color: #9a9a9a;
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .18);
+	color: var(--lg-9a9a9a, #9a9a9a);
 }
 
 .btn.ghost:hover {
-	background: #3c3c3c;
-	color: #d2d2d2;
+	background: var(--lg-3c3c3c, #3c3c3c);
+	color: var(--lg-d2d2d2, #d2d2d2);
 }
 
 .btn.primary {
-	background: #3a7cbf;
-	border: 1px solid #397f91;
+	background: var(--primary);
+	border: 1px solid var(--primary);
 	box-shadow: none;
 }
 
 .btn.primary:hover {
-	background: #3f91a7;
+	background: var(--camera);
 	box-shadow: none;
 }
 
 .vp-inset {
-	border: 1px solid rgba(255, 255, 255, .45);
+	border: 1px solid rgba(var(--lg-ink-rgb, 255,255,255), .45);
 	border-radius: 7px;
 	box-shadow: 0 7px 20px rgba(0, 0, 0, .15);
 }
@@ -6053,28 +5340,15 @@ input[type=range]::-moz-range-thumb {
 .viewmode,
 .grid-toggle {
 	background: rgba(255, 250, 241, .9);
-	border-color: rgba(255, 255, 255, .42);
-	color: #d2d2d2;
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .42);
+	color: var(--lg-d2d2d2, #d2d2d2);
 	box-shadow: none;
 	-webkit-backdrop-filter: blur(6px);
 	backdrop-filter: blur(6px);
 }
 
 .vp-inset-tag {
-	color: #d2d2d2;
-}
-
-.viewmode {
-	border-radius: 7px;
-}
-
-.viewmode button {
-	color: #52616b;
-	border-radius: 5px;
-}
-
-.viewmode button:hover {
-	color: #d2d2d2;
+	color: var(--lg-d2d2d2, #d2d2d2);
 }
 
 .viewmode button.active {
@@ -6084,30 +5358,30 @@ input[type=range]::-moz-range-thumb {
 }
 
 .caption {
-	color: #d2d2d2;
+	color: var(--lg-d2d2d2, #d2d2d2);
 }
 
 .grid-toggle.active {
 	color: #5a9bd4;
 	border-color: #3a7cbf;
-	background: #3c3c3c;
+	background: var(--lg-3c3c3c, #3c3c3c);
 }
 
 .film-frame i:before,
 .film-frame i:after {
-	border-color: rgba(255, 255, 255, .72);
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .72);
 }
 
 .toast,
 .modal,
 .promptbox {
-	background: #2c2c2c;
-	border-color: rgba(255, 255, 255, .24);
-	color: #d2d2d2;
+	background: var(--lg-2c2c2c, #2c2c2c);
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .24);
+	color: var(--lg-d2d2d2, #d2d2d2);
 }
 
 .modal-overlay {
-	background: rgba(255, 255, 255, .3);
+	background: rgba(var(--lg-ink-rgb, 255,255,255), .3);
 }
 
 .modal:before {
@@ -6116,31 +5390,31 @@ input[type=range]::-moz-range-thumb {
 }
 
 .modal .x:hover {
-	color: #d2d2d2;
-	background: #1e1e1e;
+	color: var(--lg-d2d2d2, #d2d2d2);
+	background: var(--lg-1e1e1e, #1e1e1e);
 }
 
 .timeline {
-	background: #232323;
-	border-color: rgba(255, 255, 255, .22);
+	background: var(--lg-232323, #232323);
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .22);
 	box-shadow: 0 -5px 14px rgba(0, 0, 0, .08);
 }
 
 .tl-head {
-	background: #282828;
-	border-color: rgba(255, 255, 255, .18);
+	background: var(--surface-panel);
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .18);
 }
 
 .tl-btn {
-	background: #2c2c2c;
-	color: #d2d2d2;
-	border-color: rgba(255, 255, 255, .27);
+	background: var(--lg-2c2c2c, #2c2c2c);
+	color: var(--lg-d2d2d2, #d2d2d2);
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .27);
 	border-bottom-width: 1px;
 	border-radius: 5px;
 }
 
 .tl-btn:hover {
-	background: #3c3c3c;
+	background: var(--lg-3c3c3c, #3c3c3c);
 	border-color: #3a7cbf;
 }
 
@@ -6152,9 +5426,9 @@ input[type=range]::-moz-range-thumb {
 }
 
 .tl-readout {
-	background: #2c2c2c;
-	border-color: rgba(255, 255, 255, .18);
-	color: #9a9a9a;
+	background: var(--lg-2c2c2c, #2c2c2c);
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .18);
+	color: var(--lg-9a9a9a, #9a9a9a);
 }
 
 .tl-readout b {
@@ -6162,31 +5436,31 @@ input[type=range]::-moz-range-thumb {
 }
 
 .tl-badge {
-	color: #e7b557;
+	color: var(--select);
 	background: rgba(231, 181, 87, .14);
 	border-color: rgba(190, 134, 31, .46);
 }
 
 .tl-toggle:hover {
-	color: #d2d2d2;
-	background: #1e1e1e;
-	border-color: rgba(255, 255, 255, .2);
+	color: var(--lg-d2d2d2, #d2d2d2);
+	background: var(--lg-1e1e1e, #1e1e1e);
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .2);
 }
 
 .tl-body,
 .tl-surface {
-	background: #282828;
+	background: var(--surface-panel);
 }
 
 .tl-ruler {
-	background: #232323;
-	border-color: rgba(255, 255, 255, .18);
+	background: var(--lg-232323, #232323);
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .18);
 }
 
 .tl-ruler-label,
 .tl-track-label {
-	background: #282828;
-	border-color: rgba(255, 255, 255, .16);
+	background: var(--surface-panel);
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .16);
 	color: #52616b;
 }
 
@@ -6195,36 +5469,36 @@ input[type=range]::-moz-range-thumb {
 }
 
 .tl-tick i {
-	background: rgba(255, 255, 255, .28);
+	background: rgba(var(--lg-ink-rgb, 255,255,255), .28);
 }
 
 .tl-track {
-	border-color: rgba(255, 255, 255, .1);
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .1);
 }
 
 .tl-lane {
-	background-color: #282828;
+	background-color: var(--surface-panel);
 }
 
 .tl-grid {
-	background: rgba(255, 255, 255, .075);
+	background: rgba(var(--lg-ink-rgb, 255,255,255), .075);
 }
 
 .tl-lane:hover {
-	background-color: #383838;
+	background-color: var(--lg-383838, #383838);
 }
 
 .tl-frame-box {
-	background: #e7b557;
-	color: #d2d2d2;
+	background: var(--select);
+	color: var(--lg-d2d2d2, #d2d2d2);
 	border: 1px solid #c58d29;
 	border-radius: 5px;
 	box-shadow: none;
 }
 
 .tl-track-add {
-	border-color: rgba(255, 255, 255, .24);
-	background: #2c2c2c;
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .24);
+	background: var(--lg-2c2c2c, #2c2c2c);
 	color: #5a9bd4;
 }
 
@@ -6241,7 +5515,7 @@ input[type=range]::-moz-range-thumb {
 }
 
 .tl-chip.empty {
-	background: #424242;
+	background: var(--lg-424242, #424242);
 	color: #52616b;
 }
 
@@ -6250,12 +5524,12 @@ input[type=range]::-moz-range-thumb {
 }
 
 .tl-chip-handle {
-	background: rgba(255, 255, 255, .32);
+	background: rgba(var(--lg-ink-rgb, 255,255,255), .32);
 }
 
 .tl-marker {
 	background: #6f9f86;
-	border-color: #2c2c2c;
+	border-color: var(--lg-2c2c2c, #2c2c2c);
 	box-shadow: 0 0 0 1px #5d8a73;
 }
 
@@ -6269,8 +5543,8 @@ input[type=range]::-moz-range-thumb {
 }
 
 .tl-marker.ik {
-	background: #d65f55;
-	border-color: #2c2c2c;
+	background: var(--danger);
+	border-color: var(--lg-2c2c2c, #2c2c2c);
 	box-shadow: 0 0 0 1px #b54840;
 }
 
@@ -6280,7 +5554,7 @@ input[type=range]::-moz-range-thumb {
 
 .tl-ik-run {
 	background: rgba(214, 95, 85, .42);
-	border-color: #2c2c2c;
+	border-color: var(--lg-2c2c2c, #2c2c2c);
 	box-shadow: 0 0 0 1px rgba(181, 72, 64, .5);
 }
 
@@ -6295,13 +5569,13 @@ input[type=range]::-moz-range-thumb {
 }
 
 .tl-ik-run-cap {
-	background: #d65f55;
-	border-color: #2c2c2c;
+	background: var(--danger);
+	border-color: var(--lg-2c2c2c, #2c2c2c);
 }
 
 .tl-ik-run-at {
 	background: #f0a89f;
-	border-color: #2c2c2c;
+	border-color: var(--lg-2c2c2c, #2c2c2c);
 	box-shadow: 0 0 0 1px #b54840;
 }
 
@@ -6311,7 +5585,7 @@ input[type=range]::-moz-range-thumb {
 
 .tl-marker.cam {
 	background: #9a7bd4;
-	border-color: #2c2c2c;
+	border-color: var(--lg-2c2c2c, #2c2c2c);
 	box-shadow: 0 0 0 1px #7b5cb0;
 }
 
@@ -6328,7 +5602,7 @@ input[type=range]::-moz-range-thumb {
 .tl-btn.ik.snap.on {
 	color: #e58a80;
 	background: rgba(214, 95, 85, .09);
-	border-color: #d65f55;
+	border-color: var(--danger);
 	box-shadow: none;
 }
 
@@ -6352,23 +5626,17 @@ input[type=range]::-moz-range-thumb {
 }
 
 .tl-wp-hint.warn {
-	color: #e7b557;
+	color: var(--select);
 }
 
 .tl-playhead {
-	background: #e7b557;
+	background: var(--select);
 	box-shadow: none;
 	width: 2px;
 }
 
 /* ----------------------------------------------- Cozy Clay typography ---- */
 
-.tagline {
-	font-size: 12px;
-	font-weight: 480;
-	letter-spacing: -.005em;
-}
-
 .hierarchy-heading strong,
 .inspector-heading strong {
 	font-family: var(--display);
@@ -6472,17 +5740,6 @@ input[type=range]::-moz-range-thumb {
 	letter-spacing: -.015em;
 }
 
-.kbd-hint {
-	font-size: 10.5px;
-	letter-spacing: -.015em;
-}
-
-.kbd-hint b {
-	font-size: 9.5px;
-	font-weight: 650;
-	letter-spacing: -.02em;
-}
-
 .caption {
 	font-size: 10px;
 	font-weight: 650;
@@ -6554,7 +5811,7 @@ input[type=range]::-moz-range-thumb {
 
 .pose-studio {
 	background: rgba(255, 250, 241, .96);
-	border-color: rgba(255, 255, 255, .24);
+	border-color: rgba(var(--lg-ink-rgb, 255,255,255), .24);
 	border-radius: 8px;
 	box-shadow: var(--shadow-lg);
 	backdrop-filter: blur(12px);
@@ -6612,35 +5869,6 @@ input[type=range]::-moz-range-thumb {
 	flex-direction: column;
 }
 
-.right-panel-tabs {
-	display: grid;
-	flex: none;
-	grid-template-columns: 1fr 1fr;
-	gap: 4px;
-	padding: 8px;
-	border-bottom: 1px solid var(--line);
-	background: var(--panel);
-}
-
-.right-panel-tabs button {
-	height: 34px;
-	padding: 0 10px;
-	border: 1px solid transparent;
-	border-radius: 7px;
-	background: transparent;
-	color: var(--muted);
-	font: inherit;
-	font-size: 10px;
-	font-weight: 700;
-	letter-spacing: .03em;
-	cursor: pointer;
-}
-
-.right-panel-tabs button:hover {
-	background: rgba(58, 124, 191, .08);
-	color: var(--fg);
-}
-
 .right-panel-tabs button.active {
 	border-color: rgba(58, 124, 191, .42);
 	background: #2d5c8a;
@@ -6654,19 +5882,6 @@ input[type=range]::-moz-range-thumb {
 	min-height: 0;
 }
 
-.right-panel-view {
-	/* Vertical scrolling belongs to the pane inside; the horizontal axis has to
-	   be reachable here, because a wide row (a long id, a deep hierarchy path)
-	   was otherwise clipped with no way to scroll to it. */
-	overflow: hidden auto;
-	flex: 1 1 0;
-	min-width: 0;
-}
-
-.right-panel-view > [hidden] {
-	display: none !important;
-}
-
 .hierarchy-tab-pane,
 .hierarchy-tab-pane > .hierarchy-pane,
 .inspector-pane {
@@ -6682,20 +5897,11 @@ input[type=range]::-moz-range-thumb {
 /* window title strips stay visible in the Unity layout (the tabbed
    panel that hid them is gone) */
 
-/* ------------------------------------------------- scene objects --- */
-/* Create menu, gizmo tool switch and object swatches. The hierarchy's own
-   heading is hidden in the tabbed panel, so the create action gets its own
-   toolbar row above the tree. */
-
-.hierarchy-toolbar {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	padding: 8px 10px;
-	border-bottom: 1px solid var(--line);
-}
-
+/* ------------------------------------------------- scene objects --- */
+/* Create menu, gizmo tool switch and object swatches. The hierarchy's own
+   heading is hidden in the tabbed panel, so the create action gets its own
+   toolbar row above the tree. */
+
 .add-object {
 	position: relative;
 }
@@ -6782,7 +5988,7 @@ input[type=range]::-moz-range-thumb {
 	flex: none;
 	width: 12px;
 	height: 12px;
-	border: 1px solid rgba(255, 255, 255, .25);
+	border: 1px solid rgba(var(--lg-ink-rgb, 255,255,255), .25);
 	border-radius: 3px;
 }
 
@@ -6799,15 +6005,6 @@ input[type=range]::-moz-range-thumb {
 	box-shadow: none;
 }
 
-.gizmo-modes kbd {
-	margin-left: 5px;
-	padding: 1px 4px;
-	border: 1px solid rgba(255, 255, 255, .2);
-	border-radius: 4px;
-	font-family: var(--mono);
-	font-size: 8px;
-}
-
 .object-colors {
 	display: flex;
 	gap: 6px;
@@ -6817,7 +6014,7 @@ input[type=range]::-moz-range-thumb {
 .object-color {
 	width: 22px;
 	height: 22px;
-	border: 1px solid rgba(255, 255, 255, .25);
+	border: 1px solid rgba(var(--lg-ink-rgb, 255,255,255), .25);
 	border-radius: 6px;
 	cursor: pointer;
 }
@@ -6971,13 +6168,6 @@ input[type=range]::-moz-range-thumb {
 }
 
 /* ------------------------------------------------ camera move A→B ------ */
-/* The move workspace: four small buttons in the field row, a derived slate
-   line underneath, and a two-up start/end pair in the result modal. */
-.move-ab {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 6px;
-}
 
 .move-ab .btn {
 	flex: 1;
@@ -7053,7 +6243,7 @@ input[type=range]::-moz-range-thumb {
    content — outside every hidden card — so it stays on screen for any
    selection, including an active object, which is exactly when saves fire.
    The one-shot toast announces each episode; this line persists until the
-   next successful write clears it. Pencil-red family (#d65f55), the light
+   next successful write clears it. Pencil-red family (var(--danger)), the light
    theme's existing IK warning tone: a soft fill and border, not a shouting
    solid. */
 .scene-save-error {
@@ -7123,35 +6313,6 @@ input[type=range]::-moz-range-thumb {
 	border-top: 1px solid var(--line);
 }
 
-.bottom-window-tabs {
-	flex: none;
-	display: flex;
-	gap: 2px;
-	padding: 3px 8px 0;
-	border-bottom: 1px solid var(--line);
-	background: var(--panel);
-}
-
-.bottom-window-tabs button {
-	height: 26px;
-	padding: 0 12px;
-	border: 1px solid transparent;
-	border-bottom: 0;
-	border-radius: 3px 3px 0 0;
-	background: transparent;
-	color: var(--muted);
-	font: inherit;
-	font-size: 10px;
-	font-weight: 700;
-	letter-spacing: .03em;
-	cursor: pointer;
-}
-
-.bottom-window-tabs button:hover {
-	color: var(--fg);
-	background: var(--hover);
-}
-
 .bottom-window-tabs button.active {
 	background: var(--bg);
 	border-color: var(--line2);
@@ -7190,13 +6351,6 @@ input[type=range]::-moz-range-thumb {
 	background: var(--panel);
 }
 
-.assets-shelf {
-	display: grid;
-	grid-template-columns: 170px minmax(560px, 1fr) minmax(240px, .55fr);
-	align-items: start;
-	gap: 8px;
-}
-
 .assets-shelf:has(.asset-storage-manager) {
 	display: block;
 }
@@ -7205,14 +6359,6 @@ input[type=range]::-moz-range-thumb {
 	margin-bottom: 6px;
 }
 
-.assets-shelf-toolbar {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	grid-column: 1 / -1;
-	min-height: 24px;
-}
-
 .assets-manage-toggle,
 .asset-storage-undo,
 .asset-storage-cancel,
@@ -7429,74 +6575,6 @@ input[type=range]::-moz-range-thumb {
 	cursor: pointer;
 }
 
-.assets-section {
-	--asset-group: 90, 155, 212;
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-	min-width: 0;
-	padding: 5px;
-	border: 1px solid var(--line2);
-	border-radius: 6px;
-	background: linear-gradient(180deg, rgba(var(--asset-group), .075), rgba(var(--asset-group), .025) 42px);
-}
-
-.assets-section:nth-of-type(1) {
-	--asset-group: 164, 126, 221;
-}
-
-.assets-section:nth-of-type(2) {
-	--asset-group: 72, 174, 184;
-}
-
-.assets-section:nth-of-type(3) {
-	--asset-group: 222, 159, 74;
-}
-
-/* Section headings mirror the add-object popover's group headings: structure
-   over count — no badges, no search, just where each kind of card lives. */
-.assets-section-title {
-	margin: 0 1px;
-	font-size: 10px;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.08em;
-	color: var(--muted2);
-}
-
-.assets-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
-	gap: 6px;
-}
-
-.asset-card {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 3px;
-	min-width: 0;
-	min-height: 68px;
-	padding: 6px 4px 5px;
-	background: var(--panel2, #1d1d1f);
-	border: 1px solid var(--line);
-	border-radius: 5px;
-	color: var(--fg);
-	cursor: grab;
-	user-select: none;
-	touch-action: none;
-}
-
-.asset-card:hover {
-	border-color: var(--accent);
-	background: var(--hover);
-}
-
-.asset-card:active {
-	cursor: grabbing;
-}
-
 .asset-card-swatch {
 	width: 30px;
 	height: 30px;
@@ -7539,30 +6617,6 @@ input[type=range]::-moz-range-thumb {
 	border: 1px solid #d8d2c4;
 }
 
-.asset-card-label {
-	max-width: 100%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-size: 10px;
-	font-weight: 600;
-}
-
-.asset-card-kind {
-	font-size: 9px;
-	color: var(--muted2);
-}
-
-/* Imported-image cards wear the picture itself, letterboxed into the same
-   square the character swatch occupies so every card keeps one rhythm. */
-.asset-card-thumb {
-	width: 30px;
-	height: 30px;
-	border-radius: 7px;
-	object-fit: contain;
-	background: var(--card2, #161618);
-}
-
 /* Placeholders while a scan or a decode is in flight — the grid never blocks
    on a thumbnail, and the empty message never races the scan. */
 .asset-card-thumb-skeleton,
@@ -7576,25 +6630,6 @@ input[type=range]::-moz-range-thumb {
 	min-width: 84px;
 }
 
-/* A card whose bytes failed to decode: visible so it can be deleted from
-   Manage storage, clearly marked so nobody drags a broken image on stage. */
-.asset-card-failed {
-	opacity: .72;
-	border-color: #8a4a3a !important;
-	cursor: not-allowed;
-}
-.asset-card-failed .asset-card-kind { color: #e08a7a; }
-
-.asset-card-skeleton {
-	min-width: 0;
-	width: auto;
-	height: 68px;
-	padding: 0;
-	border: 1px solid var(--line);
-	border-radius: 5px;
-	background: var(--panel2, #1d1d1f);
-}
-
 @keyframes asset-skeleton {
 	from {
 		opacity: 0.35;
@@ -7617,26 +6652,7 @@ input[type=range]::-moz-range-thumb {
 	line-height: 1.4;
 }
 
-@media (max-width: 1180px) {
-	.assets-shelf {
-		grid-template-columns: 170px minmax(480px, 1fr);
-	}
-
-	.assets-shelf-toolbar,
-	.assets-section:last-child {
-		grid-column: 1 / -1;
-	}
-}
-
 @media (max-width: 760px) {
-	.assets-shelf {
-		grid-template-columns: 1fr;
-	}
-
-	.assets-shelf-toolbar,
-	.assets-section:last-child {
-		grid-column: auto;
-	}
 
 	.asset-storage-list {
 		grid-template-columns: 1fr;
@@ -7695,53 +6711,11 @@ input[type=range]::-moz-range-thumb {
 	}
 }
 
-/* top toolbar: Unity-style tool switch + snap toggle */
-.editor-toolbar {
-	justify-self: center;
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.tool-switch {
-	display: flex;
-	gap: 2px;
-	padding: 2px;
-	border: 1px solid var(--line);
-	border-radius: 5px;
-	background: var(--card2);
-}
-
-.tool-switch button,
-.snap-switch {
-	height: 24px;
-	padding: 0 10px;
-	border: 1px solid transparent;
-	border-radius: 3px;
-	background: transparent;
-	color: var(--muted);
-	font: inherit;
-	font-size: 10px;
-	font-weight: 700;
-	letter-spacing: .03em;
-	cursor: pointer;
-}
-
-.tool-switch button:hover,
-.snap-switch:hover {
-	color: var(--fg);
-	background: var(--hover);
-}
-
 .tool-switch button.active {
 	background: var(--accent);
 	color: var(--on-accent);
 }
 
-.snap-switch {
-	border-color: var(--line);
-}
-
 .snap-switch.active {
 	border-color: var(--accent);
 	background: var(--accent-soft);
@@ -7811,47 +6785,12 @@ input[type=range]::-moz-range-thumb {
 	background: var(--panel);
 	border-bottom: 1px solid var(--line);
 }
-
-/* Workflow-first navigation: operators choose the department before the
-   toolbar reveals its controls. This keeps the existing tools available while
-   removing the cockpit effect of showing every control at once. */
-.workflow-mode-switch {
-	flex: none;
-	display: flex;
-	align-items: stretch;
-	gap: 2px;
-	padding: 3px 4px;
-	border-right: 1px solid var(--line);
-	background: var(--panel);
-}
-.workflow-mode-switch button {
-	height: 21px;
-	min-width: 54px;
-	padding: 0 8px;
-	border: 1px solid transparent;
-	border-radius: 3px;
-	background: transparent;
-	color: var(--muted);
-	font: inherit;
-	font-size: 10px;
-	font-weight: 700;
-	cursor: pointer;
-}
-.workflow-mode-switch button:hover { color: var(--fg); background: var(--hover); }
 .workflow-mode-switch button.active {
 	color: #fff;
 	background: #2d5c8a;
 	border-color: #4b8bc4;
 	box-shadow: 0 0 0 1px rgba(75,139,196,.24);
 }
-.workflow-toolbar-hint {
-	align-self: center;
-	padding: 0 10px;
-	color: #9fb7cc;
-	font-size: 10px;
-	font-weight: 600;
-	white-space: nowrap;
-}
 /* Scene mode owns transform/grid tools; Camera mode owns framing controls.
    Motion mode intentionally leaves only its short instruction in the bar. */
 .app[data-workflow-mode="scene"] .workflow-camera-context { display: none; }
@@ -7908,15 +6847,15 @@ input[type=range]::-moz-range-thumb {
 }
 
 .btn {
-	background: #383838;
-	border: 1px solid #1a1a1a;
+	background: var(--lg-383838, #383838);
+	border: 1px solid var(--lg-1a1a1a, #1a1a1a);
 	color: var(--fg);
 	transform: none;
 }
 
 .btn:hover {
-	background: #3f3f3f;
-	border-color: #1a1a1a;
+	background: var(--lg-3f3f3f, #3f3f3f);
+	border-color: var(--lg-1a1a1a, #1a1a1a);
 	transform: none;
 	box-shadow: none;
 }
@@ -7927,8 +6866,8 @@ input[type=range]::-moz-range-thumb {
 
 .btn.primary,
 .btn.primary:hover {
-	background: #2d5c8a;
-	border: 1px solid #1a1a1a;
+	background: var(--camera);
+	border: 1px solid var(--camera);
 	box-shadow: none;
 	transform: none;
 }
@@ -7948,20 +6887,20 @@ input[type=range]::-moz-range-thumb {
 }
 
 .presets button {
-	background: #383838;
-	border: 1px solid #1a1a1a;
+	background: var(--lg-383838, #383838);
+	border: 1px solid var(--lg-1a1a1a, #1a1a1a);
 	color: var(--fg);
 }
 
 .presets button:hover {
-	background: #3f3f3f;
+	background: var(--lg-3f3f3f, #3f3f3f);
 	transform: none;
 	box-shadow: none;
 }
 
 .presets button.active {
 	background: #2d5c8a;
-	border-color: #1a1a1a;
+	border-color: var(--lg-1a1a1a, #1a1a1a);
 	color: #fff;
 	box-shadow: none;
 }
@@ -7972,8 +6911,8 @@ input[type=range]::-moz-range-thumb {
 .field textarea,
 .field select,
 .dropdown .trigger {
-	background-color: #2a2a2a;
-	border: 1px solid #1a1a1a;
+	background-color: var(--lg-2a2a2a, #2a2a2a);
+	border: 1px solid var(--lg-1a1a1a, #1a1a1a);
 	color: var(--fg);
 }
 
@@ -7987,8 +6926,8 @@ input[type=range]::-moz-range-thumb {
 }
 
 .dropdown-menu {
-	background: #2c2c2c;
-	border: 1px solid #1a1a1a;
+	background: var(--lg-2c2c2c, #2c2c2c);
+	border: 1px solid var(--lg-1a1a1a, #1a1a1a);
 	box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
 }
 
@@ -8019,7 +6958,7 @@ input[type=range]::-moz-range-thumb {
 }
 
 .foldout-head:hover {
-	background: #383838;
+	background: var(--lg-383838, #383838);
 }
 
 .foldout-body {
@@ -8029,7 +6968,7 @@ input[type=range]::-moz-range-thumb {
 /* range slider: thin flat track, small square knob */
 input[type=range] {
 	height: 4px;
-	background: #1e1e1e;
+	background: var(--lg-1e1e1e, #1e1e1e);
 	border-radius: 0;
 }
 
@@ -8037,8 +6976,8 @@ input[type=range]::-webkit-slider-thumb {
 	width: 12px;
 	height: 12px;
 	border-radius: 2px;
-	background: #c4c4c4;
-	border: 1px solid #1a1a1a;
+	background: var(--lg-c4c4c4, #c4c4c4);
+	border: 1px solid var(--lg-1a1a1a, #1a1a1a);
 	box-shadow: none;
 }
 
@@ -8056,15 +6995,15 @@ input[type=range]::-moz-range-thumb {
 	width: 12px;
 	height: 12px;
 	border-radius: 2px;
-	background: #c4c4c4;
-	border: 1px solid #1a1a1a;
+	background: var(--lg-c4c4c4, #c4c4c4);
+	border: 1px solid var(--lg-1a1a1a, #1a1a1a);
 	box-shadow: none;
 }
 
 /* segmented control: flat Unity toggle strip */
 .segmented {
-	background: #2a2a2a;
-	border: 1px solid #1a1a1a;
+	background: var(--lg-2a2a2a, #2a2a2a);
+	border: 1px solid var(--lg-1a1a1a, #1a1a1a);
 	padding: 2px;
 }
 
@@ -8076,8 +7015,8 @@ input[type=range]::-moz-range-thumb {
 
 /* modal & toast: flat editor dialogs */
 .modal {
-	background: #2c2c2c;
-	border: 1px solid #1a1a1a;
+	background: var(--lg-2c2c2c, #2c2c2c);
+	border: 1px solid var(--lg-1a1a1a, #1a1a1a);
 	box-shadow: 0 8px 30px rgba(0, 0, 0, .6);
 }
 
@@ -8086,15 +7025,15 @@ input[type=range]::-moz-range-thumb {
 }
 
 .toast {
-	background: #2c2c2c;
-	border: 1px solid #1a1a1a;
+	background: var(--lg-2c2c2c, #2c2c2c);
+	border: 1px solid var(--lg-1a1a1a, #1a1a1a);
 	box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
 }
 
 /* pose studio: flat docked window */
 .pose-studio {
 	background: rgba(44, 44, 44, .97);
-	border: 1px solid #1a1a1a;
+	border: 1px solid var(--lg-1a1a1a, #1a1a1a);
 	border-radius: 2px;
 	box-shadow: 0 8px 30px rgba(0, 0, 0, .6);
 	backdrop-filter: none;
@@ -8119,25 +7058,12 @@ input[type=range]::-moz-range-thumb {
 	-webkit-backdrop-filter: none;
 }
 
-/* tool palette icons */
-.tool-switch button {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-}
-
-.tool-icon {
-	width: 13px;
-	height: 13px;
-	flex: none;
-}
-
 /* ------------------------------------------- Unity inspector density ------ */
 /* Compact property rows: no card boxes, thin section dividers, label column
    on the left, value on the right — Unity Inspector metrics. */
 
 .inspector-sidebar .inspector-pane {
-	background: #2c2c2c;
+	background: var(--lg-2c2c2c, #2c2c2c);
 }
 
 .inspector-heading {
@@ -8146,8 +7072,8 @@ input[type=range]::-moz-range-thumb {
 	gap: 8px;
 	height: 28px;
 	padding: 0 12px;
-	border-bottom: 1px solid #1a1a1a;
-	background: #282828;
+	border-bottom: 1px solid var(--lg-1a1a1a, #1a1a1a);
+	background: var(--surface-panel);
 }
 
 .inspector-heading > span {
@@ -8162,7 +7088,7 @@ input[type=range]::-moz-range-thumb {
 
 .inspector-scroll {
 	padding: 0;
-	background: #2c2c2c;
+	background: var(--lg-2c2c2c, #2c2c2c);
 }
 
 .inspector-scroll > .card {
@@ -8174,7 +7100,7 @@ input[type=range]::-moz-range-thumb {
 .card {
 	background: transparent;
 	border: 0;
-	border-bottom: 1px solid #232323;
+	border-bottom: 1px solid var(--lg-232323, #232323);
 	border-radius: 0;
 	padding: 0 0 8px;
 }
@@ -8192,7 +7118,7 @@ input[type=range]::-moz-range-thumb {
 }
 
 .foldout-head:hover {
-	background: rgba(255, 255, 255, .04);
+	background: rgba(var(--lg-ink-rgb, 255,255,255), .04);
 }
 
 .foldout-arrow {
@@ -8235,7 +7161,7 @@ input[type=range] {
 .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));
+	background: linear-gradient(180deg, rgba(58, 124, 191, .12), rgba(var(--lg-ink-rgb, 255,255,255), .025));
 	border-radius: 3px;
 }
 
@@ -8292,7 +7218,7 @@ input[type=range] {
 .multimodel-input-block {
 	margin-top: 9px;
 	padding: 8px;
-	border: 1px solid rgba(255, 255, 255, .1);
+	border: 1px solid rgba(var(--lg-ink-rgb, 255,255,255), .1);
 	background: rgba(0, 0, 0, .12);
 }
 
@@ -8437,7 +7363,7 @@ input[type=range] {
 	height: 44px;
 	object-fit: cover;
 	background: #000;
-	border: 1px solid rgba(255, 255, 255, .12);
+	border: 1px solid rgba(var(--lg-ink-rgb, 255,255,255), .12);
 }
 
 .multimodel-receipt-body {
@@ -8636,7 +7562,7 @@ input[type=range] {
 .subject-box {
 	padding: 6px 8px 8px;
 	border-radius: 2px;
-	background: #282828;
+	background: var(--surface-panel);
 }
 
 .sb-name,
@@ -8673,112 +7599,40 @@ input[type=range] {
 	margin-top: 6px;
 }
 
-.ardy-report,
-.inspector-status-grid {
-	padding: 6px 8px;
-	border-radius: 2px;
-	font-size: 10px;
-}
-
 .inspector-list button {
 	padding: 4px 8px;
 	font-size: 11px;
-	border-radius: 2px;
-}
-
-/* object transform sections: gizmo-modes as compact 3-way strip */
-.presets.gizmo-modes {
-	grid-template-columns: 1fr 1fr 1fr;
-}
-
-.presets.gizmo-modes button {
-	padding: 0 4px;
-}
-
-.presets.gizmo-modes kbd {
-	font-size: 8px;
-	padding: 0 3px;
-	border-radius: 2px;
-}
-
-.object-colors {
-	gap: 4px;
-	margin: 4px 0 8px;
-}
-
-.object-color {
-	width: 18px;
-	height: 18px;
-	border-radius: 2px;
-}
-
-/* ------------------------------------------------ Unity scene title bar --- */
-/* View tabs and their context tools share one uninterrupted horizontal bar. */
-.editor-toolbar.scene-tools {
-	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);
-}
-
-.editor-toolbar.scene-tools::-webkit-scrollbar { display: none; }
-
-.editor-toolbar.scene-tools .tool-switch {
-	flex: none;
-	border: 0;
-	border-radius: 0;
-	padding: 0;
-	background: transparent;
+	border-radius: 2px;
 }
 
-/* Direct manipulation and numeric fields share the Transform concept. Keep
-   the name visible beside the icon-only tool buttons so the beginner path has
-   one vocabulary for both ways of editing a selection. */
-.editor-toolbar.scene-tools .transform-toolbar-label {
-	align-self: center;
-	flex: none;
-	padding: 0 8px;
-	color: var(--muted);
-	font-size: 9px;
-	font-weight: 700;
-	letter-spacing: .04em;
-	text-transform: uppercase;
+/* object transform sections: gizmo-modes as compact 3-way strip */
+.presets.gizmo-modes {
+	grid-template-columns: 1fr 1fr 1fr;
 }
 
-.editor-toolbar.scene-tools .tool-switch button,
-.editor-toolbar.scene-tools .snap-switch {
-	height: 26px;
-	border-radius: 0;
-	border: 0;
-	border-right: 1px solid var(--line);
-	background: transparent;
+.presets.gizmo-modes button {
+	padding: 0 4px;
 }
 
-.editor-toolbar.scene-tools .tool-switch button {
-	width: 29px;
-	padding: 0;
-	gap: 0;
-	font-size: 0;
-	justify-content: center;
+.presets.gizmo-modes kbd {
+	font-size: 8px;
+	padding: 0 3px;
+	border-radius: 2px;
 }
 
-.editor-toolbar.scene-tools .tool-switch .tool-icon {
-	width: 14px;
-	height: 14px;
+.object-colors {
+	gap: 4px;
+	margin: 4px 0 8px;
 }
 
-.editor-toolbar.scene-tools .snap-switch {
-	padding: 0 6px;
-	font-size: 8px;
+.object-color {
+	width: 18px;
+	height: 18px;
+	border-radius: 2px;
 }
 
+/* ------------------------------------------------ Unity scene title bar --- */
+
 .editor-toolbar.scene-tools .tool-switch button.active {
 	background: #2d5c8a;
 	color: #fff;
@@ -8789,16 +7643,6 @@ 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;
@@ -8847,29 +7691,6 @@ input[type=range] {
 	font-size: 9px;
 }
 
-.viewport-toolbar-spacer {
-	display: none;
-}
-
-.editor-toolbar.scene-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 {
-	background: #363636;
-	color: #fff;
-}
-
 /* The studio's one Export menu (#165, moved to the topbar in #193). It reuses
    the project menu's popover so the studio has a single dropdown language;
    the trigger is a plain .topbar-action. The panel stays fixed to the viewport
@@ -8904,15 +7725,6 @@ input[type=range] {
 	z-index: 80;
 }
 
-.export-trigger-state {
-	font-size: 10px;
-	color: var(--muted2);
-}
-
-.export-trigger-state[data-phase="failed"] {
-	color: var(--fg);
-}
-
 .export-status {
 	padding: 10px;
 	margin-bottom: 6px;
@@ -9248,7 +8060,7 @@ input[type=range] {
 
 .hierarchy-row-wrap:before {
 	left: -9px;
-	background: rgba(255, 255, 255, .07);
+	background: rgba(var(--lg-ink-rgb, 255,255,255), .07);
 }
 
 .hierarchy-icon {
@@ -9265,8 +8077,8 @@ input[type=range] {
 .inspector-heading {
 	height: 26px;
 	padding: 0 10px;
-	background: #2c2c2c;
-	border-bottom: 1px solid #1a1a1a;
+	background: var(--lg-2c2c2c, #2c2c2c);
+	border-bottom: 1px solid var(--lg-1a1a1a, #1a1a1a);
 }
 
 .hierarchy-heading strong,
@@ -9345,13 +8157,6 @@ input[type=range] {
 	color: var(--muted);
 }
 
-.ardy-clamp {
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: block;
-}
-
 /* ------------------------------------------- Unity component sections ----- */
 /* HDRP inspector: foldout triangle + component chip + bold title, a rule
    under the header while open, and content indented beneath it. */
@@ -9385,7 +8190,7 @@ input[type=range] {
 	order: 0;
 	width: 12px;
 	font-size: 8px;
-	color: #c4c4c4;
+	color: var(--lg-c4c4c4, #c4c4c4);
 }
 
 .foldout-title {
@@ -9394,7 +8199,7 @@ input[type=range] {
 
 /* open sections get the header rule and indented body */
 .card.foldout.open .foldout-head {
-	border-bottom: 1px solid #232323;
+	border-bottom: 1px solid var(--lg-232323, #232323);
 }
 
 .card.foldout {
@@ -9403,7 +8208,7 @@ input[type=range] {
 }
 
 .card.foldout.open {
-	border-bottom: 1px solid #232323;
+	border-bottom: 1px solid var(--lg-232323, #232323);
 }
 
 .foldout-body {
@@ -9418,13 +8223,13 @@ input[type=range] {
 }
 
 ::-webkit-scrollbar-thumb {
-	background: #4a4a4a;
+	background: var(--lg-4a4a4a, #4a4a4a);
 	border-radius: 4px;
 	border: none;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-	background: #5c5c5c;
+	background: var(--lg-5c5c5c, #5c5c5c);
 }
 
 ::-webkit-scrollbar-track {
@@ -9556,8 +8361,8 @@ input[type=range] {
 	display: flex;
 	justify-content: flex-end;
 	padding: 6px 12px;
-	border-top: 1px solid #1a1a1a;
-	background: #282828;
+	border-top: 1px solid var(--lg-1a1a1a, #1a1a1a);
+	background: var(--surface-panel);
 }
 
 .inspector-footer span {
@@ -9608,7 +8413,7 @@ input[type=range] {
 	height: 10px;
 	border: 1px solid #8a8a8a;
 	border-radius: 2px;
-	background: rgba(255, 255, 255, .05);
+	background: rgba(var(--lg-ink-rgb, 255,255,255), .05);
 	box-shadow: none;
 	transform: none;
 }
@@ -9619,7 +8424,7 @@ input[type=range] {
 .hierarchy-icon.motion,
 .hierarchy-icon.clip,
 .hierarchy-icon.prompt { border-color: #3a7cbf; background: rgba(58, 124, 191, .18); }
-.hierarchy-icon.key { border-color: #d65f55; background: rgba(214, 95, 85, .16); transform: rotate(45deg) scale(.78); }
+.hierarchy-icon.key { border-color: var(--danger); background: rgba(214, 95, 85, .16); transform: rotate(45deg) scale(.78); }
 .hierarchy-icon.rig,
 .hierarchy-icon.bone { border-radius: 50%; border-color: #8a759d; background: rgba(138, 117, 157, .16); }
 .hierarchy-icon.path { width: 12px; height: 5px; border-radius: 999px; border-color: #6f9f86; background: rgba(111, 159, 134, .16); }
@@ -9768,7 +8573,7 @@ input[type=range] {
 	padding: 12px 13px;
 	border: 1px solid var(--line2);
 	border-left: 3px solid var(--accent);
-	background: #282828;
+	background: var(--surface-panel);
 }
 
 .result-next h4 {
@@ -9935,17 +8740,17 @@ input[type=range] {
 
 .props-drop[data-drop="over"],
 .hierarchy-row-wrap[data-drop="over"] {
-	border-color: var(--accent, #e7b557);
+	border-color: var(--accent, var(--select));
 	background: rgba(231, 181, 87, 0.1);
 }
 
 .hierarchy-row-wrap[data-drop="over"] {
-	border: 1px dashed var(--accent, #e7b557);
+	border: 1px dashed var(--accent, var(--select));
 	border-radius: 3px;
 }
 
 .viewport[data-drop="over"] {
-	outline: 2px dashed var(--accent, #e7b557);
+	outline: 2px dashed var(--accent, var(--select));
 	outline-offset: -6px;
 }
 
@@ -10097,8 +8902,8 @@ input[type=range] {
 	justify-content: center;
 	gap: 10px;
 	padding: 24px;
-	background: var(--bg, #1e1e1e);
-	color: var(--fg, #d2d2d2);
+	background: var(--bg, var(--lg-1e1e1e, #1e1e1e));
+	color: var(--fg, var(--lg-d2d2d2, #d2d2d2));
 	text-align: center;
 }
 .crash-screen h1 {
@@ -10107,17 +8912,17 @@ input[type=range] {
 }
 .crash-screen p {
 	margin: 0;
-	color: var(--muted, #9a9a9a);
+	color: var(--muted, var(--lg-9a9a9a, #9a9a9a));
 	max-width: 52ch;
 }
 .crash-screen .crash-detail {
 	max-width: min(72ch, 90vw);
 	overflow: auto;
 	padding: 10px 14px;
-	border: 1px solid var(--line2, #3c3c3c);
+	border: 1px solid var(--line2, var(--lg-3c3c3c, #3c3c3c));
 	border-radius: 6px;
-	background: var(--panel, #2c2c2c);
-	color: var(--muted, #9a9a9a);
+	background: var(--panel, var(--lg-2c2c2c, #2c2c2c));
+	color: var(--muted, var(--lg-9a9a9a, #9a9a9a));
 	font-size: 12px;
 	text-align: left;
 	white-space: pre-wrap;
@@ -10125,10 +8930,10 @@ input[type=range] {
 .crash-screen button,
 .gl-lost-card button {
 	padding: 6px 16px;
-	border: 1px solid var(--line2, #3c3c3c);
+	border: 1px solid var(--line2, var(--lg-3c3c3c, #3c3c3c));
 	border-radius: 6px;
-	background: var(--card, #383838);
-	color: var(--fg, #d2d2d2);
+	background: var(--card, var(--lg-383838, #383838));
+	color: var(--fg, var(--lg-d2d2d2, #d2d2d2));
 	cursor: pointer;
 }
 .gl-lost-overlay {
@@ -10147,47 +8952,21 @@ input[type=range] {
 	gap: 8px;
 	max-width: 46ch;
 	padding: 18px 22px;
-	border: 1px solid var(--line2, #3c3c3c);
+	border: 1px solid var(--line2, var(--lg-3c3c3c, #3c3c3c));
 	border-radius: 8px;
-	background: var(--panel, #2c2c2c);
-	color: var(--fg, #d2d2d2);
+	background: var(--panel, var(--lg-2c2c2c, #2c2c2c));
+	color: var(--fg, var(--lg-d2d2d2, #d2d2d2));
 	text-align: center;
 }
 .gl-lost-card p {
 	margin: 0;
-	color: var(--muted, #9a9a9a);
+	color: var(--muted, var(--lg-9a9a9a, #9a9a9a));
 	font-size: 12px;
 }
-
-/* ------------------------------------------- preserve (inpainting) -------- */
-/* The "keep the current take" strength, in the Prompt Blocks panel. Same shape
-   as .trail-falloff-row — flat range plus a tabular readout — and, since round 2
-   allows preserving across a drawn root path, it has no disabled state left:
-   every state the control can be in is now a WORKING one, explained by the hint
-   lines under it rather than by graying.
-   Appended at the end on purpose: the global input[type=range] rules further up
-   the cascade (the Unity density and widget-material passes) would otherwise
-   win over anything written beside the trail row. */
-.preserve-strength-row {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-.preserve-strength-row input[type="range"] {
-	flex: 1;
-	min-width: 0;
-}
 .preserve-strength-value {
 	font-variant-numeric: tabular-nums;
 	opacity: .8;
 }
-/* Both poles on one line, each at the end it describes. */
-.preserve-strength-scale {
-	display: flex;
-	justify-content: space-between;
-	gap: 8px;
-	margin-top: 3px;
-}
 /* Which limbs the grouped mask will actually free. It reads as a continuation
    of the slider, not as a new paragraph, so it sits tighter to the row above
    and one step quieter than the hint it borrows its voice from. */
@@ -10269,7 +9048,7 @@ input[type=range] {
 	gap: 6px;
 	margin-top: 8px;
 	padding-left: 8px;
-	border-left: 2px solid var(--line2, #3c3c3c);
+	border-left: 2px solid var(--line2, var(--lg-3c3c3c, #3c3c3c));
 }
 /* Two bounds on one line, reading as a single range rather than two fields —
    same flat shape as .preserve-strength-row. */
@@ -10303,12 +9082,6 @@ input[type=range] {
 	font-variant-numeric: tabular-nums;
 	white-space: nowrap;
 }
-/* Wave 2 has not landed: the mode is fully usable, only the send is waiting.
-   Stated in the panel's own quiet voice rather than by disabling the tool. */
-.line-edit-pending {
-	margin-top: 2px;
-	opacity: .85;
-}
 
 /* The view moved out from under a committed edit. A STATUS, not an error: the
    edit is intact and still on its way to the box, so this reads like the
@@ -10390,39 +9163,6 @@ input[type=range] {
 	background: var(--panel);
 }
 
-/* The two primaries. They sit first and they sit together, so the choice reads
-   as a pair — block the scene, or refine what is already blocked — rather than
-   as two unrelated buttons that happen to be nearby. */
-.take-modes {
-	display: flex;
-	align-items: flex-start;
-	gap: 8px;
-}
-
-.take-mode {
-	display: flex;
-	flex-direction: column;
-	gap: 1px;
-}
-
-.take-mode-btn {
-	height: 26px;
-	padding: 0 14px;
-	border: 1px solid var(--line2);
-	border-radius: 3px;
-	background: var(--bg);
-	color: var(--fg);
-	font: inherit;
-	font-size: 11px;
-	font-weight: 700;
-	letter-spacing: .02em;
-	cursor: pointer;
-}
-
-.take-mode-btn:hover {
-	background: var(--hover);
-}
-
 .take-mode-btn.active {
 	border-color: var(--accent);
 	box-shadow: inset 0 -2px var(--accent);
@@ -10437,36 +9177,6 @@ input[type=range] {
 	cursor: not-allowed;
 }
 
-.take-mode-hint,
-.take-mode-reason {
-	font-size: 10px;
-	line-height: 1.3;
-	max-width: 26ch;
-	color: var(--muted);
-}
-
-.take-mode-reason {
-	color: var(--warn, #ff9c6e);
-	opacity: .9;
-}
-
-/* The Scene entry's actions, revealed inline instead of in a popup: the strip
-   is already the place the artist is looking. */
-.take-scene-menu {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: flex-start;
-	gap: 6px 10px;
-	padding-left: 10px;
-	border-left: 1px solid var(--line2);
-}
-
-.take-scene-action {
-	display: flex;
-	flex-direction: column;
-	gap: 1px;
-}
-
 .take-scene-menu .btn {
 	height: 26px;
 	padding: 0 10px;
@@ -10474,75 +9184,12 @@ input[type=range] {
 	white-space: nowrap;
 }
 
-.take-scene-advanced {
-	min-width: 220px;
-	font-size: 11px;
-}
-
-.take-scene-advanced > summary {
-	cursor: pointer;
-	color: var(--muted);
-	font-size: 10px;
-	font-weight: 700;
-	letter-spacing: .03em;
-}
-
-.take-scene-advanced > summary:hover {
-	color: var(--fg);
-}
-
 .take-recipe-summary {
 	margin-top: 4px;
 	opacity: .8;
 	font-variant-numeric: tabular-nums;
 }
 
-/* The version strip. Numbered because the numbers are what the artist says out
-   loud ("go back to v2"); the label rides underneath so a chip explains what it
-   is without a hover, and the current take is the one with the accent under it. */
-.take-version-strip {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 4px;
-	margin-left: auto;
-}
-
-.take-version-chip {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 0;
-	min-width: 34px;
-	max-width: 120px;
-	padding: 2px 7px;
-	border: 1px solid var(--line2);
-	border-radius: 3px;
-	background: var(--bg);
-	color: var(--muted);
-	font: inherit;
-	cursor: pointer;
-}
-
-.take-version-chip:hover {
-	background: var(--hover);
-	color: var(--fg);
-}
-
-.take-version-chip b {
-	font-size: 11px;
-	font-variant-numeric: tabular-nums;
-}
-
-.take-version-chip small {
-	max-width: 100%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-size: 9px;
-	opacity: .75;
-}
-
 .take-version-chip.current {
 	border-color: var(--accent);
 	color: var(--fg);
@@ -10577,36 +9224,10 @@ input[type=range] {
 		bottom: 12px;
 		right: 12px;
 	}
-
-	/* Make the title-bar hierarchy legible: manipulation tools, view toggles,
-	   and camera settings read as three groups instead of one long button row. */
-	.editor-toolbar.scene-tools .tool-switch {
-		margin: 2px 4px 2px 3px;
-		height: 23px;
-		border: 1px solid var(--line2);
-		border-radius: 3px;
-		background: rgba(0, 0, 0, .14);
-	}
-	.editor-toolbar.scene-tools .tool-switch button {
-		height: 21px;
-		border-right: 0;
-	}
-	.editor-toolbar.scene-tools .tool-switch button + button {
-		border-left: 1px solid var(--line);
-	}
-	.editor-toolbar.scene-tools > .snap-switch {
-		margin: 2px 0;
-		height: 23px;
-		border: 1px solid var(--line2);
-		border-radius: 3px;
-	}
 	.editor-toolbar.scene-tools .viewport-toolbar-field,
 	.editor-toolbar.scene-tools .viewport-fov-control {
 		background: rgba(0, 0, 0, .08);
 	}
-	.editor-toolbar.scene-tools .settings-separator {
-		margin-left: 5px;
-	}
 
 	/* Splitters are deliberately wider than their 1px visual rule so the
 	   cursor can reliably find them; the accent appears on hover/focus. */
@@ -10807,6 +9428,23 @@ input[type=range] {
 	width: clamp(220px, calc(50% - 92px), 360px);
 }
 
+/* The floating shell covers the full-bleed viewport with panels. Keep the
+   instructions inside its open stage, clear of the tool rail and dock. */
+.app[data-shell="glass"]:not([data-embed-mode]) .camera-tutorial {
+	top: calc(var(--shell-view-top, 52px) + 12px);
+	left: calc(var(--shell-center-left) + 64px);
+	width: min(430px, calc(100% - var(--shell-center-left) - var(--shell-center-right) - 128px));
+}
+.app[data-shell="glass"][data-tutorial-step="rail"] .camera-tutorial,
+.app[data-shell="glass"] .camera-tutorial[data-previewing="1"] {
+	top: auto;
+	bottom: calc(var(--shell-center-bottom) + 12px);
+}
+.app[data-shell="glass"]:not([data-embed-mode]) .tutorial-cue {
+	left: calc((var(--shell-center-left) + 100% - var(--shell-center-right)) / 2);
+	bottom: calc(var(--shell-center-bottom) + 18px);
+}
+
 .camera-tutorial-steps {
 	display: flex;
 	flex-wrap: wrap;
@@ -11454,59 +10092,129 @@ input[type=range] {
 .agent-toast { padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--accent-soft); color: var(--fg); font-size: 11px; }
 
 /* Fal H3 Studio motion launch slice (#380). */
-.fal-motion-card { margin-top: 12px; padding: 14px; border: 1px solid var(--line, #313747); border-radius: 10px; background: rgba(21, 25, 35, .72); font-size: 13px; }
-.fal-motion-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -14px -14px 0; padding: 8px 14px; background: #151923; border-radius: 10px 10px 0 0; font-size: 12px; }
-.fal-motion-head span { color: var(--muted, #a7afc2); font-size: 12px; }
-.fal-motion-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
-.fal-motion-mode-tabs button { min-height: 34px; padding: 6px 8px; border: 1px solid #343b4d; border-radius: 6px; background: #11151e; color: var(--muted, #a7afc2); font: inherit; font-size: 13px; cursor: pointer; }
-.fal-motion-mode-tabs button.active { border-color: #7dd3fc; background: rgba(42, 77, 100, .32); color: #e6f7ff; }
-.fal-motion-mode-hint { margin-top: 6px; }
-.fal-motion-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
-.fal-motion-stepper span { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 6px 7px; border: 1px solid #343b4d; border-radius: 6px; color: var(--muted, #a7afc2); font-size: 11px; }
-.fal-motion-stepper span.active { border-color: #e1b45b; background: rgba(120, 85, 27, .22); color: #ffe7aa; }
-.fal-motion-stepper span.done { border-color: #3e8d62; color: #9fe6b8; }
-.fal-motion-stepper b { font-size: 12px; }
-.fal-motion-segmentation-row { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
-.fal-motion-segmentation-row .fal-motion-segmentation { flex: 1; margin: 0; }
-.fal-motion-flat-cta { flex: none; min-height: 32px !important; padding: 5px 10px !important; font-size: 12px !important; }
-.fal-motion-pose-row, .fal-motion-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
-.fal-motion-pose-row .btn, .fal-motion-actions .btn { min-height: 36px; padding: 7px 12px; font-size: 13px; }
-.fal-motion-pose-row .btn.active { border-color: #7dd3fc; color: #d7f3ff; }
-.fal-motion-capture-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
-.fal-motion-capture-slot { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 9px; border: 1px solid #343b4d; border-radius: 7px; background: #11151e; }
-.fal-motion-capture-slot.captured { border-color: #3e8d62; background: rgba(35, 83, 54, .22); }
-.fal-motion-capture-slot strong { color: var(--fg, #eef3ff); font-size: 13px; }
-.fal-motion-capture-slot.captured strong { color: #9fe6b8; }
-.fal-motion-capture-slot span { overflow: hidden; color: var(--muted, #a7afc2); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
-.fal-motion-slot-action { align-self: flex-start; padding: 0; border: 0; background: transparent; color: #b8dfff; font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline; }
-.fal-motion-camera-status { margin: 8px 0 0; color: var(--muted, #a7afc2); font-size: 11px; }
-.fal-motion-camera-status.ready { color: #9fe6b8; }
-.fal-motion-camera-actions { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
-.fal-motion-camera-actions .btn { min-height: 30px !important; padding: 4px 9px !important; font-size: 12px !important; }
-.fal-motion-thumbs { display: flex; gap: 8px; margin-top: 8px; min-height: 0; }
-.fal-motion-thumbs figure { margin: 0; min-width: 0; }
-.fal-motion-thumbs img { display: block; width: 148px; height: 84px; object-fit: cover; border-radius: 5px; border: 1px solid #42506a; background: #0c0f16; }
-.fal-motion-thumbs figcaption { margin-top: 4px; color: var(--muted, #a7afc2); font-size: 11px; }
-.fal-motion-instruction { width: 100%; min-height: 64px; margin-top: 10px; padding: 9px; resize: vertical; border: 1px solid #343b4d; border-radius: 6px; background: #11151e; color: inherit; font: inherit; font-size: 13px; }
-.fal-motion-prompt-note { margin-top: 8px; padding: 5px 6px; border-left: 2px solid #42506a; background: rgba(17, 21, 30, .65); }
-.fal-motion-inline-error { margin-top: 8px; }
-.fal-motion-segmentation.ready { color: #9fe6b8; }
-.fal-motion-video { display: block; width: 100%; margin-top: 10px; border-radius: 7px; background: #090b10; }
-.fal-motion-duration-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
-.fal-motion-duration-row .btn { min-height: 32px; padding: 5px 12px; font-size: 12px; }
-.fal-motion-duration-row .btn.active { border-color: #7dd3fc; background: rgba(42, 77, 100, .32); color: #e6f7ff; }
-.fal-motion-prompt-edit { margin-top: 10px; }
-.fal-motion-prompt-edit summary { cursor: pointer; color: var(--muted, #a7afc2); font-size: 12px; }
-.fal-motion-prompt-override { min-height: 88px; margin-top: 6px; font-family: ui-monospace, monospace; font-size: 12px; }
-.fal-motion-open-row { margin-top: 12px; }
-.fal-motion-open { width: 100%; min-height: 40px; font-size: 14px; }
-.modal.fal-motion-modal { width: min(920px, 96vw); }
-.fal-motion-modal-body { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.1fr); gap: 18px; }
-.fal-motion-modal .fal-motion-thumbs { flex-direction: column; }
-.fal-motion-modal .fal-motion-thumbs img { width: 100%; height: auto; }
-@media (max-width: 700px) { .fal-motion-modal-body { grid-template-columns: 1fr; } }
-.agent-fal-action { color: #6d4aff; border-color: color-mix(in srgb, #6d4aff 35%, var(--line) 65%); }
-.agent-fal-action:disabled { opacity: .45; }
+.i2v-motion-card { margin-top: 12px; padding: 14px; border: 1px solid var(--line, #313747); border-radius: 10px; background: rgba(21, 25, 35, .72); font-size: 13px; }
+.i2v-motion-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -14px -14px 0; padding: 8px 14px; background: #151923; border-radius: 10px 10px 0 0; font-size: 12px; }
+.i2v-motion-head span { color: var(--muted, #a7afc2); font-size: 12px; }
+.i2v-motion-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
+.i2v-motion-mode-tabs button { min-height: 34px; padding: 6px 8px; border: 1px solid #343b4d; border-radius: 6px; background: var(--lg-11151e, #11151e); color: var(--muted, #a7afc2); font: inherit; font-size: 13px; cursor: pointer; }
+.i2v-motion-mode-tabs button.active { border-color: #7dd3fc; background: rgba(42, 77, 100, .32); color: #e6f7ff; }
+.i2v-motion-mode-hint { margin-top: 6px; }
+.i2v-motion-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
+.i2v-motion-stepper span { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 6px 7px; border: 1px solid #343b4d; border-radius: 6px; color: var(--muted, #a7afc2); font-size: 11px; }
+.i2v-motion-stepper span.active { border-color: #e1b45b; background: rgba(120, 85, 27, .22); color: #ffe7aa; }
+.i2v-motion-stepper span.done { border-color: #3e8d62; color: #9fe6b8; }
+.i2v-motion-stepper b { font-size: 12px; }
+.i2v-motion-segmentation-row { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
+.i2v-motion-segmentation-row .i2v-motion-segmentation { flex: 1; margin: 0; }
+.i2v-motion-flat-cta { flex: none; min-height: 32px !important; padding: 5px 10px !important; font-size: 12px !important; }
+.i2v-motion-pose-row, .i2v-motion-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
+.i2v-motion-pose-row .btn, .i2v-motion-actions .btn { min-height: 36px; padding: 7px 12px; font-size: 13px; }
+.i2v-motion-pose-row .btn.active { border-color: #7dd3fc; color: #d7f3ff; }
+.i2v-motion-capture-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
+.i2v-motion-capture-slot { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 9px; border: 1px solid #343b4d; border-radius: 7px; background: var(--lg-11151e, #11151e); }
+.i2v-motion-capture-slot.captured { border-color: #3e8d62; background: rgba(35, 83, 54, .22); }
+.i2v-motion-capture-slot strong { color: var(--fg, #eef3ff); font-size: 13px; }
+.i2v-motion-capture-slot.captured strong { color: #9fe6b8; }
+.i2v-motion-capture-slot span { overflow: hidden; color: var(--muted, #a7afc2); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
+.i2v-motion-slot-action { align-self: flex-start; padding: 0; border: 0; background: transparent; color: #b8dfff; font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline; }
+.i2v-motion-camera-status { margin: 8px 0 0; color: var(--muted, #a7afc2); font-size: 11px; }
+.i2v-motion-camera-status.ready { color: #9fe6b8; }
+.i2v-motion-camera-actions { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
+.i2v-motion-camera-actions .btn { min-height: 30px !important; padding: 4px 9px !important; font-size: 12px !important; }
+.i2v-motion-thumbs { display: flex; gap: 8px; margin-top: 8px; min-height: 0; }
+.i2v-motion-thumbs figure { margin: 0; min-width: 0; }
+.i2v-motion-thumbs img { display: block; width: 148px; height: 84px; object-fit: cover; border-radius: 5px; border: 1px solid #42506a; background: #0c0f16; }
+.i2v-motion-thumbs figcaption { margin-top: 4px; color: var(--muted, #a7afc2); font-size: 11px; }
+.i2v-motion-instruction { width: 100%; min-height: 64px; margin-top: 10px; padding: 9px; resize: vertical; border: 1px solid #343b4d; border-radius: 6px; background: var(--lg-11151e, #11151e); color: inherit; font: inherit; font-size: 13px; }
+.i2v-motion-inline-error { margin-top: 8px; }
+.i2v-motion-segmentation.ready { color: #9fe6b8; }
+.i2v-motion-video { display: block; width: 100%; margin-top: 10px; border-radius: 7px; background: #090b10; }
+.i2v-motion-duration-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
+.i2v-motion-duration-row .btn { min-height: 32px; padding: 5px 12px; font-size: 12px; }
+.i2v-motion-duration-row .btn.active { border-color: #7dd3fc; background: rgba(42, 77, 100, .32); color: #e6f7ff; }
+.i2v-motion-prompt-edit { margin-top: 10px; }
+.i2v-motion-prompt-edit summary { cursor: pointer; color: var(--muted, #a7afc2); font-size: 12px; }
+.i2v-motion-prompt-override { min-height: 88px; margin-top: 6px; font-family: ui-monospace, monospace; font-size: 12px; }
+.i2v-motion-open-row { margin-top: 12px; }
+.i2v-motion-open { width: 100%; min-height: 40px; font-size: 14px; }
+.modal.i2v-motion-modal { width: min(920px, 96vw); }
+.i2v-motion-modal-body { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.1fr); gap: 18px; }
+.i2v-motion-modal .i2v-motion-thumbs { flex-direction: column; }
+.i2v-motion-modal .i2v-motion-thumbs img { width: 100%; height: auto; }
+@media (max-width: 700px) { .i2v-motion-modal-body { grid-template-columns: 1fr; } }
+.agent-i2v-action { color: #6d4aff; border-color: color-mix(in srgb, #6d4aff 35%, var(--line) 65%); }
+.agent-i2v-action:disabled { opacity: .45; }
 .result-motion-video { width: 100%; max-height: 420px; background: #090b10; }
 .result-motion-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; color: var(--muted, #a7afc2); font-size: 11px; }
 .result-motion-meta span { padding: 3px 6px; border: 1px solid var(--line, #313747); border-radius: 999px; }
+
+/* ------------------------------------------- use-case question (#466) ----- */
+/* One optional, non-modal question after the first successful export. Same
+   surface as the bottom toasts, parked bottom-right so it never covers them. */
+.use-case-ask {
+	position: fixed;
+	z-index: 42;
+	right: 16px;
+	bottom: 76px;
+	width: min(300px, calc(100vw - 32px));
+	padding: 10px 12px;
+	border: 1px solid var(--line2);
+	border-radius: 6px;
+	background: var(--panel);
+	box-shadow: var(--shadow-md);
+	color: var(--fg);
+	font-size: 11px;
+}
+
+.use-case-ask-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+}
+
+.use-case-ask-prompt {
+	margin: 6px 0 8px;
+}
+
+.use-case-ask-choices {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+}
+
+.use-case-ask-choices button {
+	padding: 4px 8px;
+	border: 1px solid var(--line2);
+	border-radius: 4px;
+	background: transparent;
+	color: var(--fg);
+	font-size: 11px;
+	cursor: pointer;
+}
+
+.use-case-ask-choices button:hover {
+	border-color: var(--accent);
+	background: var(--accent-soft);
+}
+
+.use-case-ask-close {
+	padding: 0 4px;
+	border: 0;
+	background: transparent;
+	color: var(--muted);
+	font-size: 14px;
+	line-height: 1;
+	cursor: pointer;
+}
+
+.use-case-ask button:focus-visible {
+	outline: 2px solid var(--cyan);
+	outline-offset: 1px;
+}
+
+.use-case-ask .use-case-ask-note {
+	margin: 8px 0 0;
+	color: var(--muted);
+}
+}