@dailies-studio/shot-editor 0.1.0

package/src/styles.css

@@ -0,0 +1,2948 @@
+/* The shot chrome's shell.
+ *
+ * THE RULE THAT MATTERS, and the reason this block is at the top: no ancestor
+ * of `.stage-frame` may carry `transform`, `filter`, `backdrop-filter`,
+ * `contain` or `will-change`. Each of those makes the element a containing
+ * block for fixed-position descendants, and the iframe is `position: fixed;
+ * inset: 0`. Add one to `.shell` for a shadow or an animation and the stage
+ * silently sizes itself to whichever panel became the containing block —
+ * which looks like a layout bug and is a stacking-context bug.
+ *
+ * ── WHY THIS IMPORTS styles.css AND NOT tokens.css ──────────────────────
+ *
+ * It used to import only tokens.css, which gave this chrome the PALETTE and
+ * none of the RULES — so every shared widget it renders (NumberField, Toggle,
+ * SegmentedControl, InspectorSection, InspectorRow) fell back to raw
+ * user-agent styling: native inputs, sliders as 12px stubs, labels colliding
+ * with values, no section rhythm at all. The lane looked unfinished because
+ * half of its stylesheet was never loaded.
+ *
+ * styles.css @imports tokens.css itself, so this one line is both halves. It
+ * is what canvas-editor and scene-editor have always done.
+ */
+@import "@dailies-studio/ui/styles.css";
+
+/* ── THE LANE'S PALETTE ──────────────────────────────────────────────────
+ *
+ * The rules below were written against names that DO NOT EXIST in tokens.css
+ * — --bg, --panel, --text, --input-bg, --control, --font-ui and the
+ * timeline's colours. Every one silently resolved to its hardcoded fallback,
+ * so this chrome ran on a private palette while the four names that DID
+ * resolve (accent, border, danger, warn) tracked the real one. A chrome half
+ * on one palette and half on another is the definition of incoherent.
+ *
+ * The palette itself lives in shotTokens.css because the STAGE needs the same
+ * one and is a separate document. See that file for why it overrides the
+ * house accent. */
+@import "./shotTokens.css";
+
+:root {
+  /* Chrome-only: the shared widgets read these, re-pointed so NumberField,
+     Toggle and SegmentedControl land on the lane surfaces rather than the
+     house ones. The stage renders no widgets, so they stay out of the shared
+     palette file. */
+  --control-bg: var(--control);
+  --control-bg-hover: var(--control-hover);
+  --control-border: transparent;
+  --control-border-hover: var(--border);
+  --control-border-focus: var(--accent);
+  --control-radius: 8px;
+  --control-h: 30px;
+  --panel-bg: var(--panel);
+  --divider: var(--border-soft);
+  --focus-ring: 0 0 0 3px var(--accent-soft);
+  --label-w: 76px;
+
+  /* THE SLIDER FILL, QUIETED. NumberField paints a progress fill behind its
+     label to advertise drag-to-scrub. At the house 24% accent it read as a
+     solid coloured block sitting on top of the label, which was the single
+     most broken-looking thing in this panel. It stays, because the affordance
+     is real, at an alpha that says "draggable" rather than "selected". */
+  --slider-fill: rgba(255, 255, 255, 0.05);
+  --slider-thumb: rgba(255, 255, 255, 0.14);
+
+  --shadow-panel: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
+  --panel-radius: 12px;
+
+  /* THE TWO SIDE RAILS' WIDTHS, AS VARIABLES, because five other boxes are
+     positioned off them: the control strip and the timeline dock both clear
+     the rails, and collapsing a rail has to slide them over rather than leave
+     a hole. One number per rail, set here and overridden by the collapse
+     classes below, so there is no arithmetic to keep in sync by hand. */
+  --rail-w: 232px;
+  --inspector-w: 288px;
+}
+
+/* Collapsed rails are zero-width, not `display: none`: the boxes that track
+   them do arithmetic on these, and a missing value would break the sum. The
+   panels themselves are hidden by their own rules. */
+.shell.is-rail-collapsed {
+  --rail-w: 0px;
+}
+
+.shell.is-inspector-collapsed {
+  --inspector-w: 0px;
+}
+
+.shell.is-rail-collapsed > .left-rail,
+.shell.is-inspector-collapsed > .inspector,
+.shell.is-inspector-collapsed > .agent-panel {
+  display: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  font: var(--font);
+  color: var(--text);
+  background: var(--bg);
+  -webkit-font-smoothing: antialiased;
+}
+
+.shell {
+  position: relative;
+  height: 100%;
+  /* No transform, no filter, no contain. See the header. */
+}
+
+.stage-frame {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
+}
+
+/* Every floating panel shares one recipe, so a new panel cannot invent its
+   own shade of "panel". */
+.shell-header,
+.left-rail,
+.inspector,
+.agent-panel,
+.timeline-dock,
+.tool-dock,
+.view-mode-bar,
+.camera-view-bar,
+.tool-flyout,
+.overlay-message {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--panel-radius);
+  box-shadow: var(--shadow-panel);
+}
+
+/* ---- buttons ------------------------------------------------------------ */
+/* One button vocabulary for the whole chrome. `.btn` is the shared class the
+   markup already uses; the bare-element rules below catch the panels that
+   render plain <button>s. */
+.btn,
+.shell-header button,
+.dock-head button,
+.export-dialog button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 10px;
+  font: inherit;
+  font-weight: 500;
+  color: var(--text);
+  background: var(--control);
+  border: 1px solid transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
+}
+
+.btn:hover:not(:disabled),
+.shell-header button:hover:not(:disabled),
+.dock-head button:hover:not(:disabled),
+.export-dialog button:hover:not(:disabled) {
+  background: var(--control-hover);
+}
+
+.btn:disabled,
+.shell-header button:disabled,
+.export-dialog button:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.btn.is-icon,
+.shell-header button.is-icon {
+  width: 28px;
+  padding: 0;
+  font-size: 13px;
+}
+
+/* The one accent control per surface. Raylight has exactly one blue button on
+   screen at a time (Share); ours is Export. */
+.btn.is-primary,
+.shell-header button.is-primary {
+  background: var(--accent);
+  border-color: transparent;
+  color: #fff;
+}
+
+.btn.is-primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+.btn.is-active,
+.btn[aria-pressed="true"] {
+  background: var(--accent-soft);
+  color: #cfe4ff;
+}
+
+.btn.is-danger {
+  color: var(--danger-text);
+}
+
+.btn:focus-visible,
+.shell-header button:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* ---- header ------------------------------------------------------------- */
+.shell-header {
+  position: fixed;
+  top: 12px;
+  left: 12px;
+  right: 12px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 48px;
+  padding: 0 10px;
+}
+
+.shell-header-spacer {
+  flex: 1;
+}
+
+.doc-switcher {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+/* A native <select> paints its own OS chrome — a light popup arrow and a
+   system font on a dark panel, which is exactly what "not designed" looks
+   like. appearance:none plus a drawn chevron is the whole fix. */
+.doc-switcher-select,
+.doc-switcher-input,
+.select {
+  appearance: none;
+  -webkit-appearance: none;
+  height: 30px;
+  min-width: 156px;
+  padding: 0 28px 0 10px;
+  font: inherit;
+  font-weight: 500;
+  color: var(--text);
+  background-color: var(--control);
+  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
+    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
+  background-position: calc(100% - 15px) 13px, calc(100% - 10px) 13px;
+  background-size: 5px 5px, 5px 5px;
+  background-repeat: no-repeat;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.doc-switcher-input {
+  background-image: none;
+  padding-right: 10px;
+  cursor: text;
+}
+
+.doc-switcher-select:hover,
+.doc-switcher-input:hover {
+  background-color: var(--control-hover);
+}
+
+.doc-switcher-select:focus-visible,
+.doc-switcher-input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: var(--focus-ring);
+}
+
+.doc-switcher-select option {
+  background: var(--panel-raised);
+  color: var(--text);
+}
+
+.history-controls,
+.zoom-controls,
+.status-badges,
+.transport {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.transport {
+  gap: 8px;
+  margin-left: 4px;
+}
+
+/* The scrub is the widest thing in the header and it was a raw range input.
+   Styled here rather than in the shared sheet because no other chrome puts a
+   transport in its header. */
+.transport-scrub {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 240px;
+  height: 18px;
+  background: transparent;
+  cursor: pointer;
+}
+
+.transport-scrub::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 999px;
+  background: var(--control);
+}
+
+.transport-scrub::-webkit-slider-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  margin-top: -4px;
+  border-radius: 999px;
+  background: #fff;
+  border: 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
+}
+
+.transport-scrub::-moz-range-track {
+  height: 4px;
+  border-radius: 999px;
+  background: var(--control);
+}
+
+.transport-scrub::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border: 0;
+  border-radius: 999px;
+  background: #fff;
+}
+
+.transport-scrub:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: 999px;
+}
+
+/* Play/pause is the transport's one primary control, the same call the motion
+   and canvas chromes make. */
+.transport-play {
+  min-width: 40px;
+}
+
+.transport-readout,
+.zoom-readout,
+.dock-readout {
+  font-variant-numeric: tabular-nums;
+  color: var(--text-dim);
+}
+
+.transport-readout {
+  min-width: 64px;
+}
+
+.zoom-readout {
+  min-width: 48px;
+  text-align: center;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  white-space: nowrap;
+}
+
+.badge-quiet {
+  color: var(--text-faint);
+  border-color: transparent;
+}
+
+.badge-warn {
+  border-color: rgba(245, 165, 36, 0.4);
+  color: var(--warn);
+}
+
+.badge-error {
+  border-color: rgba(255, 77, 79, 0.45);
+  color: var(--danger-text);
+}
+
+/* ---- overlays ----------------------------------------------------------- */
+.overlay-strip {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 76px;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  pointer-events: none;
+  max-width: 560px;
+}
+
+.overlay-message {
+  pointer-events: auto;
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 10px 12px;
+  line-height: 1.5;
+  border-color: rgba(255, 77, 79, 0.5);
+}
+
+.overlay-message button {
+  font: inherit;
+  font-size: 14px;
+  color: var(--text-dim);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  padding: 0;
+}
+
+.overlay-message button:hover {
+  color: var(--text);
+}
+
+.empty-state {
+  position: fixed;
+  inset: 0;
+  z-index: 5;
+  display: grid;
+  place-content: center;
+  text-align: center;
+  gap: 6px;
+  pointer-events: none;
+  color: var(--text-faint);
+}
+
+.empty-state h1 {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0;
+  color: var(--text-dim);
+}
+
+.empty-state p {
+  margin: 0;
+}
+
+/* ---- left rail ---------------------------------------------------------- */
+.left-rail {
+  position: fixed;
+  top: 72px;
+  left: 12px;
+  bottom: 12px;
+  width: var(--rail-w);
+  z-index: 10;
+  overflow: auto;
+  /* A column so the manual can pin itself to the bottom with margin-top: auto.
+     Children keep their natural height (flex-shrink: 0 below) — when the tree
+     outgrows the rail, the rail scrolls; nothing compresses. */
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+}
+
+.left-rail:empty {
+  display: none;
+}
+
+.left-rail > * {
+  flex-shrink: 0;
+}
+
+/* ---- the manual ---------------------------------------------------------- */
+/* Bottom-left, the corner nothing else claims. `margin-top: auto` pins it
+   there while the tree is short; once the rail scrolls it is simply last. */
+.help-section {
+  margin-top: auto;
+  padding-top: 12px;
+}
+
+.help-summary {
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+  margin: 0;
+}
+
+.help-summary::-webkit-details-marker {
+  display: none;
+}
+
+.help-summary::before {
+  content: "▸ ";
+}
+
+.help-section[open] > .help-summary::before {
+  content: "▾ ";
+}
+
+.help-basics {
+  list-style: disc;
+  margin: 6px 0;
+  padding: 0 4px 0 18px;
+  color: var(--text-dim);
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.help-basics li + li {
+  margin-top: 4px;
+}
+
+.help-rows {
+  list-style: none;
+  margin: 0 0 4px;
+  padding: 0 4px;
+}
+
+.help-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 2px 0;
+  color: var(--text-dim);
+  font-size: 11px;
+}
+
+.help-row kbd,
+.help-note code {
+  font: inherit;
+  font-size: 10px;
+  color: var(--text);
+  background: var(--control);
+  border-radius: 5px;
+  padding: 1px 5px;
+  white-space: nowrap;
+}
+
+.help-note {
+  margin: 0 0 6px;
+  padding: 0 4px;
+  color: var(--text-faint);
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.help-command {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  margin: 0 0 6px;
+  padding: 0 4px;
+}
+
+.help-command code {
+  flex: 1;
+  font-size: 10px;
+  line-height: 1.5;
+  color: var(--text);
+  background: var(--control);
+  border-radius: 5px;
+  padding: 4px 6px;
+  /* One long claude-mcp-add line must wrap inside a 232px rail, not scroll. */
+  word-break: break-all;
+}
+
+.help-command button {
+  font: inherit;
+  font-size: 10px;
+  color: var(--text-dim);
+  background: var(--control);
+  border: 0;
+  border-radius: 6px;
+  padding: 3px 7px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.file-search {
+  margin-bottom: 4px;
+}
+
+.file-search input {
+  width: 100%;
+  height: 30px;
+  font: inherit;
+  color: var(--text);
+  background: var(--control);
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 0 10px;
+}
+
+.file-search input::placeholder {
+  color: var(--text-faint);
+}
+
+.file-search input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: var(--focus-ring);
+}
+
+.file-section-label {
+  margin: 14px 0 6px;
+  padding: 0 4px;
+  color: var(--text-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.scene-list,
+.layer-list,
+.layer-children {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.layer-children {
+  padding-left: 12px;
+}
+
+.scene-row,
+.layer-name {
+  font: inherit;
+  font-weight: 500;
+  color: var(--text);
+  background: transparent;
+  border: 0;
+  padding: 0 8px;
+  height: 28px;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  border-radius: 7px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* A shot row carries its own icon, so it lays out like a layer row: icon,
+   then a label that ellipsizes on its own (a flex container ignores
+   text-overflow on a bare text node). */
+.scene-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding-left: 6px;
+}
+
+.row-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.scene-row:hover,
+.layer-row:hover {
+  background: var(--control);
+}
+
+.scene-row.is-current {
+  background: var(--accent-soft);
+  color: #cfe4ff;
+}
+
+.layer-row {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding-right: 4px;
+  border-radius: 7px;
+}
+
+.layer-row.is-selected {
+  background: var(--accent-soft);
+}
+
+.layer-row.is-selected .layer-name {
+  color: #cfe4ff;
+}
+
+/* The kind icon. Fixed width so every name in the tree starts on the same
+   column. ACCENT, not dim — the Framer read: the icon says what a row IS at a
+   glance, the 500-weight name says which one. */
+.layer-kind {
+  flex: none;
+  width: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent);
+  user-select: none;
+}
+
+.layer-kind svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* The disclosure chevron. Always visible on a row that can fold (unlike the
+   hover-only flags: a fold changes what the LIST shows, so its affordance
+   cannot be a secret), pointing right and rotating open — the ui package's
+   IconChevron convention. The spacer keeps leaf rows' kind icons on the same
+   column. */
+.layer-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-dim);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  border-radius: 5px;
+  padding: 2px;
+  flex: none;
+  width: 14px;
+}
+
+.layer-toggle svg {
+  width: 10px;
+  height: 10px;
+  transition: transform 80ms ease;
+}
+
+.layer-toggle.is-open svg {
+  transform: rotate(90deg);
+}
+
+.layer-toggle:hover {
+  color: var(--text);
+  background: var(--control-hover);
+}
+
+.layer-toggle-spacer {
+  flex: none;
+  width: 14px;
+}
+
+/* The eye and the lock only appear on hover or when they are ON, so a
+   forty-layer tree is names rather than eighty grey glyphs. */
+.layer-flag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-dim);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  opacity: 0;
+  border-radius: 5px;
+  padding: 3px 4px;
+  flex: none;
+}
+
+.layer-flag svg {
+  width: 13px;
+  height: 13px;
+}
+
+.layer-row:hover .layer-flag,
+.layer-flag[aria-pressed="true"],
+.layer-flag:focus-visible {
+  opacity: 0.75;
+}
+
+.layer-flag:hover {
+  opacity: 1 !important;
+  background: var(--control-hover);
+}
+
+.layer-rename {
+  flex: 1;
+  min-width: 0;
+  font: inherit;
+  color: var(--text);
+  background: var(--input-bg);
+  border: 1px solid var(--accent);
+  border-radius: 6px;
+  padding: 3px 6px;
+}
+
+.layer-rename:focus {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* ---- MCP (connect an agent) ---------------------------------------------- */
+/* Reuses the manual's note/command rules — same prose, same rail. */
+.mcp-section {
+  margin-top: 4px;
+}
+
+.panel-title {
+  font-weight: 600;
+  color: var(--text);
+  margin: 0 0 6px;
+  padding: 0 4px;
+}
+
+.panel-empty {
+  color: var(--text-faint);
+  padding: 8px 4px;
+  line-height: 1.5;
+}
+
+/* ---- tool dock ---------------------------------------------------------- */
+/* ---- resizable edges ---------------------------------------------------- */
+/* 8px of hit area for a 1px seam. Anything thinner is a target you have to
+   aim at; the visible line is drawn on hover only, so at rest the seam is
+   whatever the panel's own border already was.
+
+   `touch-action: none` is what makes a pen or touch drag resize instead of
+   scrolling the page out from under the gesture. */
+.rail-resize,
+.dock-resize,
+.split-resize {
+  z-index: 12;
+  touch-action: none;
+  background: transparent;
+  transition: background 120ms ease;
+}
+
+.rail-resize:hover,
+.dock-resize:hover,
+.split-resize:hover {
+  background: var(--accent-soft);
+}
+
+/* The stage's own divider between the working and camera panes. It sits ON the
+   seam the scissor draws to, whose position is `--split-x` — written by the
+   shell's imperative writer from the same `splitRatio` `paneRects` reads, so
+   the handle and the rendered boundary cannot end up a column apart.
+
+   BELOW the top control strip and above the dock, so it never overlaps either.
+   Full height would put it under the header, where it is unreachable anyway. */
+.split-resize {
+  position: fixed;
+  top: 128px;
+  bottom: calc(var(--dock-h) + 24px);
+  left: var(--split-x);
+  width: 8px;
+  margin-left: -4px;
+  cursor: col-resize;
+}
+
+/* The rail's inner edge: rail sits at left:12 and is --rail-w wide, so its
+   right edge is exactly that sum. Centred on the seam by half its width. */
+.rail-resize {
+  position: fixed;
+  top: 72px;
+  bottom: 12px;
+  left: calc(var(--rail-w) + 12px);
+  width: 8px;
+  margin-left: -4px;
+  cursor: col-resize;
+}
+
+/* The dock's top edge. Inside the dock (which is `position: fixed`), because
+   the dock's height is content-driven up to its max and only it knows where
+   its top actually is. */
+.dock-resize {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 8px;
+  cursor: row-resize;
+  border-top-left-radius: var(--panel-radius);
+  border-top-right-radius: var(--panel-radius);
+}
+
+/* ---- panel toggles (header) --------------------------------------------- */
+/* One button per panel, plus "hide everything". Grouped tight so they read as
+   one control rather than four buttons that happen to be adjacent. */
+.panel-toggles {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 4px;
+}
+
+.btn-icon {
+  min-width: 28px;
+  padding: 0 6px;
+  justify-content: center;
+}
+
+/* ---- the control strip -------------------------------------------------- */
+/* One row along the top of the stage holding the view modes, the camera verbs
+   and the tools. It is the ONLY positioned box of the three; each bar inside
+   is a plain flex child, which is what lets them sit as one continuous strip
+   and wrap together on a narrow window instead of overlapping each other.
+
+   `left` tracks the left rail through --rail-w, so collapsing the rail slides
+   the strip over rather than leaving a hole. */
+.control-strip {
+  position: fixed;
+  top: 72px;
+  left: calc(var(--rail-w) + 24px);
+  right: calc(var(--inspector-w) + 24px);
+  z-index: 12;
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 8px;
+  /* Only the bars themselves take pointer events; the gaps between them are
+     stage, and a full-width invisible box swallowing clicks along the top of
+     the canvas is the classic version of this bug. */
+  pointer-events: none;
+}
+
+.control-strip > * {
+  pointer-events: auto;
+}
+
+.tool-dock {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 5px;
+  border-radius: 12px;
+}
+
+/* Both are flex children of .control-strip now, not positioned boxes. They
+   keep their own padding and radius so they still read as separate pills
+   inside the one row. */
+.view-mode-bar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  border-radius: 10px;
+}
+
+/* Beside the view-mode bar: these act on what the pane it selects is showing,
+   so they read as belonging to it. The badge the follow toggle arms is drawn
+   inside the pane itself, not here. */
+.camera-view-bar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 10px;
+}
+
+/* Armed follow is the GIZMO's yellow and not the accent: it is the same subject
+   as the frustum and the in-pane badge, and an accent wash here would say
+   "selected" about a mode. */
+.camera-view-bar .btn.is-armed {
+  background: rgba(234, 179, 8, 0.18);
+  border-color: rgba(234, 179, 8, 0.5);
+  color: var(--frustum);
+}
+
+.tool-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font: inherit;
+  font-size: 14px;
+  color: var(--text-dim);
+  background: transparent;
+  border: 0;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+}
+
+.tool-button:hover {
+  background: var(--control);
+  color: var(--text);
+}
+
+/* The armed tool is a soft accent wash, not a solid slab. A saturated fill on
+   a 32px button next to seven neutral ones reads as an error badge. */
+.tool-button.is-armed {
+  background: var(--accent-soft);
+  color: #cfe4ff;
+}
+
+/* Animate mode is a MODE, not a tool, so it gets the warm colour rather than
+   the accent — the whole point is that it does not look like an armed tool. */
+.tool-button.tool-animate[aria-pressed="true"] {
+  background: rgba(245, 165, 36, 0.16);
+  color: var(--accent-warm);
+}
+
+.tool-separator {
+  width: 1px;
+  align-self: stretch;
+  margin: 4px 4px;
+  background: var(--border);
+}
+
+.tool-flyout-anchor {
+  position: relative;
+}
+
+.tool-flyout {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 5px;
+  border-radius: 10px;
+  white-space: nowrap;
+  z-index: 1;
+}
+
+/* A flyout row is a LABELLED row, so it sizes to its text. `.tool-button`'s
+   32px square is for the dock's icon strip, and a label inside one overflows
+   its own background. */
+.tool-flyout .tool-button {
+  width: auto;
+  min-width: 32px;
+  justify-content: flex-start;
+  gap: 8px;
+  padding: 0 10px;
+}
+
+.tool-flyout .tool-button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* ---- timeline dock ------------------------------------------------------ */
+/* Right edge clears the inspector rather than sliding under it: both are
+   `position: fixed`, so the dock has no way to know the rail is there and a
+   plain `right: 12px` put the last two seconds of every timeline behind the
+   effects list. 288 (panel) + 12 (its gutter) + 12 (the gap between them). */
+.timeline-dock {
+  position: fixed;
+  left: calc(var(--rail-w) + 24px);
+  right: calc(var(--inspector-w) + 24px);
+  /* Sits on the bottom edge now that the tool dock has left it. */
+  bottom: 12px;
+  z-index: 11;
+  display: flex;
+  flex-direction: column;
+  /* Dragged, in px. The fallback is the old 42vh, so a dock that somehow has
+     no variable still lands somewhere sane rather than at zero. */
+  max-height: var(--dock-h, 42vh);
+  overflow: hidden;
+}
+
+.timeline-dock.is-collapsed {
+  max-height: none;
+}
+
+.dock-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 34px;
+  padding: 0 10px;
+  border-bottom: 1px solid var(--border-soft);
+  flex: none;
+}
+
+.dock-collapse {
+  font: inherit;
+  color: var(--text-dim);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: 5px;
+}
+
+.dock-collapse:hover {
+  color: var(--text);
+  background: var(--control);
+}
+
+.dock-title {
+  color: var(--text-dim);
+  font-weight: 500;
+}
+
+.dock-play,
+.dock-fit {
+  font: inherit;
+  color: var(--text-dim);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 5px;
+}
+
+.dock-play:hover,
+.dock-fit:hover {
+  color: var(--text);
+  background: var(--control);
+}
+
+/* The one number the author reads while scrubbing, so it is the biggest thing
+   in the head and it is monospaced — a proportional readout jitters sideways
+   on every frame and reads as movement that is not there. */
+.dock-time {
+  font: var(--mono);
+  font-size: 12px;
+  color: var(--text);
+  min-width: 56px;
+}
+
+.dock-span {
+  font: var(--mono);
+  font-size: 11px;
+  color: var(--text-faint);
+}
+
+/* MONITORING, pushed to the right of the head beside the frame readout, so it
+   reads as a property of this browser tab rather than of the shot. */
+.dock-mute {
+  font: inherit;
+  font-size: 11px;
+  color: var(--text-dim);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: 5px;
+  margin-left: auto;
+}
+
+.dock-mute:hover,
+.dock-mute[aria-pressed="true"] {
+  color: var(--text);
+  background: var(--control);
+}
+
+.dock-volume {
+  width: 72px;
+  accent-color: var(--accent);
+}
+
+.dock-readout {
+  color: var(--text-faint);
+}
+
+.dock-body {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+/* THE `hidden` ATTRIBUTE ONLY WORKS IF THIS RULE EXISTS. `[hidden]
+   { display: none }` is a USER-AGENT rule and the author `display: flex`
+   above outranks it, so a collapsed dock kept every row laid out — and
+   `.timeline-dock.is-collapsed` drops the `max-height` cap on purpose, on the
+   assumption the body is gone. On a document with hundreds of layers the two
+   compounded: the dock grew to full content height and, anchored at
+   `bottom: 12px`, covered the stage. Focus mode collapses the dock on entering
+   the working view, which is exactly where it was worst.
+
+   `dockCollapse.test.tsx` asserted the ATTRIBUTE, which was always correct —
+   jsdom loads no stylesheet, so nothing in the suite could see that it meant
+   nothing. That test now reads this file. */
+.dock-body[hidden] {
+  display: none;
+}
+
+.dock-scroll {
+  overflow: auto;
+  min-height: 0;
+  padding-bottom: 6px;
+}
+
+.dock-ruler {
+  position: relative;
+  height: 24px;
+}
+
+/* ── THE RULER'S OWN RULES ───────────────────────────────────────────────
+ *
+ * `Ruler` comes from @dailies-studio/timeline but its CSS lives in
+ * canvas-editor's LOCAL stylesheet, so this chrome rendered the component
+ * with no rules at all: every tick stacked at x=0 and the ruler read as the
+ * single run-on number "0102030405060". Restated here rather than moved into
+ * the shared sheet, because this lane's timeline is a BLOCK timeline and its
+ * ruler is shorter and quieter than the canvas dope sheet's. */
+.tl-ruler {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  cursor: ew-resize;
+}
+
+.tl-tick {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  padding-left: 6px;
+  font: var(--mono);
+  font-size: 10px;
+  line-height: 20px;
+  color: var(--text-faint);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.tl-tick::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 4px;
+  width: 1px;
+  height: 6px;
+  background: var(--border);
+}
+
+.dock-playhead,
+/* The cut marker: a small diamond ON the seam, hollow for a hard cut and
+   filled when the shot before it blends. Centred by a half-width translate so
+   it sits on the boundary rather than after it. Below the playhead (z 4) so the
+   frame you are on always wins. */
+.scene-cut {
+  position: absolute;
+  top: 50%;
+  width: 9px;
+  height: 9px;
+  padding: 0;
+  transform: translate(-50%, -50%) rotate(45deg);
+  border: 1px solid var(--text-faint);
+  border-radius: 1px;
+  background: var(--panel);
+  cursor: pointer;
+  z-index: 3;
+}
+
+.scene-cut:hover {
+  border-color: var(--text);
+}
+
+.scene-cut.is-blend {
+  border-color: var(--accent);
+  background: var(--accent);
+}
+
+.scene-playhead {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--playhead);
+  pointer-events: none;
+  z-index: 4;
+}
+
+/* The playhead's grab head, so the line reads as a control rather than a
+   stray rule. Only on the ruler copy; the track copy stays a bare line. */
+.dock-ruler .dock-playhead::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 9px;
+  height: 9px;
+  border-radius: 3px;
+  background: var(--playhead);
+}
+
+.dock-tracks {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+/* One overlay for everything drawn THROUGH the tracks: the scene boundaries,
+   the snap guide and the playhead. It starts where the time area does and takes
+   no pointer events, so a boundary line can never eat a bar's drag. */
+.dock-overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  pointer-events: none;
+  z-index: 3;
+}
+
+.dock-boundary {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--border);
+}
+
+/* The snap guide is the accent, and it only exists while a drag is ON a target
+   — a guide that showed for a drag that merely rounded would teach the author
+   that snapping is always on top of them. */
+.dock-snap-guide {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--accent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+
+/* Groups are separated by the boundary line above; this is the horizontal half
+   of the same statement, for a reader scanning the label column. */
+.dock-scene-group + .dock-scene-group {
+  border-top: 1px solid var(--border);
+}
+
+/* ---- scene strip -------------------------------------------------------- */
+/* Slim, and it SCROLLS WITH THE TRACKS: its bars and the boundary lines through
+   the track area are the same prefix sum, so anything that moved one without
+   the other would be drawing two different timelines. */
+.scene-strip {
+  display: flex;
+  align-items: stretch;
+  height: 26px;
+  border-bottom: 1px solid var(--border);
+  flex: none;
+}
+
+.scene-strip-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding-left: 10px;
+  color: var(--text-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 10px;
+  font-weight: 600;
+  flex: none;
+}
+
+.scene-strip-add {
+  font: inherit;
+  font-size: 13px;
+  line-height: 1;
+  color: var(--text-faint);
+  background: transparent;
+  border: 0;
+  padding: 2px 6px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.scene-strip-add:hover {
+  color: var(--text);
+  background: var(--control);
+}
+
+.scene-strip-lane {
+  position: relative;
+  flex: 1;
+}
+
+.scene-bar {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--scene-bar) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--scene-bar) 55%, transparent);
+  color: color-mix(in srgb, var(--scene-bar) 45%, #ffffff);
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.scene-bar:hover {
+  background: color-mix(in srgb, var(--scene-bar) 22%, transparent);
+}
+
+.scene-bar.is-current {
+  border-color: var(--scene-bar);
+  background: color-mix(in srgb, var(--scene-bar) 26%, transparent);
+  color: #fff;
+}
+
+.scene-bar-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+}
+
+.scene-trim {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 7px;
+  cursor: col-resize;
+}
+
+/* ---- lifespan rows ------------------------------------------------------ */
+/* The layer's own bar: taller and quieter than a block bar, because it is the
+   thing a block sits INSIDE. Solid-ish fill rather than the block's outline,
+   so a row reads as one object with intervals on it rather than as a pile of
+   equal-weight rectangles. */
+.lifespan-row {
+  display: flex;
+  align-items: stretch;
+  height: 28px;
+  border-bottom: 1px solid var(--border-soft);
+  /* Fixed-height rows are isolation boundaries: a style change inside one
+     (a bar drag, a hover) must not invalidate layout or repaint outside it.
+     Legal here — the containment ban (styles.css:5) covers only ancestors of
+     the stage iframe, and the dock is its sibling. */
+  contain: layout paint;
+}
+
+.lifespan-row.is-selected {
+  background: var(--accent-quiet);
+}
+
+.lifespan-label-cell {
+  display: flex;
+  align-items: center;
+  flex: none;
+  overflow: hidden;
+}
+
+.lifespan-disclosure {
+  font: inherit;
+  font-size: 9px;
+  line-height: 1;
+  color: var(--text-faint);
+  background: transparent;
+  border: 0;
+  padding: 4px 4px;
+  cursor: pointer;
+  flex: none;
+}
+
+.lifespan-disclosure:hover {
+  color: var(--text);
+}
+
+.lifespan-name {
+  font: inherit;
+  color: var(--text-dim);
+  background: transparent;
+  border: 0;
+  text-align: left;
+  padding: 0 6px;
+  cursor: pointer;
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.lifespan-name:hover,
+.lifespan-row.is-selected .lifespan-name {
+  color: var(--text);
+}
+
+.lifespan-lane {
+  position: relative;
+  flex: 1;
+}
+
+.lifespan-bar {
+  position: absolute;
+  top: 5px;
+  bottom: 5px;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  border-radius: 7px;
+  background: color-mix(in srgb, var(--text) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
+  color: var(--text-dim);
+  cursor: grab;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.lifespan-bar:hover {
+  background: color-mix(in srgb, var(--text) 16%, transparent);
+}
+
+/* SELECTION IS THE ACCENT, here and nowhere else in the lane: it is the one
+   colour that means "this is the thing the inspector is about". */
+.lifespan-bar.is-selected {
+  background: color-mix(in srgb, var(--accent) 22%, transparent);
+  border-color: var(--accent);
+  color: #fff;
+}
+
+.lifespan-bar-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+  font-weight: 500;
+}
+
+.lifespan-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  cursor: col-resize;
+}
+
+.lifespan-handle-in {
+  left: 0;
+}
+
+.lifespan-handle-out {
+  right: 0;
+}
+
+/* ---- block rows --------------------------------------------------------- */
+.block-row {
+  display: flex;
+  align-items: stretch;
+  height: 26px;
+  border-bottom: 1px solid var(--border-soft);
+  /* Same isolation boundary as .lifespan-row, same legality note. */
+  contain: layout paint;
+}
+
+.block-row.is-selected {
+  background: var(--accent-quiet);
+}
+
+/* The label column: the name, and on the camera row a create button beside it.
+   Fixed width from the dock's LABEL_WIDTH, so the lanes of every row still
+   start on the same x as the ruler. */
+.block-row-label-cell {
+  display: flex;
+  align-items: stretch;
+  flex: none;
+  overflow: hidden;
+}
+
+.block-row-label {
+  font: inherit;
+  color: var(--text-dim);
+  background: transparent;
+  border: 0;
+  text-align: left;
+  padding: 0 10px;
+  cursor: pointer;
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Quiet until the row is hovered: it is a create button on a lane the author
+   spends most of their time reading, and a permanently lit one reads as the
+   row's subject. */
+.block-row-add {
+  font: inherit;
+  font-size: 11px;
+  color: var(--text-faint);
+  background: transparent;
+  border: 0;
+  padding: 0 8px;
+  cursor: pointer;
+  flex: none;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 120ms ease, color 120ms ease;
+}
+
+.block-row:hover .block-row-add,
+.block-row-add:focus-visible {
+  opacity: 1;
+}
+
+.block-row-add:hover {
+  color: var(--text);
+}
+
+.block-row-label:hover {
+  color: var(--text);
+}
+
+.block-row.is-selected .block-row-label {
+  color: var(--text);
+}
+
+.block-row-lane {
+  position: relative;
+  flex: 1;
+}
+
+/* Dark fill, bright border — Raylight's block. A solid bar per block turns a
+   busy scene into a colour field where nothing is readable; an outline keeps
+   forty of them distinct and lets overlaps show through. */
+.block-bar {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--block-during) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--block-during) 60%, transparent);
+  color: color-mix(in srgb, var(--block-during) 40%, #ffffff);
+  cursor: grab;
+  overflow: visible;
+  white-space: nowrap;
+  transition: background 120ms ease;
+}
+
+.block-bar:hover {
+  background: color-mix(in srgb, var(--block-during) 24%, transparent);
+}
+
+.block-bar.slot-in {
+  background: color-mix(in srgb, var(--block-in) 14%, transparent);
+  border-color: color-mix(in srgb, var(--block-in) 60%, transparent);
+  color: color-mix(in srgb, var(--block-in) 40%, #ffffff);
+}
+
+.block-bar.slot-in:hover {
+  background: color-mix(in srgb, var(--block-in) 24%, transparent);
+}
+
+.block-bar.slot-out {
+  background: color-mix(in srgb, var(--block-out) 14%, transparent);
+  border-color: color-mix(in srgb, var(--block-out) 60%, transparent);
+  color: color-mix(in srgb, var(--block-out) 40%, #ffffff);
+}
+
+.block-bar.slot-out:hover {
+  background: color-mix(in srgb, var(--block-out) 24%, transparent);
+}
+
+.block-bar.is-selected {
+  outline: 1px solid #fff;
+  outline-offset: 1px;
+  color: #fff;
+}
+
+/* A block whose window has fallen outside its layer's lifespan. KEPT, dimmed,
+   and the dead part greyed in place — shortening a lifespan is a trim, not a
+   request to throw an animation away, and the author needs to see how far to
+   pull the edge back. */
+.block-bar.is-clipped {
+  opacity: 0.5;
+  border-style: dashed;
+}
+
+.block-dead {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    -45deg,
+    color-mix(in srgb, var(--text) 16%, transparent) 0 3px,
+    transparent 3px 6px
+  );
+}
+
+.block-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+  font-weight: 500;
+}
+
+.block-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 7px;
+  cursor: col-resize;
+}
+
+.block-handle-in {
+  left: -1px;
+}
+
+.block-handle-out {
+  right: -1px;
+}
+
+/* A spring keeps moving past its own window. The tail says so, and the OUT
+   handle is absent because dragging it would clip rather than retime. */
+.block-spring-tail {
+  position: absolute;
+  right: -18px;
+  top: 50%;
+  width: 18px;
+  border-top: 1px dashed currentColor;
+  opacity: 0.6;
+}
+
+/* ---- channel rows (one animated property per row — the Lottie read) ------ */
+.channel-row {
+  display: flex;
+  align-items: stretch;
+  height: 20px;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.channel-label-cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  overflow: hidden;
+}
+
+.channel-name {
+  color: var(--text-faint);
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+/* The resolved value at the playhead. Tabular, so playback reads as a counter
+   rather than a word that keeps changing width. */
+.channel-value {
+  margin-left: auto;
+  padding-right: 8px;
+  color: var(--text-dim);
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.channel-lane {
+  position: relative;
+  flex: 1;
+}
+
+/* One block's footprint on one channel: two keyframe diamonds joined by a
+   line, in the slot's hue — the same in/during/out vocabulary the block bars
+   speak, one register quieter. */
+.channel-span {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  --slot: var(--block-during);
+  cursor: grab;
+}
+
+.channel-span.slot-in {
+  --slot: var(--block-in);
+}
+
+.channel-span.slot-out {
+  --slot: var(--block-out);
+}
+
+.channel-connector {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  border-top: 1px solid color-mix(in srgb, var(--slot) 55%, transparent);
+  pointer-events: none;
+}
+
+.channel-span:hover .channel-connector {
+  border-top-color: var(--slot);
+}
+
+/* SOLID diamonds, the Lottie/Figma mark. Filled with the slot's hue so a
+   keyframe reads as a keyframe at a glance; selection turns them white, the
+   one colour that means "the inspector is about this". */
+.channel-key {
+  position: absolute;
+  top: 50%;
+  width: 9px;
+  height: 9px;
+  transform: translate(-50%, -50%) rotate(45deg);
+  background: var(--slot);
+  border: 1px solid color-mix(in srgb, var(--slot) 55%, #000);
+  border-radius: 1px;
+  cursor: col-resize;
+}
+
+.channel-key:hover {
+  background: color-mix(in srgb, var(--slot) 70%, #fff);
+}
+
+.channel-key-in {
+  left: 0;
+}
+
+.channel-key-out {
+  left: 100%;
+}
+
+.channel-span.is-selected .channel-key {
+  background: #fff;
+  border-color: #fff;
+}
+
+.channel-span.is-selected .channel-connector {
+  border-top-color: var(--slot);
+}
+
+/* The part of a span the lifespan no longer covers: kept, dashed in place —
+   the block lane's "drawn dead" rule, restated on a line. */
+.channel-span.is-clipped .channel-key {
+  opacity: 0.55;
+}
+
+.channel-dead {
+  position: absolute;
+  top: 50%;
+  border-top: 1px dashed color-mix(in srgb, var(--text) 45%, transparent);
+  pointer-events: none;
+}
+
+.channel-spring-tail {
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  width: 14px;
+  border-top: 1px dashed color-mix(in srgb, var(--slot) 70%, transparent);
+  pointer-events: none;
+}
+
+/* The expanded-but-empty layer: say where the first keyframe comes from. */
+.channel-empty-hint {
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+  color: var(--text-faint);
+  font-size: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ---- audio lane --------------------------------------------------------- */
+/* A DISTINCT COLOURED BAND under the video rows. Taller than a block row,
+   because the waveform inside it is the thing the author is reading — a
+   28px-high envelope of a voiceover shows nothing at all. */
+.audio-lane {
+  display: flex;
+  align-items: stretch;
+  position: relative;
+  height: 38px;
+  border-top: 1px solid var(--border);
+  background: color-mix(in srgb, var(--audio-clip) 4%, transparent);
+}
+
+/* A file dragged over the lane. The whole lane lights, not the row under the
+   pointer: the clip lands at the PLAYHEAD (see AudioLane), so highlighting a
+   position would promise a drop point the import does not honour. */
+.audio-lane.is-over {
+  background: color-mix(in srgb, var(--audio-clip) 14%, transparent);
+  outline: 1px dashed var(--audio-clip);
+  outline-offset: -1px;
+}
+
+.audio-label-cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  padding-left: 8px;
+  overflow: hidden;
+}
+
+.audio-lane-name {
+  color: var(--text-dim);
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.audio-add {
+  font: inherit;
+  color: var(--text-dim);
+  background: var(--control);
+  border: 0;
+  border-radius: 5px;
+  padding: 1px 7px;
+  margin-right: 6px;
+  cursor: pointer;
+  flex: none;
+}
+
+.audio-add:hover:not(:disabled) {
+  color: var(--text);
+  background: var(--control-hover);
+}
+
+.audio-track {
+  position: relative;
+  flex: 1;
+}
+
+.audio-empty {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-faint);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+/* Same dark-fill/bright-border grammar as a block bar, in the lane's own hue. */
+.audio-clip {
+  position: absolute;
+  top: 5px;
+  bottom: 5px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--audio-clip) 16%, transparent);
+  border: 1px solid color-mix(in srgb, var(--audio-clip) 65%, transparent);
+  color: color-mix(in srgb, var(--audio-clip) 35%, #ffffff);
+  cursor: grab;
+  overflow: hidden;
+}
+
+.audio-clip:hover {
+  background: color-mix(in srgb, var(--audio-clip) 26%, transparent);
+}
+
+/* A muted clip is KEPT and dimmed, never hidden: mute is a mix decision the
+   author has to be able to see in order to undo. */
+.audio-clip.is-muted {
+  opacity: 0.45;
+  border-style: dashed;
+}
+
+.audio-wave {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.audio-fade-curve {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.audio-fade-curve polyline {
+  stroke: var(--audio-line);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.audio-clip-name {
+  position: absolute;
+  left: 8px;
+  top: 1px;
+  pointer-events: none;
+  font-weight: 500;
+  max-width: calc(100% - 46px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The rubber band. A hairline across the whole clip with a fat invisible grab
+   area, because a 1px drag target is a control nobody can hit. */
+.audio-gain-band {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 9px;
+  margin-bottom: -4px;
+  cursor: ns-resize;
+}
+
+.audio-gain-band::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 4px;
+  height: 1px;
+  background: var(--audio-line);
+  opacity: 0.8;
+}
+
+.audio-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 7px;
+  cursor: col-resize;
+}
+
+.audio-handle-in {
+  left: -1px;
+}
+
+.audio-handle-out {
+  right: -1px;
+}
+
+/* The fade corners ride ON the ramp's top end, so the handle is where the
+   author sees the fade finish rather than at the edge of the clip. */
+.audio-fade {
+  position: absolute;
+  top: -1px;
+  width: 11px;
+  height: 11px;
+  margin-left: -5px;
+  border-radius: 50%;
+  cursor: ew-resize;
+  background: color-mix(in srgb, var(--audio-line) 70%, transparent);
+}
+
+.audio-clip-buttons {
+  position: absolute;
+  right: 2px;
+  top: 1px;
+  display: flex;
+  gap: 2px;
+}
+
+.audio-clip-btn {
+  font: inherit;
+  font-size: 10px;
+  line-height: 1;
+  color: var(--text-dim);
+  background: transparent;
+  border: 0;
+  padding: 2px 3px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.audio-clip-btn:hover {
+  color: var(--text);
+  background: var(--control);
+}
+
+.audio-error {
+  position: absolute;
+  left: 8px;
+  bottom: 2px;
+  margin: 0;
+  color: var(--danger-text);
+  pointer-events: none;
+}
+
+/* ---- marker lane -------------------------------------------------------- */
+/* A THIN ORANGE STRIP over the audio. Short on purpose: a marker carries no
+   duration, so there is nothing here that gets more readable with height —
+   every pixel it takes is a pixel off the tracks, which do. */
+.marker-lane {
+  display: flex;
+  align-items: stretch;
+  position: relative;
+  height: 20px;
+  border-top: 1px solid var(--border);
+  background: color-mix(in srgb, var(--marker) 10%, transparent);
+}
+
+.marker-label-cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  padding-left: 8px;
+  overflow: hidden;
+}
+
+.marker-lane-name {
+  color: var(--text-dim);
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.marker-add {
+  font: inherit;
+  line-height: 1;
+  color: var(--text-dim);
+  background: var(--control);
+  border: 0;
+  border-radius: 5px;
+  padding: 1px 7px;
+  margin-right: 6px;
+  cursor: pointer;
+  flex: none;
+}
+
+.marker-add:hover {
+  color: var(--text);
+  background: var(--control-hover);
+}
+
+.marker-track {
+  position: relative;
+  flex: 1;
+}
+
+.marker-empty {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-faint);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+/* CENTRED ON ITS FRAME, which is why the pin is a zero-width anchor with the
+   diamond translated out of it: `left` is the frame's exact x, so a diamond
+   given a width would sit a few px late and drift further as the author zoomed
+   in — the one thing a marker must never do. */
+.marker-pin {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0;
+  display: flex;
+  align-items: center;
+  cursor: grab;
+}
+
+.marker-diamond {
+  width: 8px;
+  height: 8px;
+  margin-left: -4px;
+  background: var(--marker-pin);
+  border: 1px solid color-mix(in srgb, var(--marker) 70%, #000000);
+  transform: rotate(45deg);
+  flex: none;
+}
+
+.marker-pin.is-selected .marker-diamond {
+  background: var(--marker);
+  border-color: var(--marker-pin);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--marker) 45%, transparent);
+}
+
+.marker-pin.is-at-playhead .marker-diamond {
+  border-color: var(--playhead);
+}
+
+/* HOVER (and selection) only. Always-on labels turn a strip of beats into a
+   wall of overlapping text at any zoom the author actually works at. */
+.marker-pin-label {
+  display: none;
+  position: absolute;
+  left: 8px;
+  white-space: nowrap;
+  padding: 0 4px;
+  border-radius: 3px;
+  color: var(--text);
+  background: var(--panel);
+  border: 1px solid var(--border);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.marker-pin:hover .marker-pin-label,
+.marker-pin.is-selected .marker-pin-label {
+  display: block;
+}
+
+/* ---- inspector ---------------------------------------------------------- */
+/* One right rail, two occupants. They share the BOX and nothing else: the
+   inspector is a scrolling stack of sections, the agent drawer is a flex
+   column that scrolls only its transcript and pins its composer to the
+   bottom. */
+.inspector,
+.shell > .agent-panel {
+  position: fixed;
+  top: 72px;
+  right: 12px;
+  bottom: 12px;
+  width: var(--inspector-w);
+  z-index: 10;
+}
+
+.inspector {
+  overflow: auto;
+  padding: 12px;
+}
+
+/* `.shell >` for SPECIFICITY, not for structure. agent.css is imported by the
+   panel component and so lands after this file, and its own
+   `.agent-panel { position: relative; height: 100% }` would otherwise win.
+   `height: 100%` on a fixed element resolves against the VIEWPORT, not
+   against the top/bottom box above, so the column ran taller than its own
+   panel and pushed the composer clean off the bottom edge — the drawer looked
+   like it had no input at all. */
+.shell > .agent-panel {
+  position: fixed;
+  height: auto;
+  overflow: hidden;
+  padding: 0;
+}
+
+/* agent.css leaves the title row unpadded because the motion editor wraps it
+   in a padded header. This drawer IS the panel, so the padding belongs here.
+   It also WRAPS: the row carries a label, one button per model, the key
+   control, New and close, which does not fit 288px — unwrapped they overlap
+   and the model names clip to "Op". A second line is cheaper than a rail wide
+   enough to never need one. */
+.shell > .agent-panel > .agent-title {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border-soft);
+  flex: none;
+  flex-wrap: wrap;
+  row-gap: 6px;
+}
+
+.shell > .agent-panel .agent-models {
+  flex: 1 1 100%;
+  order: 1;
+}
+
+.shell > .agent-panel .agent-title-label {
+  font-weight: 600;
+}
+
+.shell > .agent-panel .agent-composer {
+  padding: 10px 12px;
+  border-top: 1px solid var(--border-soft);
+  flex: none;
+}
+
+/* The mode switch is the panel's first thing and it sits alone on its row,
+   left-aligned and pill-shaped, exactly as Raylight's Design/Animate does. */
+.inspector > .segmented {
+  margin-bottom: 4px;
+}
+
+.inspector-empty {
+  margin: 16px 4px;
+  color: var(--text-faint);
+  line-height: 1.6;
+}
+
+.section-action {
+  font: inherit;
+  font-size: 14px;
+  line-height: 1;
+  color: var(--text-dim);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: 6px;
+}
+
+.section-action:hover {
+  color: var(--text);
+  background: var(--control);
+}
+
+/* ---- align / distribute ------------------------------------------------- */
+/* Two rows of four: six alignments then two distributions, the grouping every
+   design tool uses so the muscle memory transfers. */
+.align-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 3px;
+  margin: 2px 0 8px;
+}
+
+.align-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  padding: 0;
+  color: var(--text-dim);
+  background: var(--control);
+  border: 1px solid transparent;
+  border-radius: 7px;
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+}
+
+.align-button:hover:not(:disabled) {
+  background: var(--control-hover);
+  color: var(--text);
+}
+
+.align-button:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.align-button:focus-visible {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: var(--focus-ring);
+}
+
+/* The rule is the EDGE being aligned to and the boxes are the layers. Two
+   weights, so the icon reads as "these, against that" at 16px. */
+.align-icon-rule {
+  fill: currentColor;
+}
+
+.align-icon-box {
+  fill: currentColor;
+  opacity: 0.45;
+}
+
+.effect-row + .effect-row {
+  margin-top: 1px;
+}
+
+/* The params of a switched-on effect, indented under their toggle so the
+   grouping is visible without a box around every effect. */
+.effect-params {
+  display: flex;
+  gap: 6px;
+  padding: 2px 0 10px 10px;
+  border-left: 1px solid var(--border-soft);
+  margin-left: 2px;
+}
+
+.effect-params > * {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.insp-dim {
+  color: var(--text-faint);
+}
+
+/* ---- the Animate panel -------------------------------------------------- */
+
+/* The resolved readout. Deliberately NOT shaped like a field: no box, no
+   border, no hover — an author must be able to tell at a glance that these
+   numbers are the composition's output and there is nothing here to type into.
+   The grid is fixed-width on the label so seven rows of tabular numerals line
+   up into a column that can be read down. */
+.resolved-list {
+  margin: 0;
+  padding: 2px 0 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.resolved-row {
+  display: grid;
+  grid-template-columns: 58px 1fr auto;
+  align-items: baseline;
+  gap: 8px;
+  padding: 2px 2px;
+}
+
+.resolved-label {
+  font-size: 11px;
+  color: var(--text-faint);
+}
+
+.resolved-value {
+  margin: 0;
+  font-size: 11px;
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The mark. It carries the preset names rather than a dot, because "a block is
+   writing this" and "WHICH block" are the same question the moment there is
+   more than one on the layer. */
+.resolved-by {
+  margin: 0;
+  font-size: 10px;
+  color: var(--accent);
+  white-space: nowrap;
+}
+
+/* A written channel lifts its LABEL, not its number. Recolouring the value
+   would put four accent numerals in a column of seven and read as "these are
+   links"; the mark beside them already says which is which. */
+.resolved-row[data-live="true"] .resolved-label {
+  color: var(--text-dim);
+}
+
+.animate-palette {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  padding: 4px 0 8px;
+}
+
+.animate-preset {
+  font: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-dim);
+  padding: 5px 10px;
+  border-radius: 999px;
+  cursor: pointer;
+  background: var(--control);
+  border: 1px solid transparent;
+  transition: background 120ms ease, color 120ms ease;
+}
+
+.animate-preset:hover {
+  background: var(--control-hover);
+  color: var(--text);
+}
+
+.animate-preset[aria-pressed="true"] {
+  background: var(--accent);
+  border-color: transparent;
+  color: #fff;
+}
+
+.animate-blocks {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.animate-blocks li {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.animate-block-row {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  font: inherit;
+  font-size: 11px;
+  color: var(--text);
+  text-align: left;
+  padding: 6px 8px;
+  border-radius: 7px;
+  cursor: pointer;
+  background: var(--control);
+  border: 1px solid transparent;
+}
+
+.animate-block-row:hover {
+  background: var(--control-hover);
+}
+
+.animate-block-row[aria-pressed="true"] {
+  background: var(--accent-soft);
+  border-color: var(--accent);
+}
+
+.animate-block-name {
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.animate-block-owner {
+  font-style: normal;
+  color: var(--text-faint);
+}
+
+.animate-block-span {
+  color: var(--text-dim);
+  font-variant-numeric: tabular-nums;
+  flex: none;
+}
+
+.animate-block-remove {
+  font: inherit;
+  font-size: 12px;
+  color: var(--text-faint);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: 6px;
+  flex: none;
+}
+
+.animate-block-remove:hover {
+  color: var(--danger-text);
+  background: var(--control);
+}
+
+/* The bezier pad and the settle preview, sharing the shape the other two
+   chromes draw so an ease reads the same everywhere. */
+.insp-pad {
+  display: block;
+  margin: 6px 0;
+}
+
+.insp-pad-box {
+  fill: none;
+  stroke: var(--border);
+}
+
+.insp-pad-curve {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 1.5;
+}
+
+.insp-pad-arm {
+  stroke: var(--border);
+  stroke-width: 1;
+}
+
+.insp-pad-handle {
+  fill: var(--accent);
+  cursor: grab;
+}
+
+.insp-preview {
+  display: block;
+  margin: 4px 0;
+}
+
+.insp-preview polyline {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 1.5;
+}
+
+.insp-preview polyline.is-spring {
+  stroke: var(--accent-warm);
+}
+
+/* The part of a spring that falls OUTSIDE the block window. Dashed, because
+   the block stops contributing there — the motion is still settling, but the
+   document is holding the clipped value. */
+.insp-preview polyline.is-tail {
+  stroke: var(--accent-warm);
+  stroke-dasharray: 3 3;
+  opacity: 0.55;
+}
+
+.animate-preview-edge {
+  stroke: var(--border);
+  stroke-width: 1;
+  stroke-dasharray: 2 2;
+}
+
+.animate-preview-note {
+  display: block;
+  font-size: 10px;
+  color: var(--text-faint);
+  line-height: 1.5;
+}
+
+/* The components list. Same row rhythm as the layers below it, with the
+   instance count pulling right so a definition's reach is readable at a
+   glance — that number is what "editing this changes N things" means. */
+.component-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 24px;
+  padding-left: 8px;
+  border-radius: 4px;
+}
+
+.component-row.is-current {
+  background: var(--control);
+}
+
+.component-count {
+  margin-left: auto;
+  color: var(--text-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+/* A button that reads as a link: the definition's name in the instance
+   inspector, which navigates rather than edits. */
+.link-button {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--accent);
+  cursor: pointer;
+  text-align: left;
+}
+
+.link-button:hover {
+  text-decoration: underline;
+}
+
+/* The isolation path. Reads as a trail rather than a list: the last crumb is
+   where you are, the ones before it are one click away. */
+.isolation-crumbs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px;
+  padding: 2px 8px 6px;
+  font-size: 10px;
+}
+
+.isolation-crumbs .crumb {
+  padding: 2px 4px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-dim);
+  cursor: pointer;
+}
+
+.isolation-crumbs .crumb + .crumb::before {
+  content: "›";
+  margin-right: 4px;
+  color: var(--text-faint);
+}
+
+.isolation-crumbs .crumb:hover {
+  color: var(--text);
+}
+
+.isolation-crumbs .crumb.is-current {
+  color: var(--text);
+  cursor: default;
+}
+
+/* Outline drop feedback. A LINE for "beside this row", a filled ring for
+   "inside it" — the two gestures have to look different before the drop, or
+   reparenting happens by accident. */
+.layer-row.is-drop-before {
+  box-shadow: inset 0 2px 0 var(--accent);
+}
+
+.layer-row.is-drop-after {
+  box-shadow: inset 0 -2px 0 var(--accent);
+}
+
+.layer-row.is-drop-into {
+  box-shadow: inset 0 0 0 2px var(--accent);
+}
+
+/* A section's own aside — a fact about the value above it, not a warning. */
+.inspector-note {
+  margin: 0 0 2px;
+  font-size: 10px;
+  color: var(--text-faint);
+  line-height: 1.5;
+}
+
+/* ---- export ------------------------------------------------------------- */
+
+.header-export.is-running {
+  font-variant-numeric: tabular-nums;
+}
+
+/* The WIDTH GOES ON THE DIALOG, not on its body. `.dialog` is a hard 320px,
+   which is right for a confirm and too narrow for three labelled rows plus a
+   size RANGE; widening the body instead just overflowed the box and clipped
+   the range mid-string, and "911 KB–2" reads as a finished number rather than
+   a truncated one. */
+.dialog.shot-export-dialog {
+  width: 420px;
+}
+
+/* Same reasoning as the export dialog's width, further: this one is a GRID of
+   thumbnails, and 320px fits one column. Four across at 96px is the width at
+   which a card reads as a picture rather than as a swatch. */
+.dialog.material-picker {
+  width: 520px;
+  max-height: 70vh;
+}
+
+.material-search {
+  width: 100%;
+  padding: 6px 8px;
+  background: var(--surface-sunken, #131316);
+  border: 1px solid var(--border-strong, #35353d);
+  border-radius: var(--radius-md, 6px);
+  color: var(--text-primary, #e7e7ea);
+  font: inherit;
+}
+
+.material-shelf {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.material-shelf h3 {
+  margin: 0;
+  font-size: var(--text-xs, 11px);
+  font-weight: var(--weight-semibold, 600);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-secondary, #9a9aa5);
+}
+
+.material-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+  gap: 8px;
+}
+
+.material-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 0;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md, 6px);
+  cursor: pointer;
+  text-align: left;
+}
+
+.material-card:hover,
+.material-card:focus-visible {
+  border-color: var(--accent, #3b82f6);
+}
+
+.material-thumb {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  border-radius: var(--radius-sm, 4px);
+  background: var(--surface-sunken, #131316);
+}
+
+.material-name {
+  padding: 0 2px 2px;
+  font-size: var(--text-xs, 11px);
+  color: var(--text-primary, #e7e7ea);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The swangle warning, ON the card rather than in a tooltip alone: the point is
+   that an author sees it while choosing, not after a render has stalled. */
+.mesh-material-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.mesh-material-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 4px 8px;
+  background: var(--surface-sunken, #131316);
+  border: 1px solid var(--border-strong, #35353d);
+  border-radius: var(--radius-md, 6px);
+  color: var(--text-primary, #e7e7ea);
+  font: inherit;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.mesh-material-clear {
+  flex: 0 0 auto;
+  width: 22px;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--text-secondary, #9a9aa5);
+  cursor: pointer;
+}
+
+/* The model's triangle count, on its outline row. Muted until the scene as a
+   whole crosses the soft budget, at which point every measured row tints — the
+   claim is about the SCENE, so highlighting one row would name the wrong
+   subject. */
+.layer-tris {
+  flex: 0 0 auto;
+  padding: 0 4px;
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-tertiary, #6b6b76);
+}
+
+.layer-tris.is-over-budget {
+  color: var(--warn, #eab308);
+}
+
+.material-badge {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  padding: 1px 5px;
+  border-radius: 999px;
+  background: var(--warn, #eab308);
+  color: #1c1c20;
+  font-size: 10px;
+  font-weight: var(--weight-semibold, 600);
+}
+
+.export-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+}
+
+.export-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 30px;
+}
+
+.export-row > span {
+  color: var(--text-dim);
+}
+
+/* The omitted-blend note. Dim rather than alarming: the render is correct, it
+   just contains less than the timeline does. */
+.export-note {
+  margin: -2px 0 0;
+  color: var(--text-faint);
+  line-height: 1.45;
+}
+
+.export-estimate {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 6px 16px;
+  margin: 2px 0 0;
+  padding: 12px;
+  border-radius: 8px;
+  background: var(--control);
+}
+
+.export-estimate dt {
+  color: var(--text-faint);
+}
+
+.export-estimate dd {
+  margin: 0;
+  min-width: 0;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  /* Wraps rather than clips. The range strings are the whole value of the
+     row, and half a range is a wrong number rather than a short one. */
+  overflow-wrap: anywhere;
+}
+
+.export-progress {
+  margin: 0;
+  color: var(--text-dim);
+}
+
+.export-progress.is-done {
+  color: var(--text);
+}
+
+.export-progress code {
+  word-break: break-all;
+  color: var(--text-dim);
+}
+
+.export-error {
+  margin: 0;
+  color: var(--danger-text);
+}
+
+/* ---- scrollbars --------------------------------------------------------- */
+/* Default scrollbars on a near-black panel are a bright grey slab. */
+.left-rail::-webkit-scrollbar,
+.inspector::-webkit-scrollbar,
+.agent-panel::-webkit-scrollbar,
+.dock-scroll::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.left-rail::-webkit-scrollbar-thumb,
+.inspector::-webkit-scrollbar-thumb,
+.agent-panel::-webkit-scrollbar-thumb,
+.dock-scroll::-webkit-scrollbar-thumb {
+  background: #2a2a30;
+  border: 3px solid transparent;
+  background-clip: content-box;
+  border-radius: 999px;
+}
+
+.left-rail::-webkit-scrollbar-thumb:hover,
+.inspector::-webkit-scrollbar-thumb:hover,
+.agent-panel::-webkit-scrollbar-thumb:hover,
+.dock-scroll::-webkit-scrollbar-thumb:hover {
+  background: #3a3a42;
+  background-clip: content-box;
+}
+
+.left-rail::-webkit-scrollbar-track,
+.inspector::-webkit-scrollbar-track,
+.agent-panel::-webkit-scrollbar-track,
+.dock-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}