cozyclay 3.0.3 → 3.1.0

package/src/styles.css

@@ -589,40 +589,6 @@ select {
 	line-height: 1.5;
 }
 
-.camera-tutorial-handoff {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 8px;
-	pointer-events: auto;
-	padding-top: 8px;
-}
-
-.camera-tutorial-handoff strong,
-.camera-tutorial-handoff p {
-	flex-basis: 100%;
-	margin: 0;
-}
-
-.camera-tutorial-handoff .btn,
-.camera-tutorial-handoff-dismiss {
-	font: inherit;
-	font-size: 11px;
-	padding: 6px 10px;
-	cursor: pointer;
-}
-
-.camera-tutorial-handoff-dismiss {
-	border: 1px solid var(--line2);
-	background: transparent;
-	color: var(--fg);
-}
-
-.camera-tutorial-handoff button:focus-visible {
-	outline: 2px solid var(--accent);
-	outline-offset: 2px;
-}
-
 @media (max-width: 700px) {
 	.first-success-guide {
 		right: 10px;
@@ -822,8 +788,7 @@ select {
 }
 
 /* The landing page's playground iframe: the viewport, a one-row transport,
-   the Shots lane (the camera tutorial adds a shot and draws its rail) and the
-   shot monitor stay; project chrome, hierarchy, inspector and the other lanes go. */
+   the Shots lane (a shot and its rail) and the shot monitor stay; project chrome, hierarchy, inspector and the other lanes go. */
 .app[data-embed-mode="playground"] {
 	width: 100vw;
 	height: 100vh;
@@ -877,50 +842,12 @@ select {
 .app[data-embed-mode="playground"] .tl-track.shots { height: 68px; min-height: 68px; }
 .app[data-embed-mode="playground"] .tl-head { padding: 6px 10px; }
 .app[data-embed-mode="playground"] .viewport { flex: 1 1 auto; }
-/* The shot monitor is the pane the tutorial points at: keep it small. */
+/* Keep the shot monitor small. */
 .app[data-embed-mode="playground"] .vp-shot-preview { width: 22% !important; height: auto !important; aspect-ratio: 16 / 9; right: 12px; bottom: 12px; }
 .app[data-embed-mode="playground"] .vp-shot-preview-tag { font-size: 12px; }
 /* The look-through button carries its label now; keep it on one line. */
 .app[data-embed-mode="playground"] .vp-look-through { height: 24px; padding: 0 8px; white-space: nowrap; }
 .app[data-embed-mode="playground"] .vp-look-through svg { width: 15px; height: 15px; }
-/* Tutorial hints: the landing page names the control the current step needs. */
-.app[data-playground-hint="look"] .vp-look-through,
-.app[data-playground-hint="shot"] .tl-track.shots .tl-track-add,
-.app[data-playground-hint="rail"] .tl-track.shots .tl-shot-block:not(.selected),
-.app[data-playground-hint="rail"] .tl-rail-draw,
-.app[data-playground-hint="play"] .tl-transport button:nth-child(2) {
-	animation: playground-pulse 1.1s ease-in-out infinite;
-	box-shadow: 0 0 0 2px #d9a066;
-}
-@keyframes playground-pulse {
-	0%, 100% { box-shadow: 0 0 0 2px #d9a066; }
-	50% { box-shadow: 0 0 0 7px rgba(217, 160, 102, 0); }
-}
-
-/* The Studio tutorial's spotlight (#211). Same idea as the landing hints
-   above, one region louder: inside the full studio the operator is scanning
-   two panes and forty controls, so the ring is 3px in the accent with a halo
-   breathing out of it rather than a thin amber outline. data-tutorial-step is
-   the current step's kind, published by CameraTutorial through App. */
-.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"] .dock-shot-look {
-	animation: tutorial-spotlight 1.5s var(--ease) infinite;
-	box-shadow: 0 0 0 3px var(--accent);
-}
-/* The rail is drawn INTO the top view, so the inset is the second half of the
-   step's target: a soft accent outline, no pulse — two pulsing things in one
-   step read as an alarm, not an instruction. */
-.app[data-tutorial-step="rail"] .vp-inset {
-	box-shadow: 0 10px 30px #00000073, 0 0 0 2px var(--accent-ring);
-}
-@keyframes tutorial-spotlight {
-	0%, 100% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 0 rgba(58, 124, 191, .45); }
-	50% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 8px rgba(58, 124, 191, 0); }
-}
-
 /* ------------------------------------------------------- dual viewport ---- */
 
 /* Both panes render every frame out of one canvas; these divs only supply the
@@ -2413,32 +2340,6 @@ input[type=range]::-moz-range-thumb {
 	color: #dcdce2;
 	font-weight: 600;
 }
-/* ------------------------------------------------------ ardy panel ------- */
-
-.ardy-status {
-	margin: 10px 0 0;
-	font-size: 11.5px;
-	line-height: 1.5;
-	color: var(--muted);
-}
-
-.ardy-status:before {
-	content: "▸ ";
-	color: var(--cyan);
-}
-
-.ardy-outcome.done {
-	color: var(--muted);
-}
-
-.ardy-outcome.done code {
-	color: var(--cyan);
-}
-
-.ardy-outcome.error {
-	color: #e5484d;
-}
-
 /* ----------------------------------------------------------- subjects ----- */
 
 .subjects-row {
@@ -5168,8 +5069,6 @@ input[type=range]::-moz-range-thumb {
 }
 
 .inspector-hint,
-.ardy-hint,
-.ardy-status,
 .hint,
 .check,
 .field label,
@@ -5178,9 +5077,7 @@ input[type=range]::-moz-range-thumb {
 	color: var(--lg-9a9a9a, #9a9a9a);
 }
 
-.hint b,
-.ardy-hint code,
-.ardy-outcome code {
+.hint b {
 	color: var(--lg-d2d2d2, #d2d2d2);
 }
 
@@ -5701,7 +5598,6 @@ input[type=range]::-moz-range-thumb {
 }
 
 .inspector-hint,
-.ardy-hint,
 .studio-hint {
 	font-size: 10.5px;
 	line-height: 1.55;
@@ -5742,12 +5638,6 @@ input[type=range]::-moz-range-thumb {
 .row .val,
 .readout,
 .inspector-status-grid,
-.ardy-status,
-.ardy-report-grid b,
-.ardy-report-grid span,
-.ardy-meta,
-.ardy-outcome code,
-.ardy-hint code,
 .kbd-hint,
 .caption,
 .hud,
@@ -6831,8 +6721,8 @@ input[type=range]::-moz-range-thumb {
 .app[data-workflow-mode="motion"] .workflow-scene-context,
 .app[data-workflow-mode="motion"] .workflow-camera-context { display: none; }
 .app[data-workflow-mode="motion"] .workflow-toolbar-hint { display: inline-flex; }
-.app[data-workflow-mode="motion"] .vp-inset,
-.app[data-workflow-mode="motion"] .vp-shot-preview { display: none !important; }
+/* The shot preview stays in Motion: it fills the dock's Shot Camera frame. */
+.app[data-workflow-mode="motion"] .vp-inset { display: none !important; }
 
 /* Keep the timeline focused on the selected workflow.  Pose-correction and
    take-generation controls are useful while authoring motion, but they are
@@ -7618,12 +7508,7 @@ input[type=range] {
 
 /* hints/status: smaller, quieter */
 .inspector-hint,
-.ardy-hint,
-.ardy-status,
-.hint,
-.ardy-caveat,
-.ardy-meta,
-.ardy-clamp {
+.hint {
 	font-size: 10px;
 	line-height: 1.5;
 }
@@ -9429,507 +9314,7 @@ input[type=range] {
 	color: #e08a7a;
 }
 
-/* ------------------------------------------------- camera tutorial ------- */
-
-/* The Studio-native camera tutorial (#206): a strip of seven step chips and
-   one hint card, hung under the 27px viewport titlebar, left of the Top-View
-   inset (right:15px). The overlay is transparent to the pointer — every step
-   is finished by working the stage underneath it — so only the close button
-   takes clicks. */
-.camera-tutorial {
-	position: absolute;
-	top: 35px;
-	left: 12px;
-	z-index: 7;
-	width: min(430px, calc(100% - 24px - 26%));
-	padding: 8px 10px 9px;
-	display: flex;
-	flex-direction: column;
-	gap: 7px;
-	background: color-mix(in srgb, var(--panel) 94%, #000);
-	border: 1px solid var(--line2);
-	border-radius: 8px;
-	box-shadow: var(--shadow-md);
-	pointer-events: none;
-	animation: rise var(--med) var(--ease) both;
-}
-
-/* The look-through exit pill is centred in the same band (top:60px), and it
-   is the only way back to the free camera without the keyboard. While the
-   player is up the card gives that width back rather than covering it. */
-.camera-tutorial[data-previewing="1"] {
-	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;
-	gap: 4px;
-	margin: 0;
-	padding: 0 22px 0 0;
-	list-style: none;
-}
-
-.camera-tutorial-steps li {
-	display: inline-flex;
-	align-items: center;
-	gap: 5px;
-	padding: 2px 7px;
-	border: 1px solid var(--line2);
-	border-radius: 999px;
-	color: var(--muted);
-	font-size: 10px;
-	font-weight: 700;
-	letter-spacing: .02em;
-}
-
-.camera-tutorial-steps li i {
-	font-family: var(--mono);
-	font-style: normal;
-	font-size: 9px;
-	opacity: .85;
-}
-
-.camera-tutorial-steps li[data-current="1"] {
-	border-color: var(--accent);
-	background: var(--accent-soft);
-	color: var(--fg);
-}
-
-.camera-tutorial-steps li[data-done="1"] {
-	border-color: color-mix(in srgb, #65c18c 55%, transparent);
-	color: #65c18c;
-}
-
-.camera-tutorial-card {
-	display: flex;
-	align-items: baseline;
-	gap: 8px;
-	color: var(--fg);
-	font-size: 11.5px;
-	line-height: 1.45;
-}
-
-.camera-tutorial-card p {
-	margin: 0;
-}
-
-.camera-tutorial-count {
-	flex: none;
-	color: var(--accent);
-	font-family: var(--mono);
-	font-size: 9.5px;
-	font-weight: 700;
-	letter-spacing: .06em;
-	text-transform: uppercase;
-}
-
-.camera-tutorial-count.done {
-	color: #65c18c;
-}
-
-.camera-tutorial kbd {
-	padding: 1px 5px;
-	border: 1px solid var(--line2);
-	border-radius: 4px;
-	background: var(--card2);
-	color: var(--fg);
-	font-family: var(--mono);
-	font-size: 9.5px;
-}
-
-.camera-tutorial-keys {
-	display: inline-flex;
-	gap: 3px;
-	margin: 0 2px;
-}
-
-.camera-tutorial-keys kbd[data-done="1"] {
-	border-color: color-mix(in srgb, #65c18c 55%, transparent);
-	color: #65c18c;
-}
-
-.camera-tutorial-close {
-	position: absolute;
-	top: 4px;
-	right: 5px;
-	padding: 0 4px;
-	border: 0;
-	background: transparent;
-	color: var(--muted);
-	font-size: 15px;
-	line-height: 1;
-	cursor: pointer;
-	pointer-events: auto;
-}
-
-.camera-tutorial-close:hover,
-.camera-tutorial-close:focus-visible {
-	color: var(--fg);
-}
-
-/* The card's region pointer: the control the step needs is in another pane,
-   so the copy opens with which way to look before it says what to do. */
-.camera-tutorial-where {
-	margin-right: 6px;
-	padding: 1px 5px;
-	border: 1px solid var(--accent-ring);
-	border-radius: 4px;
-	color: var(--accent);
-	font-size: 9.5px;
-	font-weight: 700;
-	letter-spacing: .02em;
-	white-space: nowrap;
-	vertical-align: 1px;
-}
-
-/* ------------------------------------------------- tutorial beacon ------- */
-
-/* A numbered circle, a leader line and a caption chip pinned to the control
-   the current step needs (#211). Portalled to <body>, so it clears every pane
-   in the studio (the highest viewport/timeline layer is 13) and clips to
-   nothing; never takes the pointer, so the control underneath stays
-   clickable. */
-.tutorial-beacon {
-	position: fixed;
-	z-index: 14;
-	display: flex;
-	align-items: center;
-	gap: 7px;
-	pointer-events: none;
-	animation: rise var(--med) var(--ease) backwards;
-}
-
-.tutorial-beacon-leader {
-	position: absolute;
-	inset: 0;
-	overflow: visible;
-	width: 100%;
-	height: 100%;
-}
-
-.tutorial-beacon-leader line {
-	stroke: var(--accent);
-	stroke-width: 1.5;
-	stroke-linecap: round;
-	stroke-dasharray: 3 3;
-	opacity: .85;
-}
-
-.tutorial-beacon-dot {
-	position: relative;
-	flex: none;
-	width: 22px;
-	height: 22px;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	border-radius: 50%;
-	background: var(--accent);
-	color: var(--on-accent);
-	font-family: var(--mono);
-	font-size: 11px;
-	font-weight: 700;
-	box-shadow: 0 0 0 3px rgba(58, 124, 191, .28), var(--shadow);
-	animation: tutorial-beacon-breathe 1.5s var(--ease) infinite;
-}
-
-.tutorial-beacon-label {
-	position: relative;
-	max-width: 190px;
-	padding: 3px 8px;
-	border: 1px solid var(--accent-ring);
-	border-radius: 6px;
-	background: color-mix(in srgb, var(--panel) 94%, #000);
-	box-shadow: var(--shadow-md);
-	color: var(--fg);
-	font-size: 10.5px;
-	font-weight: 600;
-	line-height: 1.35;
-	word-break: keep-all;
-}
-
-@keyframes tutorial-beacon-breathe {
-	0%, 100% { box-shadow: 0 0 0 3px rgba(58, 124, 191, .28), var(--shadow); }
-	50% { box-shadow: 0 0 0 8px rgba(58, 124, 191, 0), var(--shadow); }
-}
-
-/* ------------------------------------------------- gesture cue ----------- */
-
-/* Steps 1–4 have no control to point at, so the cue draws the hand instead:
-   a mouse glyph with the button the step wants lit, moving the way the hand
-   is supposed to move. Centre-bottom of the viewport, clear of the shot
-   preview (bottom-right) and the Top-View inset (top-right). */
-.tutorial-cue {
-	position: absolute;
-	left: 50%;
-	bottom: 18px;
-	z-index: 7;
-	width: 120px;
-	transform: translateX(-50%);
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 7px;
-	padding: 10px 8px 8px;
-	border: 1px solid var(--line2);
-	border-radius: 10px;
-	background: color-mix(in srgb, var(--panel) 82%, transparent);
-	box-shadow: var(--shadow-md);
-	backdrop-filter: blur(6px);
-	pointer-events: none;
-	opacity: 1;
-	transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
-	/* `backwards`, not `both`: a filled-forwards animation would pin opacity at
-	   the keyframe's value and the fade-out below would never run. riseCenter
-	   keeps the -50% centring the base rule needs. */
-	animation: riseCenter var(--med) var(--ease) backwards;
-}
-
-.tutorial-cue[data-leaving="1"] {
-	opacity: 0;
-	transform: translateX(-50%) translateY(6px);
-}
-
-.tutorial-cue-stage {
-	position: relative;
-	display: flex;
-	align-items: flex-end;
-	justify-content: center;
-	gap: 6px;
-	/* full width so the orbit keycap and pivot anchor to the panel, not to the
-	   glyph's own shrink-wrapped box */
-	width: 100%;
-	height: 54px;
-}
-
-.tutorial-cue-arm {
-	position: relative;
-	display: inline-flex;
-	align-items: flex-end;
-}
-
-.tutorial-cue-mouse {
-	width: 30px;
-	height: 44px;
-	overflow: visible;
-}
-
-.cue-mouse-body {
-	fill: none;
-	stroke: var(--muted);
-	stroke-width: 2.5;
-}
-
-.cue-mouse-left,
-.cue-mouse-right {
-	fill: var(--card2);
-	stroke: var(--muted);
-	stroke-width: 1.5;
-}
-
-.cue-mouse-wheel {
-	fill: var(--muted2);
-}
-
-/* the lit control per step */
-.tutorial-cue[data-kind="fly"] .cue-mouse-right,
-.tutorial-cue[data-kind="walk"] .cue-mouse-right {
-	fill: var(--accent);
-	stroke: var(--accent);
-}
-
-.tutorial-cue[data-kind="orbit"] .cue-mouse-left {
-	fill: var(--accent);
-	stroke: var(--accent);
-}
-
-.tutorial-cue[data-kind="dolly"] .cue-mouse-wheel {
-	fill: var(--accent);
-}
-
-/* fly: the mouse slides left and right under a two-headed arc */
-.tutorial-cue[data-kind="fly"] .tutorial-cue-arm {
-	animation: cue-swing 2.2s var(--ease) infinite;
-}
-
-.tutorial-cue-arc {
-	position: absolute;
-	left: 50%;
-	top: -13px;
-	width: 56px;
-	height: 18px;
-	transform: translateX(-50%);
-	overflow: visible;
-}
-
-.cue-arc-line,
-.cue-arc-head {
-	fill: none;
-	stroke: var(--accent);
-	stroke-width: 1.6;
-	stroke-linecap: round;
-	stroke-linejoin: round;
-}
-
-/* dolly: the wheel is lit and the arrows breathe up and down */
-.tutorial-cue-updown {
-	width: 12px;
-	height: 40px;
-	overflow: visible;
-}
-
-.cue-up,
-.cue-down {
-	fill: none;
-	stroke: var(--accent);
-	stroke-width: 1.6;
-	stroke-linecap: round;
-	stroke-linejoin: round;
-}
-
-.cue-up { animation: cue-up 1.8s var(--ease) infinite; }
-.cue-down { animation: cue-down 1.8s var(--ease) infinite; }
-
-/* orbit: Alt is held while the mouse arcs around the subject. The keycap sits
-   in the stage's bottom-left corner and the pivot dot in its bottom-centre,
-   so the swing above them never crosses either. */
-.tutorial-cue[data-kind="orbit"] .tutorial-cue-stage {
-	height: 64px;
-	align-items: flex-start;
-}
-
-.tutorial-cue-key {
-	position: absolute;
-	left: 0;
-	bottom: 0;
-	padding: 2px 5px;
-	border: 1px solid var(--accent);
-	border-radius: 4px;
-	background: var(--accent-soft);
-	color: var(--fg);
-	font-family: var(--mono);
-	font-size: 9px;
-	font-weight: 700;
-}
-
-.tutorial-cue-pivot {
-	position: absolute;
-	left: 50%;
-	bottom: 1px;
-	width: 6px;
-	height: 6px;
-	transform: translateX(-50%);
-	border-radius: 50%;
-	background: var(--muted);
-	box-shadow: 0 0 0 3px var(--card2);
-}
-
-/* the pivot is 20px below the mouse, so the arc reads as circling a subject */
-.tutorial-cue[data-kind="orbit"] .tutorial-cue-arm {
-	transform-origin: 50% 145%;
-	animation: cue-orbit 2.8s var(--ease) infinite;
-}
-
-/* walk: the six keys, pulsing until each one has been pressed */
-.tutorial-cue-keys {
-	display: grid;
-	grid-template-columns: repeat(6, 1fr);
-	gap: 3px;
-	width: 100%;
-}
-
-.tutorial-cue-keys kbd {
-	padding: 2px 0;
-	border: 1px solid var(--line2);
-	border-radius: 3px;
-	background: var(--card2);
-	color: var(--muted);
-	font-family: var(--mono);
-	font-size: 8.5px;
-	font-weight: 700;
-	text-align: center;
-	animation: cue-key 1.6s var(--ease) infinite;
-}
-
-.tutorial-cue-keys kbd[data-done="1"] {
-	border-color: color-mix(in srgb, #65c18c 60%, transparent);
-	background: color-mix(in srgb, #65c18c 16%, transparent);
-	color: #65c18c;
-	animation: none;
-}
-
-.tutorial-cue-caption {
-	color: var(--fg);
-	font-size: 9.5px;
-	font-weight: 600;
-	line-height: 1.3;
-	text-align: center;
-	word-break: keep-all;
-}
-
-@keyframes cue-swing {
-	0%, 100% { transform: translateX(-7px); }
-	50% { transform: translateX(7px); }
-}
-
-@keyframes cue-orbit {
-	0%, 100% { transform: rotate(-13deg); }
-	50% { transform: rotate(13deg); }
-}
-
-@keyframes cue-up {
-	0%, 100% { transform: translateY(2px); opacity: .45; }
-	40% { transform: translateY(-2px); opacity: 1; }
-}
-
-@keyframes cue-down {
-	0%, 100% { transform: translateY(-2px); opacity: .45; }
-	90% { transform: translateY(2px); opacity: 1; }
-}
-
-@keyframes cue-key {
-	0%, 100% { border-color: var(--line2); color: var(--muted); }
-	50% { border-color: var(--accent); color: var(--fg); }
-}
-
-/* Reduced motion: the tutorial still points at the control, it just stops
-   moving — a static ring, a static glyph, static keycaps. */
 @media (prefers-reduced-motion: reduce) {
-	.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 {
-		animation: none;
-		box-shadow: 0 0 0 3px var(--accent);
-	}
-	.tutorial-beacon,
-	.tutorial-beacon-dot,
-	.tutorial-cue,
-	.tutorial-cue-arm,
-	.tutorial-cue-keys kbd,
-	.cue-up,
-	.cue-down {
-		animation: none;
-	}
-	.tutorial-cue { transition: none; }
 	/* The agent's receipt highlight still appears and is still cleared by the
 	   host's own timer; only the fade is dropped. */
 	.hierarchy-row.agent-touched::after { animation: none; opacity: 1; }
@@ -10124,59 +9509,6 @@ input[type=range] {
 .agent-history-empty { padding: 10px; color: var(--muted); }
 .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). */
-.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; }