@getv.design/embed 0.0.0-stage → 0.1.1

package/edit.css

@@ -0,0 +1,2185 @@
+
+.vd-editor {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+/* --- selection overlay ---------------------------------------------------- */
+
+.vd-editor__overlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: visible;
+}
+
+/*
+ * Weights are a hierarchy, not a uniform value. Loudest first: a guide, which is
+ * transient and is the whole answer to "did it align"; then the selection, which
+ * is always there; then hover and the members of a multi-selection, which are
+ * context rather than the subject.
+ *
+ * crispEdges turns antialiasing off, so it belongs only on whole-pixel widths —
+ * at 1.5 it rounds and the line comes back uneven. The overlay is drawn in
+ * screen space, so these are screen pixels at any zoom.
+ */
+
+/* Under every selection line, just outside it: the opposite colour, so the
+   selection reads on a design of either colour (overlay.ts `line`). White by
+   default, for the default blue. */
+.vd-editor__halo {
+  fill: none;
+  stroke: var(--vd-selection-halo, #fff);
+  stroke-width: 1;
+}
+
+/* As quiet as the hover and member lines they sit under. */
+.vd-editor__halo--quiet {
+  opacity: 0.5;
+}
+
+/* A highlight's line is the agent's colour in both themes, so its edge is
+   always dark: a bright line with a dark rim reads on a white page and a
+   black one alike. */
+.vd-editor__halo--highlight {
+  stroke: var(--vd-highlight-halo, rgb(0 0 0 / 0.6));
+}
+
+/* Previews what a click will hit, before it hits it. */
+.vd-editor__hover {
+  fill: none;
+  stroke: var(--vd-selection, var(--vd-accent, #3b82f6));
+  stroke-width: 1.5;
+  opacity: 0.7;
+}
+
+.vd-editor__outline {
+  fill: none;
+  stroke: var(--vd-selection, var(--vd-accent, #3b82f6));
+  stroke-width: 2;
+  shape-rendering: crispEdges;
+}
+
+/* Individual members inside a multi-selection, under the shared box. */
+.vd-editor__member {
+  fill: none;
+  stroke: var(--vd-selection, var(--vd-accent, #3b82f6));
+  stroke-width: 1.5;
+  opacity: 0.45;
+}
+
+.vd-editor__handle {
+  fill: var(--vd-handle, #fff);
+  stroke: var(--vd-selection, var(--vd-accent, #3b82f6));
+  stroke-width: 1.5;
+}
+
+.vd-editor__adjuster {
+  fill: var(--vd-handle, #fff);
+  stroke: var(--vd-selection, var(--vd-accent, #3b82f6));
+  stroke-width: 1.5;
+}
+
+/* --- spacing handles and rings -------------------------------------------- */
+
+/*
+ * Figma draws these pink, to say "this chrome belongs to the arrangement rather
+ * than to any one shape". We already spend a second colour on guides, so these
+ * stay on the accent and earn their separateness by shape instead: a pill lying
+ * across the gap it holds open, and a ring at the centre of what it moves.
+ */
+.vd-editor__spacer {
+  fill: var(--vd-handle, var(--vd-accent, #3b82f6));
+  stroke: var(--vd-selection, var(--vd-accent, #3b82f6));
+  stroke-width: 1;
+  opacity: 0.75;
+}
+
+.vd-editor__ring {
+  fill: var(--vd-surface, #ffffff);
+  stroke: var(--vd-selection, var(--vd-accent, #3b82f6));
+  stroke-width: 2;
+}
+
+/* The member being dragged to another slot, so it stays findable while the
+   others reflow around it. */
+.vd-editor__lead {
+  fill: none;
+  stroke: var(--vd-selection, var(--vd-accent, #3b82f6));
+  stroke-width: 2;
+  shape-rendering: crispEdges;
+}
+
+/* --- paths: point mode and the pen ---------------------------------------- */
+
+.vd-editor__path {
+  fill: none;
+  stroke: var(--vd-selection, var(--vd-accent, #3b82f6));
+  stroke-width: 1.5;
+}
+
+.vd-editor__pending {
+  fill: none;
+  stroke: var(--vd-selection, var(--vd-accent, #3b82f6));
+  stroke-width: 1;
+  stroke-dasharray: 4 3;
+}
+
+.vd-editor__arm {
+  stroke: var(--vd-selection, var(--vd-accent, #3b82f6));
+  stroke-width: 1;
+}
+
+.vd-editor__knob {
+  fill: var(--vd-selection, var(--vd-accent, #3b82f6));
+}
+
+.vd-editor__anchor {
+  fill: #fff;
+  stroke: var(--vd-selection, var(--vd-accent, #3b82f6));
+  stroke-width: 1;
+}
+
+.vd-editor__anchor--on {
+  fill: var(--vd-handle, var(--vd-selection, var(--vd-accent, #3b82f6)));
+}
+
+.vd-editor__close {
+  fill: none;
+  stroke: var(--vd-selection, var(--vd-accent, #3b82f6));
+  stroke-width: 1.5;
+}
+
+.vd-editor__draft {
+  fill: var(--vd-selection, var(--vd-accent, #3b82f6));
+  fill-opacity: 0.12;
+  stroke: var(--vd-selection, var(--vd-accent, #3b82f6));
+  stroke-width: 1.5;
+  stroke-dasharray: 4 3;
+}
+
+/*
+ * The caret blinks in hard steps rather than fading: a fade reads as sluggish,
+ * and every native text field on every platform blinks hard.
+ */
+.vd-editor__caret {
+  stroke: var(--vd-ink, #18181b);
+  stroke-width: 1.5;
+  animation: vd-caret-blink 1.06s steps(2, jump-none) infinite;
+}
+
+@keyframes vd-caret-blink {
+  to {
+    opacity: 0;
+  }
+}
+
+/* Selected text: a translucent wash. This rule went missing when the text
+   styles moved (af00d34), which left the band in SVG's default fill, solid
+   black. Its own variable, because a host's handle colour may be too faint at
+   this opacity and its outline colour too heavy. */
+.vd-editor__text-selection {
+  fill: var(--vd-text-selection, var(--vd-accent, #3b82f6));
+  fill-opacity: 0.35;
+  stroke: none;
+}
+
+/* Suppressed while typing, so the bar never blinks out under a keystroke. */
+.vd-editor--typing .vd-editor__caret {
+  animation: none;
+}
+
+.vd-editor__marquee {
+  fill: var(--vd-selection, var(--vd-accent, #3b82f6));
+  fill-opacity: 0.1;
+  stroke: var(--vd-selection, var(--vd-accent, #3b82f6));
+  stroke-width: 1.25;
+  stroke-dasharray: 3 2;
+}
+
+.vd-editor__badge {
+  fill: var(--vd-selection, var(--vd-accent, #3b82f6));
+  /* The halo's edge, or a badge the page's own colour is not there. */
+  stroke: var(--vd-selection-halo, #fff);
+  stroke-width: 1;
+}
+
+.vd-editor__badge-text {
+  fill: var(--vd-on-selection, #fff);
+  font-family: var(--vd-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+  dominant-baseline: middle;
+  text-anchor: middle;
+}
+
+/* --- page names ------------------------------------------------------------ */
+
+/* Each page's name above its corner: quiet until the pointer is on it, in the
+   selection's colour once the page is chosen. The fallbacks suit the viewer's
+   own default surface, which is dark: a host that sets --vd-surface (or a
+   light surface) sets these too, as the app does. */
+.vd-editor__page-label {
+  fill: var(--vd-page-label, rgb(255 255 255 / 0.55));
+  font-family: var(--vd-font, system-ui, -apple-system, sans-serif);
+  font-size: 11px;
+  font-weight: 500;
+  user-select: none;
+}
+
+.vd-editor__page-label--hover {
+  fill: var(--vd-page-label-hover, rgb(255 255 255 / 0.9));
+}
+
+.vd-editor__page-label--selected {
+  fill: var(--vd-accent, #3b82f6);
+}
+
+.vd-editor__rename {
+  position: absolute;
+  z-index: 4;
+  box-sizing: border-box;
+  height: 22px;
+  padding: 0 4px;
+  border: 1px solid var(--vd-accent, #3b82f6);
+  border-radius: 4px;
+  background: var(--vd-surface-raised, #ffffff);
+  color: var(--vd-ink, #1a1a1f);
+  font-family: var(--vd-font, system-ui, -apple-system, sans-serif);
+  font-size: 11px;
+  font-weight: 500;
+  outline: none;
+}
+
+/* --- locked and hidden ------------------------------------------------------ */
+
+/* Selected, but not the pointer's to move: no handles, and a dashed line that
+   says so. The same colour as the selection, because it *is* selected. */
+.vd-editor__parked {
+  fill: none;
+  stroke: var(--vd-selection, var(--vd-accent, #3b82f6));
+  stroke-width: 1.5;
+  stroke-dasharray: 4 3;
+}
+
+/* Quiet on purpose: this explains a click that went through, and a hint that
+   shouted would be the canvas arguing with the person who locked it. */
+.vd-editor__lock {
+  fill: none;
+  stroke: var(--vd-muted, #8a8f98);
+  stroke-width: 1;
+  stroke-dasharray: 3 3;
+}
+
+.vd-editor__lock-tag {
+  fill: var(--vd-muted, #8a8f98);
+  opacity: 0.9;
+}
+
+.vd-editor__lock-text {
+  fill: #fff;
+  font-family: var(--vd-font, system-ui, -apple-system, sans-serif);
+  font-size: 10px;
+  font-weight: 500;
+  dominant-baseline: middle;
+  text-anchor: middle;
+}
+
+/* --- agents ------------------------------------------------------------------ */
+
+/*
+ * Another hand on the document. Its own colour rather than the selection's, so
+ * "Claude is writing this" can never be mistaken for "you selected this" — and
+ * the host uses the same colour in its panel, so the eye links the two.
+ */
+.vd-editor__presence {
+  fill: none;
+  stroke: var(--vd-agent, #8b5cf6);
+  stroke-width: 2;
+  stroke-dasharray: 6 3;
+  opacity: 0.85;
+}
+
+.vd-editor__presence-tag {
+  fill: var(--vd-agent, #8b5cf6);
+}
+
+.vd-editor__presence-text {
+  fill: #fff;
+  font-family: var(--vd-font, system-ui, -apple-system, sans-serif);
+  font-size: 10px;
+  font-weight: 600;
+  dominant-baseline: middle;
+  text-anchor: middle;
+}
+
+/* An image waiting for its picture. The agent's colour, because an agent
+   usually left it; filled with a wash so it reads as a place, not a line. */
+.vd-editor__slot {
+  fill: var(--vd-agent-wash, rgb(139 92 246 / 0.08));
+  stroke: var(--vd-agent, #8b5cf6);
+  stroke-width: 1.5;
+  stroke-dasharray: 5 4;
+}
+
+.vd-editor__slot--target {
+  fill: var(--vd-agent-wash-strong, rgb(139 92 246 / 0.2));
+  stroke-width: 2.5;
+  stroke-dasharray: none;
+}
+
+.vd-editor__slot-label,
+.vd-editor__slot-hint {
+  font-family: var(--vd-font, system-ui, -apple-system, sans-serif);
+  font-size: 11px;
+  dominant-baseline: middle;
+  text-anchor: middle;
+}
+
+.vd-editor__slot-label {
+  fill: var(--vd-agent, #8b5cf6);
+  font-weight: 600;
+}
+
+.vd-editor__slot-hint {
+  fill: var(--vd-muted, #8a8f98);
+}
+
+/* Pointed at from outside the canvas: a hovered step or change row. An
+   outline and never a fill: a wash laid over the design hides what it points
+   at, and a group's wash stacked on its children's left dark patches that
+   matched nothing on the page. */
+.vd-editor__highlight {
+  fill: none;
+  stroke: var(--vd-highlight, var(--vd-agent, #8b5cf6));
+  stroke-width: 2;
+  shape-rendering: crispEdges;
+}
+
+/* --- guides --------------------------------------------------------------- */
+
+/*
+ * A colour of their own. Guides are transient feedback about a gesture, not
+ * chrome that belongs to the selection, and reusing the accent would make the
+ * two read as the same thing.
+ */
+/*
+ * The loudest thing on the canvas while a drag is happening, and deliberately.
+ * A centre-to-centre guide has been drawn since the beginning and was reported
+ * as missing, because at one pixel against artwork nobody saw it.
+ */
+.vd-editor__guide {
+  stroke: var(--vd-guide, #f43f5e);
+  stroke-width: 2;
+  shape-rendering: crispEdges;
+}
+
+.vd-editor__measure {
+  fill: none;
+  stroke: var(--vd-guide, #f43f5e);
+  stroke-width: 1.5;
+}
+
+.vd-editor__measure-text {
+  fill: var(--vd-guide, #f43f5e);
+  font-family: var(--vd-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+  dominant-baseline: middle;
+  text-anchor: middle;
+  paint-order: stroke;
+  stroke: var(--vd-surface, #ffffff);
+  stroke-width: 3px;
+  stroke-linejoin: round;
+}
+
+/* --- layers --------------------------------------------------------------- */
+
+.vd-layers {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  font-family: var(--vd-font, system-ui, -apple-system, sans-serif);
+  font-size: 12px;
+  color: var(--vd-ink, #1a1a1f);
+}
+
+.vd-layers__tree {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 4px 0 12px;
+  outline: none;
+}
+
+.vd-layers__tree[hidden],
+.vd-layers__empty[hidden] {
+  display: none;
+}
+
+.vd-layers__empty {
+  margin: 0;
+  padding: 16px 14px;
+  line-height: 1.5;
+  opacity: 0.55;
+}
+
+.vd-layers__row {
+  --indent: calc(var(--depth, 0) * 14px);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 28px;
+  padding: 0 6px 0 calc(4px + var(--indent));
+  cursor: default;
+  user-select: none;
+  position: relative;
+}
+
+.vd-layers__row:hover {
+  background: var(--vd-row-hover, rgb(0 0 0 / 0.04));
+}
+
+.vd-layers__row[aria-selected='true'] {
+  background: var(--vd-row-selected, rgb(59 130 246 / 0.14));
+}
+
+.vd-layers__tree:focus-visible .vd-layers__row[data-active='true'] {
+  box-shadow: inset 0 0 0 1px var(--vd-accent, #3b82f6);
+}
+
+.vd-layers__row[data-entered='true'] .vd-layers__label {
+  font-weight: 600;
+}
+
+/* Hidden rows fade; inherited-hidden ones fade the same, because what you see
+   on the canvas is the same either way. */
+.vd-layers__row:not([data-hidden='no']) > :not(.vd-layers__toggles) {
+  opacity: 0.45;
+}
+
+.vd-layers__twisty {
+  display: grid;
+  place-items: center;
+  flex: 0 0 16px;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+}
+
+.vd-layers__twisty:disabled {
+  visibility: hidden;
+}
+
+.vd-layers__twisty svg {
+  width: 10px;
+  height: 10px;
+  transition: transform 100ms ease;
+}
+
+.vd-layers__row[aria-expanded='true'] > .vd-layers__twisty svg {
+  transform: rotate(90deg);
+}
+
+.vd-layers__icon {
+  display: grid;
+  place-items: center;
+  flex: 0 0 16px;
+  opacity: 0.6;
+}
+
+.vd-layers__icon svg {
+  width: 13px;
+  height: 13px;
+}
+
+.vd-layers__label {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vd-layers__tag {
+  flex: 0 0 auto;
+  padding: 0 5px;
+  border: 1px solid currentColor;
+  border-radius: 4px;
+  font-size: 10px;
+  line-height: 14px;
+  opacity: 0.55;
+}
+
+.vd-layers__preview {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  opacity: 0.45;
+}
+
+.vd-layers__rename {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 22px;
+  padding: 0 6px;
+  border: 1px solid var(--vd-accent, #3b82f6);
+  border-radius: 4px;
+  background: var(--vd-input-bg, #fff);
+  color: inherit;
+  font: inherit;
+  outline: none;
+}
+
+.vd-layers__toggles {
+  display: flex;
+  gap: 2px;
+  margin-left: auto;
+  flex: 0 0 auto;
+}
+
+/* Out of the way until wanted, and never out of the way once set: a hidden or
+   locked row has to be recognisable at a glance down a long list. */
+.vd-layers__toggle {
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.vd-layers__row:hover .vd-layers__toggle,
+.vd-layers__row[data-active='true'] .vd-layers__toggle,
+.vd-layers__toggle[data-state='own'] {
+  opacity: 0.7;
+}
+
+.vd-layers__toggle[data-state='inherited'] {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.vd-layers__toggle:hover:not(:disabled) {
+  opacity: 1;
+  background: var(--vd-row-hover, rgb(0 0 0 / 0.06));
+}
+
+.vd-layers__toggle svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* Where a drop lands: a line between rows, or the whole row for "inside". */
+.vd-layers__row[data-drop='above']::before,
+.vd-layers__row[data-drop='below']::after {
+  content: '';
+  position: absolute;
+  left: calc(22px + var(--indent));
+  right: 6px;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--vd-accent, #3b82f6);
+  pointer-events: none;
+}
+
+.vd-layers__row[data-drop='above']::before {
+  top: -1px;
+}
+
+.vd-layers__row[data-drop='below']::after {
+  bottom: -1px;
+}
+
+.vd-layers__row[data-drop='inside'] {
+  box-shadow: inset 0 0 0 2px var(--vd-accent, #3b82f6);
+  border-radius: 4px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-layers__twisty svg {
+    transition: none;
+  }
+}
+
+/* --- inspector ------------------------------------------------------------ */
+
+.vd-inspector {
+  display: flex;
+  flex-direction: column;
+  font-family: var(--vd-font, system-ui, -apple-system, sans-serif);
+  font-size: 12px;
+  color: var(--vd-ink, #1a1a1f);
+}
+
+.vd-inspector__header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 12px 10px;
+}
+
+.vd-inspector__type {
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.12));
+  border-radius: 6px;
+  background: var(--vd-input-bg, rgb(0 0 0 / 0.02));
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+}
+
+.vd-inspector__title {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+/* The name reads as a title until it is clicked, then as the field it is. */
+.vd-inspector__name {
+  width: 100%;
+  margin: 0 0 0 -5px;
+  padding: 3px 4px;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  outline: none;
+  text-overflow: ellipsis;
+}
+
+.vd-inspector__name::placeholder {
+  color: inherit;
+  opacity: 1;
+}
+
+.vd-inspector__name:hover {
+  border-color: var(--vd-rule, rgb(0 0 0 / 0.12));
+}
+
+.vd-inspector__name:focus {
+  border-color: var(--vd-accent, #3b82f6);
+  background: var(--vd-input-bg, rgb(0 0 0 / 0.02));
+}
+
+.vd-inspector__name:focus::placeholder {
+  opacity: 0.4;
+}
+
+.vd-inspector__id {
+  font-family: var(--vd-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 10.5px;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vd-inspector__section {
+  padding: 12px;
+  border-top: 1px solid var(--vd-rule, rgb(0 0 0 / 0.08));
+}
+
+/*
+ * Every heading one way: the title on the column's left edge, any buttons on
+ * the right. Mono capitals, as design.md sets labels.
+ */
+.vd-inspector__heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  height: 24px;
+  margin: 0 0 8px;
+  font-family: var(--vd-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 10.5px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+}
+
+.vd-inspector__heading-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vd-inspector__heading-tools {
+  display: flex;
+  gap: 2px;
+  margin-right: -6px;
+}
+
+.vd-inspector__icon-button.vd-inspector__heading-action {
+  width: 24px;
+  height: 24px;
+}
+
+/* Two equal columns: each control is half a row or the whole of one. */
+.vd-inspector__grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 8px;
+}
+
+.vd-inspector__wide {
+  grid-column: 1 / -1;
+}
+
+.vd-inspector__row {
+  display: flex;
+  gap: 8px;
+}
+
+.vd-inspector__row > * {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+/* None, said quietly: "No stroke", "No shadow". Pressing it adds one. */
+.vd-inspector__empty {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px dashed var(--vd-rule, rgb(0 0 0 / 0.12));
+  border-radius: 8px;
+  background: none;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+  font: inherit;
+  text-align: left;
+  cursor: default;
+}
+
+.vd-inspector__empty:hover {
+  border-style: solid;
+  color: var(--vd-ink, #1a1a1f);
+}
+
+.vd-inspector__empty:focus-visible {
+  outline: 2px solid var(--vd-accent, #3b82f6);
+  outline-offset: 1px;
+}
+
+/* A list inside a section — shadows, stops — under a line naming it. */
+.vd-inspector__list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.vd-inspector__subhead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 24px;
+  margin: 0 -6px -4px 0;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+}
+
+.vd-inspector__subhead > .vd-inspector__icon-button {
+  width: 24px;
+  height: 24px;
+}
+
+/* A list entry’s minus, inside the box at its end. */
+.vd-inspector__icon-button.vd-field__remove {
+  width: 20px;
+  height: 20px;
+  margin-right: -4px;
+  border-radius: 4px;
+}
+
+.vd-field__remove svg {
+  width: 14px;
+  height: 14px;
+}
+
+.vd-inspector__note {
+  margin: 0 0 8px;
+  line-height: 1.5;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+}
+
+.vd-inspector > .vd-inspector__section .vd-inspector__subhead:first-child {
+  margin-top: 0;
+}
+
+p.vd-inspector__subhead {
+  margin: 12px 0 8px;
+  font-size: 11px;
+}
+
+.vd-inspector__readout {
+  display: grid;
+  grid-template-columns: 18px 1fr 18px 1fr;
+  gap: 4px 6px;
+  margin: 0 0 10px;
+}
+
+.vd-inspector__readout dt {
+  opacity: 0.5;
+}
+
+.vd-inspector__readout dd {
+  margin: 0;
+  font-family: var(--vd-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Tokens: colours as a grid of swatches ending in a blank one; numbers as
+   short fields; other kinds as rows. */
+.vd-token-swatches {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
+  gap: 8px;
+}
+
+.vd-token-swatch {
+  position: relative;
+  min-width: 0;
+}
+
+.vd-token-swatch__open,
+.vd-token-swatch--blank {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: default;
+}
+
+.vd-token-swatch__chip {
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  height: 32px;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.12));
+  border-radius: 8px;
+}
+
+/* The blank tile: a dashed outline with a plus, where the next colour goes. */
+.vd-token-swatch--blank .vd-token-swatch__chip {
+  border-style: dashed;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+}
+
+.vd-token-swatch--blank:hover .vd-token-swatch__chip {
+  border-style: solid;
+  color: var(--vd-ink, #1a1a1f);
+}
+
+.vd-token-swatch__open[aria-pressed='true'] .vd-token-swatch__chip,
+.vd-token-swatch--blank[aria-pressed='true'] .vd-token-swatch__chip,
+.vd-token-swatch__open:focus-visible .vd-token-swatch__chip,
+.vd-token-swatch--blank:focus-visible .vd-token-swatch__chip {
+  outline: 2px solid var(--vd-accent, #3b82f6);
+  outline-offset: 1px;
+}
+
+.vd-token-swatch__name {
+  overflow: hidden;
+  font-family: var(--vd-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 10.5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* A tile's remove: a small x on its own surface in the chip's corner, shown on
+   hover or focus, so twenty tiles are not twenty buttons until you ask. */
+.vd-inspector__icon-button.vd-token-swatch__remove {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.12));
+  border-radius: 50%;
+  background: var(--vd-surface-raised, #ffffff);
+  opacity: 0;
+}
+
+.vd-token-swatch__remove svg {
+  width: 12px;
+  height: 12px;
+}
+
+.vd-token-swatch:hover .vd-token-swatch__remove,
+.vd-token-swatch:focus-within .vd-token-swatch__remove,
+.vd-asset:hover .vd-token-swatch__remove,
+.vd-asset:focus-within .vd-token-swatch__remove {
+  opacity: 1;
+}
+
+.vd-inspector__icon-button.vd-token-swatch__remove:hover {
+  background: var(--vd-surface-raised, #ffffff);
+  color: var(--vd-error, #dc2626);
+}
+
+.vd-token-editor {
+  margin-top: 12px;
+}
+
+.vd-token--unused {
+  opacity: 0.5;
+}
+
+.vd-inspector__empty-icon {
+  display: inline-flex;
+  margin-right: 6px;
+}
+
+.vd-inspector__empty-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.vd-inspector__doc-title {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+/* The document's pictures, as thumbnails. */
+.vd-asset-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
+  gap: 8px;
+}
+
+.vd-asset {
+  position: relative;
+  min-width: 0;
+}
+
+.vd-asset__open {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: default;
+}
+
+.vd-asset__thumb {
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.12));
+  border-radius: 8px;
+  background: var(--vd-input-bg, rgb(0 0 0 / 0.02));
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+}
+
+.vd-asset__thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.vd-asset__open:focus-visible .vd-asset__thumb {
+  outline: 2px solid var(--vd-accent, #3b82f6);
+  outline-offset: 1px;
+}
+
+.vd-asset__name {
+  overflow: hidden;
+  font-family: var(--vd-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 10.5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+
+.vd-inspector__button {
+  box-sizing: border-box;
+  height: 28px;
+  padding: 0 12px;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.12));
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: default;
+}
+
+.vd-inspector__button:hover {
+  background: var(--vd-input-bg, rgb(0 0 0 / 0.06));
+}
+
+/*
+ * Six alignments spread across the row. With three or more selected, the two
+ * distributions follow after a gap, because "even out the gaps" is a
+ * different question from "line these up against that edge".
+ */
+.vd-inspector__align {
+  justify-content: space-between;
+  gap: 0;
+  /* The glyphs, not their 28px targets, line up with the column's edges. */
+  margin: 0 -6px;
+}
+
+.vd-inspector__align > .vd-inspector__icon-button {
+  flex: 0 0 28px;
+}
+
+.vd-inspector__align--spread > .vd-inspector__icon-button:nth-child(7) {
+  margin-left: 8px;
+}
+
+.vd-inspector__icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+  cursor: default;
+}
+
+.vd-inspector__icon-button:hover:not(:disabled) {
+  background: var(--vd-input-bg, rgb(0 0 0 / 0.06));
+  color: var(--vd-ink, #1a1a1f);
+}
+
+.vd-inspector__icon-button:focus-visible {
+  outline: 2px solid var(--vd-accent, #3b82f6);
+  outline-offset: -2px;
+}
+
+.vd-inspector__icon-button:disabled {
+  opacity: 0.35;
+}
+
+/* --- fields --------------------------------------------------------------- */
+
+.vd-field {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  min-width: 0;
+  margin: 0;
+}
+
+/* No label column (design.md): the label is the accessible name and the
+   tooltip, and the box carries a mark or reads by its value. */
+.vd-field__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.vd-field__box {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1 1 100%;
+  min-width: 0;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.12));
+  border-radius: 8px;
+  background: var(--vd-input-bg, rgb(0 0 0 / 0.02));
+  transition: border-color 80ms ease;
+}
+
+.vd-field__box:hover {
+  border-color: color-mix(in srgb, var(--vd-muted, rgb(0 0 0 / 0.55)) 55%, transparent);
+}
+
+.vd-field__box:focus-within,
+.vd-field__box:focus-visible {
+  border-color: var(--vd-accent, #3b82f6);
+  outline: none;
+}
+
+.vd-field__prefix {
+  flex: 0 0 auto;
+  min-width: 10px;
+  overflow: hidden;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+  font-family: var(--vd-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 10.5px;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.vd-field__prefix--icon {
+  display: inline-flex;
+  align-items: center;
+  width: 14px;
+}
+
+.vd-field__prefix--icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* Drag the mark to change the value, as in Figma. */
+.vd-field__prefix--scrub {
+  cursor: ew-resize;
+}
+
+.vd-field__input {
+  flex: 1 1 0;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font-family: var(--vd-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+  outline: none;
+  text-overflow: ellipsis;
+}
+
+.vd-field__input::placeholder {
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+  opacity: 0.7;
+}
+
+.vd-field__input:read-only {
+  cursor: default;
+}
+
+.vd-field__swatch {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.15));
+}
+
+/*
+ * What the expression currently comes to. Muted, because the expression is the
+ * value and this is only its reading. A half-width box has room for one of
+ * the two, so it shows the expression and the reading waits for the click
+ * that widens it.
+ */
+.vd-field__resolved {
+  flex: 0 0 auto;
+  font-family: var(--vd-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 10.5px;
+  font-variant-numeric: tabular-nums;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+}
+
+.vd-field__resolved:empty,
+.vd-inspector__half:not(.vd-field--expanded) .vd-field__resolved {
+  display: none;
+}
+
+/* A half-width field widened over its neighbour while it is edited. */
+.vd-field--compact {
+  min-height: 28px;
+}
+
+.vd-field--expanded {
+  z-index: 4;
+}
+
+.vd-field--expanded > .vd-field__box {
+  position: absolute;
+  top: 0;
+}
+
+.vd-field--expanded > .vd-field__error {
+  margin-top: 32px;
+}
+
+/* Detach: shown on a bound field when the pointer or the caret is on it. */
+.vd-field__detach {
+  display: none;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-right: -4px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+  cursor: default;
+}
+
+.vd-field__detach svg {
+  width: 14px;
+  height: 14px;
+}
+
+.vd-field:hover .vd-field__detach:not([hidden]),
+.vd-field:focus-within .vd-field__detach:not([hidden]) {
+  display: inline-flex;
+}
+
+.vd-field__detach:hover {
+  background: var(--vd-rule, rgb(0 0 0 / 0.06));
+  color: var(--vd-ink, #1a1a1f);
+}
+
+/* Amber, matching the bound handles on the canvas: one colour means "bound". */
+.vd-field--bound .vd-field__box {
+  border-color: var(--vd-bound, #f0b429);
+}
+
+.vd-field--bound .vd-field__input {
+  color: var(--vd-bound-ink, #8a6100);
+}
+
+.vd-field--invalid .vd-field__box {
+  border-color: var(--vd-error, #dc2626);
+}
+
+.vd-field__error {
+  flex: 1 1 100%;
+  margin-top: 4px;
+  font-size: 11px;
+  color: var(--vd-error, #dc2626);
+  line-height: 1.4;
+}
+
+/* A dropdown: our button and list, not the operating system's menu. */
+.vd-select {
+  width: 100%;
+  margin: 0;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: default;
+}
+
+.vd-select__value {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vd-select__value--mixed {
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+}
+
+.vd-select__chevron {
+  display: inline-flex;
+  flex: 0 0 auto;
+  margin-right: -2px;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+}
+
+.vd-select__chevron svg {
+  width: 14px;
+  height: 14px;
+}
+
+.vd-listbox.vd-listbox--up {
+  top: auto;
+  bottom: calc(100% + 4px);
+}
+
+.vd-listbox {
+  position: absolute;
+  z-index: 6;
+  top: calc(100% + 4px);
+  left: 0;
+  box-sizing: border-box;
+  min-width: 100%;
+  max-height: 264px;
+  margin: 0;
+  padding: 4px;
+  overflow-y: auto;
+  list-style: none;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.12));
+  border-radius: 8px;
+  background: var(--vd-surface-raised, #ffffff);
+}
+
+.vd-listbox__item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 10px 0 6px;
+  border-radius: 6px;
+  white-space: nowrap;
+  cursor: default;
+}
+
+.vd-listbox__item--active {
+  background: var(--vd-input-bg, rgb(0 0 0 / 0.05));
+}
+
+.vd-listbox__check {
+  display: inline-flex;
+  width: 14px;
+  visibility: hidden;
+}
+
+.vd-listbox__check svg {
+  width: 14px;
+  height: 14px;
+}
+
+.vd-listbox__item[aria-selected='true'] .vd-listbox__check {
+  visibility: visible;
+}
+
+/* The font menu: a search box on top, a list under it, names in their faces. */
+.vd-select__detail {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vd-listbox--search {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  max-height: 320px;
+  overflow: hidden;
+}
+
+.vd-listbox--search[hidden] {
+  display: none;
+}
+
+.vd-listbox__search {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.12));
+  border-radius: 6px;
+  background: var(--vd-input-bg, rgb(0 0 0 / 0.02));
+  color: inherit;
+  font: inherit;
+  outline: none;
+}
+
+.vd-listbox__search:focus {
+  border-color: var(--vd-accent, #3b82f6);
+}
+
+.vd-listbox__list {
+  flex: 1 1 auto;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.vd-listbox__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 13px;
+  text-overflow: ellipsis;
+}
+
+.vd-listbox__detail {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+  font-size: 11px;
+  text-overflow: ellipsis;
+}
+
+.vd-listbox__group {
+  padding: 8px 6px 4px;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+  font-family: var(--vd-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.vd-listbox__group:first-child {
+  padding-top: 2px;
+}
+
+.vd-listbox__none {
+  padding: 8px 6px;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+}
+
+/* "Selection · 5 characters": the fields below edit those, not the box. */
+.vd-inspector__id--run {
+  color: var(--vd-ink, #1a1a1f);
+  font-family: inherit;
+  font-weight: 500;
+}
+
+/* A flag: its label on the left in full, the switch on the right. */
+.vd-field--toggle {
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 28px;
+  flex-wrap: nowrap;
+}
+
+.vd-field--toggle > .vd-field__label {
+  position: static;
+  width: auto;
+  height: auto;
+  overflow: hidden;
+  clip: auto;
+  text-overflow: ellipsis;
+}
+
+.vd-switch {
+  position: relative;
+  flex: 0 0 auto;
+  width: 28px;
+  height: 16px;
+  margin: 0;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.2));
+  border-radius: 8px;
+  background: var(--vd-input-bg, rgb(0 0 0 / 0.06));
+  appearance: none;
+  cursor: default;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+
+.vd-switch::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--vd-muted, rgb(0 0 0 / 0.55));
+  transition: transform 120ms ease, background 120ms ease;
+}
+
+.vd-switch:checked {
+  border-color: var(--vd-chosen, var(--vd-ink, #1a1a1f));
+  background: var(--vd-chosen, var(--vd-ink, #1a1a1f));
+}
+
+.vd-switch:checked::after {
+  transform: translateX(12px);
+  background: var(--vd-on-chosen, #ffffff);
+}
+
+.vd-switch:indeterminate::after {
+  transform: translateX(6px);
+}
+
+.vd-switch:focus-visible {
+  outline: 2px solid var(--vd-accent, #3b82f6);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-switch,
+  .vd-switch::after {
+    transition: none;
+  }
+}
+
+/* Suggestions while typing an expression: a list under the box. */
+.vd-suggest {
+  position: absolute;
+  z-index: 5;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  max-height: 232px;
+  margin: 0;
+  padding: 4px;
+  overflow-y: auto;
+  list-style: none;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.12));
+  border-radius: 8px;
+  background: var(--vd-surface-raised, #ffffff);
+}
+
+.vd-suggest__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 26px;
+  padding: 0 8px;
+  border-radius: 5px;
+  cursor: default;
+}
+
+.vd-suggest__item[aria-selected='true'] {
+  background: var(--vd-input-bg, rgb(0 0 0 / 0.05));
+  box-shadow: inset 0 0 0 1px var(--vd-rule, rgb(0 0 0 / 0.12));
+}
+
+.vd-suggest__swatch {
+  flex: 0 0 auto;
+  width: 12px;
+  height: 12px;
+  border: 1px solid rgb(0 0 0 / 0.15);
+  border-radius: 3px;
+}
+
+.vd-suggest__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  font-family: var(--vd-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 11.5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The sigil carries the kind: amber for tokens, as bound values are. */
+.vd-suggest__item[data-kind='token'] .vd-suggest__label {
+  color: var(--vd-bound-ink, #8a6100);
+}
+
+.vd-suggest__detail {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+  font-family: var(--vd-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 10.5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* A swatch that opens the picker. */
+button.vd-field__swatch {
+  padding: 0;
+  appearance: none;
+  cursor: pointer;
+}
+
+button.vd-field__swatch:focus-visible {
+  outline: 2px solid var(--vd-accent, #3b82f6);
+  outline-offset: 1px;
+}
+
+/* No colour: a hollow square with a quiet slash, still there to press. It is a
+   state, not an error, so it is muted rather than red. */
+.vd-field__swatch--empty {
+  background: linear-gradient(
+    to top right,
+    transparent calc(50% - 0.75px),
+    var(--vd-muted, rgb(0 0 0 / 0.55)) calc(50% - 0.75px),
+    var(--vd-muted, rgb(0 0 0 / 0.55)) calc(50% + 0.75px),
+    transparent calc(50% + 0.75px)
+  );
+}
+
+/* --- colour picker -------------------------------------------------------- */
+
+/* The gradient editor: the stops on a bar, the angle on a dial or the centre on
+   a pad, and the selected stop's place. */
+.vd-picker__gradient-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.vd-picker__gradient-editor[hidden] {
+  display: none;
+}
+
+.vd-picker__stops {
+  position: relative;
+  height: 28px;
+  margin: 0 8px;
+}
+
+.vd-picker__track {
+  position: absolute;
+  inset: 4px -8px;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.12));
+  border-radius: 6px;
+  background:
+    var(--vd-picker-gradient, transparent),
+    repeating-conic-gradient(#d4d4d4 0 25%, #ffffff 0 50%) 0 0 / 8px 8px;
+  cursor: copy;
+}
+
+/* A stop: its colour in a square with a ring, centred on its place. */
+.vd-picker__stop {
+  position: absolute;
+  top: 2px;
+  box-sizing: border-box;
+  width: 16px;
+  height: 24px;
+  margin-left: -8px;
+  padding: 0;
+  border: 2px solid var(--vd-surface-raised, #ffffff);
+  border-radius: 5px;
+  background:
+    linear-gradient(var(--vd-picker-stop, #000), var(--vd-picker-stop, #000)),
+    repeating-conic-gradient(#d4d4d4 0 25%, #ffffff 0 50%) 0 0 / 6px 6px;
+  /* A ring, not a shadow: an outline drawn just outside the white border. */
+  outline: 1px solid var(--vd-rule, rgb(0 0 0 / 0.25));
+  cursor: ew-resize;
+}
+
+.vd-picker__stop[aria-pressed='true'],
+.vd-picker__stop:focus-visible {
+  outline: 2px solid var(--vd-accent, #3b82f6);
+  z-index: 1;
+}
+
+.vd-picker__stop--leaving {
+  opacity: 0.35;
+}
+
+.vd-picker__shape,
+.vd-picker__stop-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.vd-picker__stop-label {
+  flex: 1 1 auto;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+  font-size: 11px;
+}
+
+.vd-picker__dial {
+  position: relative;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.12));
+  border-radius: 50%;
+  background: var(--vd-input-bg, rgb(0 0 0 / 0.02));
+  cursor: grab;
+}
+
+.vd-picker__dial:focus-visible,
+.vd-picker__pad:focus-visible {
+  outline: 2px solid var(--vd-accent, #3b82f6);
+  outline-offset: 1px;
+}
+
+/* The hand points where the gradient goes: up at 0°, right at 90°. */
+.vd-picker__hand {
+  position: absolute;
+  top: 3px;
+  left: calc(50% - 1px);
+  width: 2px;
+  height: 13px;
+  border-radius: 1px;
+  background: var(--vd-ink, #1a1a1f);
+  transform-origin: 50% 100%;
+}
+
+.vd-picker__angle,
+.vd-picker__position {
+  box-sizing: border-box;
+  flex: 0 0 64px;
+  width: 64px;
+  height: 26px;
+  padding: 0 8px;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.12));
+  border-radius: 6px;
+  background: var(--vd-input-bg, rgb(0 0 0 / 0.02));
+  color: inherit;
+  font-family: var(--vd-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 11.5px;
+  outline: none;
+}
+
+.vd-picker__angle:focus,
+.vd-picker__position:focus {
+  border-color: var(--vd-accent, #3b82f6);
+}
+
+.vd-picker__pad {
+  position: relative;
+  flex: 1 1 auto;
+  height: 72px;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.12));
+  border-radius: 6px;
+  background:
+    var(--vd-picker-gradient, transparent),
+    repeating-conic-gradient(#d4d4d4 0 25%, #ffffff 0 50%) 0 0 / 8px 8px;
+  cursor: crosshair;
+}
+
+.vd-picker__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 26px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+}
+
+.vd-picker__icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.vd-picker__icon:hover:not(:disabled) {
+  background: var(--vd-input-bg, rgb(0 0 0 / 0.06));
+  color: var(--vd-ink, #1a1a1f);
+}
+
+.vd-picker__icon:disabled {
+  opacity: 0.35;
+}
+
+/* Solid, Linear, Radial: the tabs over a paint that can be a gradient. */
+.vd-picker__kinds {
+  flex: 0 0 auto;
+}
+
+.vd-picker__custom {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.vd-picker__custom[hidden],
+.vd-picker__save[hidden] {
+  display: none;
+}
+
+
+.vd-picker {
+  position: absolute;
+  z-index: 6;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  min-width: 232px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.12));
+  border-radius: 10px;
+  background: var(--vd-surface-raised, #ffffff);
+  color: var(--vd-ink, #1a1a1f);
+}
+
+.vd-picker--inline {
+  position: static;
+  min-width: 0;
+  margin-top: 8px;
+}
+
+.vd-picker__head {
+  font-family: var(--vd-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 10.5px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+}
+
+.vd-picker__filter,
+.vd-picker__inputs input,
+.vd-picker__save input {
+  box-sizing: border-box;
+  min-width: 0;
+  height: 26px;
+  padding: 0 8px;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.12));
+  border-radius: 6px;
+  background: var(--vd-input-bg, rgb(0 0 0 / 0.02));
+  color: inherit;
+  font-family: var(--vd-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 11.5px;
+  outline: none;
+}
+
+.vd-picker__filter:focus,
+.vd-picker__inputs input:focus,
+.vd-picker__save input:focus {
+  border-color: var(--vd-accent, #3b82f6);
+}
+
+/* Tokens as colour rects: the expression shown as the colour it names. */
+.vd-picker__tokens {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(22px, 1fr));
+  gap: 6px;
+}
+
+.vd-picker__token {
+  aspect-ratio: 1;
+  padding: 0;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.12));
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.vd-picker__token[aria-pressed='true'],
+.vd-picker__token:focus-visible {
+  outline: 2px solid var(--vd-accent, #3b82f6);
+  outline-offset: 1px;
+}
+
+.vd-picker__square {
+  position: relative;
+  height: 128px;
+  border-radius: 6px;
+  background-image:
+    linear-gradient(to top, #000, transparent),
+    linear-gradient(to right, #fff, transparent);
+  touch-action: none;
+  cursor: crosshair;
+}
+
+.vd-picker__strip {
+  position: relative;
+  height: 12px;
+  border-radius: 6px;
+  touch-action: none;
+  cursor: ew-resize;
+}
+
+.vd-picker__hue {
+  background: linear-gradient(
+    to right,
+    #f00 0%,
+    #ff0 17%,
+    #0f0 33%,
+    #0ff 50%,
+    #00f 67%,
+    #f0f 83%,
+    #f00 100%
+  );
+}
+
+/* Alpha over a checkerboard, so transparency reads as transparency. */
+.vd-picker__alpha {
+  background:
+    linear-gradient(to right, transparent, var(--vd-picker-solid, #000)),
+    repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 8px 8px;
+}
+
+.vd-picker__thumb {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  outline: 1px solid rgb(0 0 0 / 0.35);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.vd-picker__square > .vd-picker__thumb {
+  top: 0;
+}
+
+.vd-picker__square:focus-visible,
+.vd-picker__strip:focus-visible {
+  outline: 2px solid var(--vd-accent, #3b82f6);
+  outline-offset: 2px;
+}
+
+.vd-picker__inputs {
+  display: flex;
+  gap: 6px;
+}
+
+.vd-picker__hex {
+  flex: 1 1 auto;
+}
+
+.vd-picker__percent {
+  flex: 0 0 56px;
+  width: 56px;
+}
+
+.vd-picker__dropper {
+  flex: 0 0 26px;
+  height: 26px;
+  padding: 0;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.12));
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+  cursor: pointer;
+}
+
+.vd-picker__save {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.vd-picker__error {
+  color: var(--vd-error, #dc2626);
+  line-height: 1.4;
+}
+
+/* A small closed set, shown whole. */
+.vd-field--segmented {
+  margin-bottom: 0;
+}
+
+.vd-segmented {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+  height: 28px;
+  padding: 2px;
+  gap: 2px;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.12));
+  border-radius: 8px;
+  background: var(--vd-input-bg, rgb(0 0 0 / 0.02));
+}
+
+.vd-field--segmented > .vd-segmented {
+  flex: 1 1 100%;
+}
+
+.vd-segmented__option svg {
+  width: 14px;
+  height: 14px;
+}
+
+.vd-segmented__option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 0;
+  min-width: 0;
+  padding: 0 4px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+  font: inherit;
+  font-size: 11px;
+  cursor: default;
+}
+
+.vd-segmented__option:hover {
+  color: var(--vd-ink, #1a1a1f);
+}
+
+.vd-segmented__option[aria-pressed='true'] {
+  background: var(--vd-surface-raised, rgb(0 0 0 / 0.08));
+  color: var(--vd-ink, #1a1a1f);
+  box-shadow: inset 0 0 0 1px var(--vd-rule, rgb(0 0 0 / 0.12));
+}
+
+/* --- context menu --------------------------------------------------------- */
+
+.vd-menu {
+  position: absolute;
+  z-index: 3;
+  min-width: 200px;
+  padding: 4px;
+  border-radius: 8px;
+  background: var(--vd-chrome-bg, #202027);
+  border: 1px solid rgb(255 255 255 / 0.08);
+  box-shadow: var(--vd-chrome-shadow, 0 10px 30px rgb(0 0 0 / 0.35));
+  font-family: var(--vd-font, system-ui, -apple-system, sans-serif);
+  font-size: 12px;
+  user-select: none;
+}
+
+.vd-menu[hidden] {
+  display: none;
+}
+
+.vd-menu__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  width: 100%;
+  padding: 6px 10px;
+  border: 0;
+  border-radius: 5px;
+  background: none;
+  color: rgb(255 255 255 / 0.86);
+  font: inherit;
+  text-align: left;
+  cursor: default;
+}
+
+.vd-menu__item:hover:not(:disabled),
+.vd-menu__item:focus-visible {
+  background: var(--vd-menu-active, var(--vd-accent, #3b82f6));
+  color: var(--vd-menu-active-ink, #fff);
+  outline: none;
+}
+
+.vd-menu__item:disabled {
+  color: rgb(255 255 255 / 0.28);
+}
+
+/* The expression you are about to lose, or the shortcut that does the same. */
+.vd-menu__hint {
+  color: rgb(255 255 255 / 0.4);
+  font-family: var(--vd-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 11px;
+  max-width: 190px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vd-menu__item:hover:not(:disabled) .vd-menu__hint,
+.vd-menu__item:focus-visible .vd-menu__hint {
+  color: rgb(255 255 255 / 0.75);
+}
+
+.vd-menu__separator {
+  height: 1px;
+  margin: 4px 6px;
+  background: rgb(255 255 255 / 0.1);
+}
+
+/* --- floating toolbar ----------------------------------------------------- */
+
+.vd-chrome {
+  position: absolute;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 5px;
+  border-radius: 12px;
+  border: 1px solid rgb(255 255 255 / 0.08);
+  background: var(--vd-chrome-bg, #2c2c33);
+  box-shadow: var(
+    --vd-chrome-shadow,
+    0 1px 2px rgb(0 0 0 / 0.3),
+    0 10px 30px rgb(0 0 0 / 0.35)
+  );
+  color: var(--vd-chrome-ink, #d8d8de);
+  user-select: none;
+}
+
+.vd-chrome__tool {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.vd-chrome__tool:hover:not(:disabled) {
+  background: rgb(255 255 255 / 0.09);
+  color: #fff;
+}
+
+.vd-chrome__tool[aria-pressed='true'] {
+  background: var(--vd-chrome-active, var(--vd-accent, #3b82f6));
+  color: var(--vd-chrome-active-ink, #fff);
+}
+
+.vd-chrome__tool:disabled {
+  opacity: 0.32;
+  cursor: default;
+}
+
+.vd-chrome__divider {
+  width: 1px;
+  height: 20px;
+  margin: 0 4px;
+  background: rgb(255 255 255 / 0.12);
+}
+
+.vd-chrome__zoom {
+  min-width: 54px;
+  height: 32px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  font: 500 12px/1 var(--vd-font, ui-sans-serif, system-ui, sans-serif);
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+
+.vd-chrome__zoom:hover {
+  background: rgb(255 255 255 / 0.09);
+  color: #fff;
+}