@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles.css

@@ -8,19 +8,33 @@
  * 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 ──────────────────────
+ * ── WHY IT IMPORTS THE HOUSE WIDGETS AND NOT ONLY THE TOKENS ────────────
  *
- * 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,
+ * It once imported 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.
+ * user-agent styling. The house sheet now arrives as three files (tokens,
+ * base, widgets), each imported below into a cascade layer.
  */
-@import "@dailies-studio/ui/styles.css";
+/* THE CASCADE ORDER, declared before anything else so no sheet can claim a
+   rank by arriving first. Later layers win regardless of specificity:
+     vendor            third-party sheets (React Flow, which the material
+                       canvas imports itself: panels/material/reactFlow.css)
+     tokens            custom properties only
+     base              the typeface and document-level rules
+     component-sheets  CSS a component imports itself (the timeline's curve
+                       and keyframe editors, the agent drawer, and the sheets
+                       of the surfaces that load on demand, the board's among
+                       them, so they arrive with their chunk)
+     widgets           the house widget rules (packages/ui); empty until the
+                       chrome's duplicate controls are merged, see below
+     chrome            this app's own rules, ./styles/
+     overrides         state rules that must beat every region
+   main.tsx imports this file before anything else for the same reason: a
+   component's own sheet would otherwise be emitted first and declare its
+   layer ahead of this statement. */
+@layer vendor, tokens, base, component-sheets, widgets, chrome, overrides;
+@import "@dailies-studio/ui/tokens.css" layer(tokens);
 
 /* ── THE LANE'S PALETTE ──────────────────────────────────────────────────
  *
@@ -34,2915 +48,52 @@
  * 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 ───────────────────────────────────────────────
+@import "./shotTokens.css" layer(tokens);
+@import "@dailies-studio/ui/base.css" layer(base);
+/* The house widgets, in a layer UNDER the chrome, so a chrome rule on its own
+   class always wins over a widget's, whatever the specificity. That is only
+   safe because the chrome restates no widget: .btn, .select and .badge are
+   defined once, in widgets.css, and no chrome rule styles bare elements. */
+@import "@dailies-studio/ui/widgets.css" layer(widgets);
+
+/* ── WHERE THE RULES ARE ─────────────────────────────────────────────────
  *
- * `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;
-}
+ * This file is an INDEX. The chrome's rules live in ./styles/, one file per
+ * region, imported below in cascade order: within a layer, a rule later in
+ * the list still wins a tie.
+ * The split exists so that work on one region does not have to read, write
+ * and race every other region's rules in the same file.
+ *
+ * Tests that pin cascade facts read the rules through
+ * packages/ui/test/cssText.ts, which expands this index in the same order, so
+ * moving a rule between region files never blinds them. */
+@import "./styles/shell.css" layer(chrome);
+@import "./styles/controls.css" layer(chrome);
+@import "./styles/topbar.css" layer(chrome);
+@import "./styles/left-column.css" layer(chrome);
+@import "./styles/insert-drawer.css" layer(chrome);
+@import "./styles/canvas.css" layer(chrome);
+@import "./styles/tool-footer.css" layer(chrome);
+@import "./styles/timeline.css" layer(chrome);
+@import "./styles/timeline-rows.css" layer(chrome);
+@import "./styles/timeline-graph.css" layer(chrome);
+@import "./styles/timeline-meters.css" layer(chrome);
+@import "./styles/timeline-sound.css" layer(chrome);
+@import "./styles/inspector.css" layer(chrome);
+@import "./styles/inspector-shot.css" layer(chrome);
+@import "./styles/inspector-object.css" layer(chrome);
+@import "./styles/inspector-board.css" layer(chrome);
+@import "./styles/shot-brief.css" layer(chrome);
+@import "./styles/dialogs.css" layer(chrome);
+@import "./styles/library.css" layer(chrome);
+@import "./styles/library-preview.css" layer(chrome);
+@import "./styles/assets-tab.css" layer(chrome);
+@import "./styles/versions.css" layer(chrome);
+@import "./styles/share-component.css" layer(chrome);
+@import "./styles/modes/material.css" layer(chrome);
+@import "./styles/modes/component.css" layer(chrome);
+@import "./styles/modes/code.css" layer(chrome);
+@import "./styles/modes/storyboard.css" layer(chrome);
+@import "./styles/comments.css" layer(chrome);
+@import "./styles/sync.css" layer(chrome);
+@import "./styles/states.css" layer(overrides);