nudge-ui 0.2.2 → 0.2.4

package/dist/inspector/ui/styles.js

@@ -1,38 +1,42 @@
 import { DRAG_CURSOR_STYLES } from "./dragCursor.js";
 const fieldRowStyles = ".field-row {\n  display: grid;\n  grid-template-columns: var(--label-column) minmax(0, 1fr);\n  gap: var(--space-8);\n  align-items: center;\n  min-height: var(--control-height-large);\n}\n\n.field-row--has-action {\n  grid-template-columns: var(--label-column) minmax(0, 1fr) auto;\n}\n\n.field-row__label {\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  line-height: 1.25;\n}\n\n.field-row__label--hidden {\n  position: absolute;\n  width: var(--space-0);\n  height: var(--space-0);\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.field-row__control {\n  position: relative;\n  display: block;\n  min-width: 0;\n}\n\n.field-row__action {\n  display: inline-flex;\n  min-width: 0;\n  align-items: center;\n  justify-content: flex-end;\n}\n\n.field-row__control[data-has-at-rule=\"true\"] {\n  /* Keep the badge out of the control's horizontal layout. */\n  isolation: isolate;\n}\n\n.field-row--stacked {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--space-8);\n  min-height: 0;\n}\n\n.field-row--stacked .field-row__control {\n  width: 100%;\n}\n\n.field-row__hint {\n  display: block;\n  margin-top: var(--space-4);\n  color: var(--text-muted-subtle);\n  font-size: var(--font-size-base);\n  line-height: 1.3;\n}\n";
-const atRuleContextStyles = ".at-rule-indicator {\n  position: absolute;\n  z-index: 2;\n  top: -4px;\n  left: -4px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 4px;\n  border: 0;\n  border-radius: var(--radius-pill);\n  background: var(--surface-raised-2x);\n  color: var(--content-primary, var(--text-primary));\n  box-shadow: var(--shadow-outline);\n  font: inherit;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  white-space: nowrap;\n  cursor: help;\n}\n\n.at-rule-indicator::before {\n  position: absolute;\n  inset: -4px;\n  content: \"\";\n}\n\n.at-rule-indicator:hover {\n  color: var(--content-primary, var(--text-primary));\n  background: var(--surface-raised-2x);\n}\n\n.at-rule-indicator__symbol {\n  display: block;\n}\n\n.at-rule-indicator:focus-visible {\n  outline: 0;\n  box-shadow: 0 0 0 2px var(--accent);\n}\n\n.at-rule-tooltip-positioner {\n  /* The portal is a sibling of the panel in the inspector shadow root. */\n  z-index: 35;\n  pointer-events: auto;\n}\n\n.at-rule-tooltip {\n  width: max-content;\n  max-width: min(320px, calc(100vw - 24px));\n  padding: var(--space-4);\n  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);\n  border-radius: var(--radius-8);\n  background: var(--surface-raised);\n  box-shadow: 0 8px 22px rgb(0 0 0 / 18%);\n  color: var(--text-primary);\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  line-height: 1.35;\n}\n\n.at-rule-tooltip__rules {\n  display: grid;\n  gap: 2px;\n}\n\n.at-rule-tooltip__rule {\n  min-width: 0;\n  padding: 5px 6px;\n  border-radius: var(--radius-4);\n}\n\n.at-rule-tooltip code {\n  display: block;\n  min-width: 0;\n  overflow-wrap: anywhere;\n  color: var(--text-primary);\n  font: inherit;\n}\n";
-const foundationStyles = ":host {\n  all: initial;\n  --surface-panel: #F5F5F4;\n  --surface-control: var(--surface-well);\n  --surface-control-hover: var(--surface-well-2x);\n  --surface-raised: #FAFAFA;\n  --surface-raised-2x: #fff ;\n  --surface-raised-hover: #F5F5F4;\n  --surface-well: hsla(0, 0%, 0%, 0.05);\n  --surface-well-2x: hsla(0, 0%, 0%, 0.10);\n\n  --border-subtle: hsla(0, 0%, 0%, 0.1);\n  --border-medium: hsla(0, 0%, 0%, 0.2);\n  --border-strong: #d8d8d8;\n\n  --text-primary: #242424;\n  --text-secondary: #6f6f6f;\n  --text-muted: #777777;\n  --text-muted-subtle: #a1a1a1;\n\n  --accent: #0096ff;\n  --accent-surface: rgba(0, 176, 255, 0.15);\n  --warning: #d97706;\n  --warning-text: #9a5b00;\n  --warning-surface: #fff6e5;\n  --danger: #df4b4b;\n  --danger-text: #bd3636;\n  --danger-surface: rgba(223, 75, 75, 0.2);\n\n  --space-0: 0;\n  --space-4: 4px;\n  --space-8: 8px;\n  --space-12: 12px;\n  --space-16: 16px;\n  --space-20: 20px;\n  --space-24: 24px;\n  --space-32: 32px;\n  --space-40: 40px;\n  --space-48: 48px;\n\n  /* Radius */\n  --radius-0: 0;\n  --radius-4: 4px;\n  --radius-8: 8px;\n  --radius-12: 12px;\n  --radius-16: 16px;\n  --radius-20: 20px;\n  --radius-24: 24px;\n  --radius-pill: 999px;\n\n  --radius-control: var(--radius-8);\n  --shadow-outline: 0 0 0 1px rgba(0, 0, 0, 0.05);\n  --shadow-popup: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.10);\n  --shadow-control: inset 0 -2px 0 rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.25);\n  --z-index: 2147483647;\n\n  --font-family: \"Inter Variable\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --font-size-base: 12px;\n  --font-size-small: 10px;\n  --font-weight-base: 400;\n  --font-weight-label: 600;\n\n  /* Control semantic sizes */\n  --control-height-small: 24px;\n  --control-height-large: 32px;\n  --control-height-xlarge: 40px;\n  --label-column: 104px;\n\n  --icon-size-small: 16px;\n  --icon-size-large: 20px;\n  --icon-stroke-width: 1.5px;\n\n  position: fixed;\n  inset: 0;\n  z-index: var(--z-index);\n  pointer-events: none;\n  font-family: var(--font-family);\n  background: transparent;\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nbutton,\ninput,\nselect {\n  font-family: inherit;\n}\n";
-const controlSurfaceStyles = "/*\n * A single visual boundary for a field. Standalone text inputs and selects\n * share these defaults; composed fields use ControlSurface and make their\n * content embedded so only this element paints control chrome.\n */\n.control-surface,\n.text-input,\n.select {\n  --control-surface-height: var(--control-height-large);\n  --control-surface-padding: 2px 8px;\n  --control-surface-gap: 6px;\n  box-sizing: border-box;\n  min-width: 0;\n  height: var(--control-surface-height);\n  padding: var(--control-surface-padding);\n  border: 0;\n  border-radius: var(--radius-control);\n  outline: 0;\n  background: var(--surface-control);\n  color: var(--text-primary);\n  font: inherit;\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  transition: background-color 120ms ease, box-shadow 120ms ease;\n}\n\n.control-surface {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  gap: var(--control-surface-gap);\n}\n\n.control-surface:has(.token-field--color) {\n  --control-surface-padding: 2px 8px 2px 2px;\n}\n\n.control-surface--compact,\n.text-input--compact,\n.select--compact {\n  --control-surface-height: var(--control-height-small);\n  --control-surface-padding: 0 6px;\n}\n\n.control-surface:hover:not(:focus-within),\n.text-input:hover:not(:focus),\n.select:hover:not(:disabled) {\n  background: var(--surface-control-hover);\n}\n\n.control-surface:focus-within,\n.text-input:focus-visible,\n.select:focus-visible,\n.select[data-popup-open] {\n  box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.control-surface--embedded,\n.text-input--embedded,\n.select--embedded {\n  padding: 0;\n  background: transparent;\n  border-radius: 0;\n  box-shadow: none;\n}\n\n.control-surface--embedded:hover:not(:focus-within),\n.text-input--embedded:hover:not(:focus),\n.select--embedded:hover:not(:disabled),\n.control-surface--embedded:focus-within,\n.text-input--embedded:focus-visible,\n.select--embedded:focus-visible,\n.select--embedded[data-popup-open] {\n  background: transparent;\n  box-shadow: none;\n}\n";
+const atRuleContextStyles = ".at-rule-indicator {\n  position: absolute;\n  z-index: 2;\n  top: -4px;\n  left: -4px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 4px;\n  border: 0;\n  border-radius: var(--radius-pill);\n  background: var(--surface-raised-2x);\n  color: var(--content-primary, var(--text-primary));\n  box-shadow: var(--shadow-outline);\n  font: inherit;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  white-space: nowrap;\n  cursor: default;\n}\n\n.at-rule-indicator::before {\n  position: absolute;\n  inset: -4px;\n  content: \"\";\n}\n\n.at-rule-indicator:hover {\n  color: var(--content-primary, var(--text-primary));\n  background: var(--surface-raised-2x);\n}\n\n.at-rule-indicator__symbol {\n  display: block;\n}\n\n.at-rule-indicator:focus-visible {\n  outline: 0;\n  box-shadow: 0 0 0 2px var(--accent);\n}\n\n.at-rule-tooltip-positioner {\n  /* The portal is a sibling of the panel in the inspector shadow root. */\n  z-index: 35;\n  pointer-events: auto;\n}\n\n.at-rule-tooltip {\n  width: max-content;\n  max-width: min(320px, calc(100vw - var(--space-24)));\n  padding: var(--space-8) var(--space-12);\n  border: 0;\n  border-radius: var(--radius-8);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  color: var(--text-primary);\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  line-height: 1.35;\n}\n\n.at-rule-tooltip__rules {\n  display: grid;\n  gap: 2px;\n}\n\n.at-rule-tooltip__rule {\n  min-width: 0;\n  padding: 5px var(--space-8);\n  border-radius: var(--radius-4);\n}\n\n.at-rule-tooltip code {\n  display: block;\n  min-width: 0;\n  overflow-wrap: anywhere;\n  color: var(--text-primary);\n  font: inherit;\n}\n";
+const foundationStyles = ":host {\n  all: initial;\n  --surface-panel: #F5F5F4;\n  --surface-control: var(--surface-well);\n  --surface-control-hover: var(--surface-well-2x);\n  --surface-raised: #FAFAFA;\n  --surface-raised-2x: #fff ;\n  --surface-raised-hover: #F5F5F4;\n  --surface-well: hsla(0, 0%, 0%, 0.05);\n  --surface-well-2x: hsla(0, 0%, 0%, 0.10);\n\n  --border-subtle: hsla(0, 0%, 0%, 0.1);\n  --border-medium: hsla(0, 0%, 0%, 0.2);\n  --border-strong: #d8d8d8;\n\n  --text-primary: #242424;\n  --text-secondary: #6f6f6f;\n  --text-muted: #777777;\n  --text-muted-subtle: #a1a1a1;\n\n  --accent: #0096ff;\n  --accent-surface: rgba(0, 176, 255, 0.15);\n  --warning: #d97706;\n  --warning-text: #9a5b00;\n  --warning-surface: #fff6e5;\n  --danger: #df4b4b;\n  --danger-text: #bd3636;\n  --danger-surface: rgba(223, 75, 75, 0.2);\n  --success: #2e7d52;\n\n  --space-0: 0;\n  --space-4: 4px;\n  --space-8: 8px;\n  --space-12: 12px;\n  --space-16: 16px;\n  --space-20: 20px;\n  --space-24: 24px;\n  --space-32: 32px;\n  --space-40: 40px;\n  --space-48: 48px;\n\n  /* Radius */\n  --radius-0: 0;\n  --radius-4: 4px;\n  --radius-8: 8px;\n  --radius-12: 12px;\n  --radius-16: 16px;\n  --radius-20: 20px;\n  --radius-24: 24px;\n  --radius-pill: 999px;\n\n  --radius-control: var(--radius-8);\n  --shadow-outline: 0 0 0 1px rgba(0, 0, 0, 0.05);\n  --shadow-popup: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.10);\n  --shadow-control: inset 0 -2px 0 rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.25);\n  --z-index: 2147483647;\n\n  --font-family: \"Inter Variable\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --font-size-base: 12px;\n  --font-size-small: 10px;\n  --font-weight-base: 400;\n  --font-weight-label: 600;\n\n  /* Control semantic sizes */\n  --control-height-small: 24px;\n  --control-height-large: 32px;\n  --control-height-xlarge: 40px;\n  --label-column: 104px;\n\n  --icon-size-small: 16px;\n  --icon-size-large: 20px;\n  --icon-stroke-width: 1.5px;\n\n  position: fixed;\n  inset: 0;\n  z-index: var(--z-index);\n  pointer-events: none;\n  font-family: var(--font-family);\n  background: transparent;\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nbutton,\ninput,\nselect {\n  font-family: inherit;\n}\n";
+const controlSurfaceStyles = "/*\n * A single visual boundary for a field. Standalone text inputs and selects\n * share these defaults; composed fields use ControlSurface and make their\n * content embedded so only this element paints control chrome.\n */\n.control-surface,\n.text-input,\n.select {\n  --control-surface-height: var(--control-height-large);\n  --control-surface-padding: 2px 8px;\n  --control-surface-gap: var(--space-8);\n  box-sizing: border-box;\n  min-width: 0;\n  height: var(--control-surface-height);\n  padding: var(--control-surface-padding);\n  border: 0;\n  border-radius: var(--radius-control);\n  outline: 0;\n  background: var(--surface-control);\n  color: var(--text-primary);\n  font: inherit;\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  transition: background-color 120ms ease, box-shadow 120ms ease;\n}\n\n.control-surface {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  gap: var(--control-surface-gap);\n}\n\n.control-surface:has(.token-field--color) {\n  --control-surface-padding: 2px 8px 2px 2px;\n}\n\n.control-surface--compact,\n.text-input--compact,\n.select--compact {\n  --control-surface-height: var(--control-height-small);\n  --control-surface-padding: 0 var(--space-8);\n}\n\n.control-surface:hover:not(:focus-within),\n.text-input:hover:not(:focus),\n.select:hover:not(:disabled) {\n  background: var(--surface-control-hover);\n}\n\n.control-surface:focus-within,\n.text-input:focus-visible,\n.select:focus-visible,\n.select[data-popup-open] {\n  box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.control-surface--embedded,\n.text-input--embedded,\n.select--embedded {\n  padding: 0;\n  background: transparent;\n  border-radius: 0;\n  box-shadow: none;\n}\n\n.control-surface--embedded:hover:not(:focus-within),\n.text-input--embedded:hover:not(:focus),\n.select--embedded:hover:not(:disabled),\n.control-surface--embedded:focus-within,\n.text-input--embedded:focus-visible,\n.select--embedded:focus-visible,\n.select--embedded[data-popup-open] {\n  background: transparent;\n  box-shadow: none;\n}\n";
 const textInputStyles = ".text-input {\n  width: 100%;\n}\n\n.text-input::placeholder {\n  color: var(--text-muted);\n  opacity: 1;\n}\n";
-const selectStyles = ".select {\n  display: inline-flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  text-align: left;\n  cursor: pointer;\n}\n\n.select:disabled {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.select__value,\n.select [data-slot=\"select-value\"] {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.select__icon {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  color: var(--text-muted);\n  transition: transform 120ms ease;\n}\n\n.select[data-popup-open] .select__icon {\n  color: var(--text-primary);\n  transform: rotate(180deg);\n}\n\n.select__positioner {\n  z-index: var(--z-index);\n  min-width: var(--anchor-width);\n  pointer-events: auto;\n}\n\n.select__popup {\n  box-sizing: border-box;\n  width: min(420px, max(var(--anchor-width, 0px), 260px));\n  min-width: 0;\n  max-width: calc(100vw - 24px);\n  max-height: min(320px, calc(100dvh - 24px), var(--available-height, 100dvh));\n  overflow-x: hidden;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  pointer-events: auto;\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  border-radius: var(--radius-8);\n  box-shadow: var(--shadow-popup);\n  transform-origin: var(--transform-origin);\n}\n\n.select__popup--searchable {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.select__search-input {\n  box-sizing: border-box;\n  flex: 0 0 auto;\n  width: calc(100% - (var(--space-4) * 2));\n  min-height: 32px;\n  margin: var(--space-4);\n  padding: var(--space-8);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-8);\n  background: var(--surface-control);\n  color: var(--text-primary);\n  outline: 0;\n  font: inherit;\n}\n\n.select__search-input::placeholder {\n  color: var(--text-muted);\n  opacity: 1;\n}\n\n.select__search-input:focus {\n  border-color: var(--border-strong);\n  box-shadow: 0 0 0 2px var(--accent);\n}\n\n.select__empty {\n  padding: 12px 14px;\n  color: var(--text-muted);\n  font-size: var(--font-size-base);\n}\n\n.select__empty:empty {\n  padding: 0;\n}\n\n.select__list {\n  min-width: 0;\n  padding: var(--space-4);\n  outline: 0;\n}\n\n.select__list--searchable {\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n\n.select__group + .select__group {\n  margin-top: 4px;\n  padding-top: 4px;\n  border-top: 1px solid var(--border-subtle);\n}\n\n.select__group-label {\n  padding: 5px 8px 4px;\n  color: var(--text-muted);\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.select__item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  min-height: 34px;\n  padding: 6px 9px;\n  border-radius: var(--radius-4);\n  color: var(--text-primary);\n  outline: 0;\n  font-size: var(--font-size-base);\n  cursor: pointer;\n}\n\n.select__item[data-highlighted] {\n  background: var(--surface-control);\n}\n\n.select__item[data-disabled] {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.select__item-indicator {\n  display: inline-flex;\n  width: 16px;\n  flex: 0 0 16px;\n  align-items: center;\n  justify-content: center;\n}\n\n.select__item-text {\n  min-width: 0;\n  flex: 1 1 0;\n  overflow: hidden;\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
+const selectStyles = ".select {\n  display: inline-flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  text-align: left;\n  cursor: pointer;\n}\n\n.select:disabled {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.select.select--icon-only {\n  width: var(--control-height-large);\n  justify-content: center;\n  padding: 0;\n}\n\n.select--icon-only > .select__value,\n.select--icon-only > .select__icon {\n  display: none;\n}\n\n.select__value,\n.select [data-slot=\"select-value\"] {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.select__icon {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  color: var(--text-muted);\n  transition: transform 120ms ease;\n}\n\n.select[data-popup-open] .select__icon {\n  color: var(--text-primary);\n  transform: rotate(180deg);\n}\n\n.select__positioner {\n  z-index: var(--z-index);\n  min-width: var(--anchor-width);\n  pointer-events: auto;\n}\n\n.select__popup {\n  box-sizing: border-box;\n  width: min(420px, max(var(--anchor-width, 0px), 260px));\n  min-width: 0;\n  max-width: calc(100vw - 24px);\n  max-height: min(320px, calc(100dvh - 24px), var(--available-height, 100dvh));\n  overflow-x: hidden;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  pointer-events: auto;\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  border-radius: var(--radius-8);\n  box-shadow: var(--shadow-popup);\n  transform-origin: var(--transform-origin);\n}\n\n.select__popup--searchable {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.select__search-input {\n  box-sizing: border-box;\n  flex: 0 0 auto;\n  width: calc(100% - (var(--space-4) * 2));\n  min-height: 32px;\n  margin: var(--space-4);\n  padding: var(--space-8);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-8);\n  background: var(--surface-control);\n  color: var(--text-primary);\n  outline: 0;\n  font: inherit;\n}\n\n.select__search-input::placeholder {\n  color: var(--text-muted);\n  opacity: 1;\n}\n\n.select__search-input:focus {\n  border-color: var(--border-strong);\n  box-shadow: 0 0 0 2px var(--accent);\n}\n\n.select__empty {\n  padding: 12px 14px;\n  color: var(--text-muted);\n  font-size: var(--font-size-base);\n}\n\n.select__empty:empty {\n  padding: 0;\n}\n\n.select__list {\n  min-width: 0;\n  padding: var(--space-4);\n  outline: 0;\n}\n\n.select__list--searchable {\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n\n.select__group + .select__group {\n  margin-top: 4px;\n  padding-top: 4px;\n  border-top: 1px solid var(--border-subtle);\n}\n\n.select__group-label {\n  padding: 5px 8px 4px;\n  color: var(--text-muted);\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.select__item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  min-height: 34px;\n  padding: var(--space-8) 9px;\n  border-radius: var(--radius-4);\n  color: var(--text-primary);\n  outline: 0;\n  font-size: var(--font-size-base);\n  cursor: pointer;\n}\n\n.select__item[data-highlighted] {\n  background: var(--surface-control);\n}\n\n.select__item[data-disabled] {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.select__item-indicator {\n  display: inline-flex;\n  width: 16px;\n  flex: 0 0 16px;\n  align-items: center;\n  justify-content: center;\n}\n\n.select__item-text {\n  min-width: 0;\n  flex: 1 1 0;\n  overflow: hidden;\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
 const buttonStyles = ".button {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-4);\n  background: var(--surface-control);\n  border: 0;\n  color: var(--text-primary);\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  min-height: var(--control-height-large);\n  padding: 0 12px;\n  border-radius: var(--radius-control);\n  vertical-align: middle;\n  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;\n}\n\n.button--compact {\n  min-height: var(--control-height-small);\n  padding: 0 10px;\n  font-size: var(--font-size-base);\n  border-radius: var(--radius-4);\n}\n\n.button--large {\n  min-height: var(--control-height-xlarge);\n  padding: 0 var(--space-12);\n}\n\n.button--large svg {\n  width: var(--icon-size-large);\n  height: var(--icon-size-large);\n}\n\n.button--primary {\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-control);\n}\n\n.button--secondary {\n  background: var(--surface-control);\n}\n\n.button--quiet {\n  background: transparent;\n  color: var(--text-primary);\n}\n\n.button--danger {\n  background: var(--danger-surface);\n  color: var(--danger-text);\n}\n\n.button--disabled {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.button:hover:not(:disabled) {\n  background: var(--surface-control-hover);\n}\n\n.button--quiet:hover:not(:disabled) {\n  background: var(--surface-well);\n}\n\n.button--primary:hover:not(:disabled) {\n  background: var(--surface-raised-hover);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-control);\n}\n\n.button[data-active=\"true\"] {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.button[data-active=\"true\"]:hover:not(:disabled) {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.button:focus-visible {\n  outline: 0;\n  box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.button:disabled {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n";
 const segmentedControlStyles = ".segmented-control {\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: minmax(0, 1fr);\n  align-items: stretch;\n  gap: 2px;\n  min-width: 0;\n  min-height: var(--control-height-large);\n  padding: 2px;\n  box-sizing: border-box;\n  overflow: hidden;\n  border-radius: var(--radius-control);\n  background: var(--surface-well);\n}\n\n/* button is the base; stretch fills the padded track (grows with text). */\n.button.segmented-control__button {\n  min-width: 0;\n  min-height: 0;\n  height: auto;\n  padding: 0 var(--space-8);\n  border: 0;\n  border-radius: 6px; /*Custom to fit inside control surface*/\n  background: transparent;\n  color: var(--text-muted);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  box-shadow: none;\n}\n\n.button.segmented-control__button--selected,\n.button.segmented-control__button--selected:hover:not(:disabled) {\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-control);\n}\n\n.button.segmented-control__button:not(.segmented-control__button--selected):hover:not(:disabled) {\n  background: transparent;\n  color: var(--text-primary);\n}\n\n.segmented-control__button svg {\n  flex-shrink: 0;\n}\n\n.segmented-control__label {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
-const iconButtonStyles = ".icon-button {\n  appearance: none;\n  background: var(--surface-control);\n  border: 0;\n  color: var(--text-primary);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--control-height-large);\n  height: var(--control-height-large);\n  padding: 0;\n  border-radius: var(--radius-control);\n  font: inherit;\n  font-size: var(--font-size-base);\n  font-weight: 650;\n  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;\n}\n\n.icon-button svg {\n  stroke-width: var(--icon-stroke-width);\n}\n\n.icon-button--primary {\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-control);\n}\n\n.icon-button--secondary {\n  background: var(--surface-control);\n}\n\n.icon-button--quiet {\n  background: transparent;\n  color: var(--text-primary);\n}\n\n.icon-button--danger {\n  background: var(--danger-surface);\n  color: var(--danger-text);\n}\n\n.icon-button--disabled {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.icon-button:hover:not(:disabled) {\n  background: var(--surface-well);\n}\n\n.icon-button--primary:hover:not(:disabled) {\n  background: var(--surface-raised-hover);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-control);\n}\n\n.icon-button[data-active=\"true\"] {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.icon-button:focus-visible {\n  outline: 0;\n  box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.icon-button:disabled {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.icon-button--compact {\n  width: var(--control-height-small);\n  height: var(--control-height-small);\n  border-radius: var(--radius-4);\n}\n\n.icon-button--large {\n  width: var(--control-height-xlarge);\n  height: var(--control-height-xlarge);\n}\n\n.icon-button--large svg {\n  width: var(--icon-size-large);\n  height: var(--icon-size-large);\n}\n";
+const iconButtonStyles = ".icon-button {\n  appearance: none;\n  background: var(--surface-control);\n  border: 0;\n  color: var(--text-primary);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--control-height-large);\n  height: var(--control-height-large);\n  padding: 0;\n  border-radius: var(--radius-control);\n  font: inherit;\n  font-size: var(--font-size-base);\n  font-weight: 650;\n  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;\n}\n\n.icon-button svg {\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n  stroke-width: var(--icon-stroke-width);\n}\n\n.icon-button--primary {\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-control);\n}\n\n.icon-button--secondary {\n  background: var(--surface-control);\n}\n\n.icon-button--quiet {\n  background: transparent;\n  color: var(--text-primary);\n}\n\n.icon-button--danger {\n  background: var(--danger-surface);\n  color: var(--danger-text);\n}\n\n.icon-button--disabled {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.icon-button:hover:not(:disabled) {\n  background: var(--surface-well);\n}\n\n.icon-button--primary:hover:not(:disabled) {\n  background: var(--surface-raised-hover);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-control);\n}\n\n.icon-button[data-active=\"true\"] {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.icon-button[data-active=\"true\"]:hover:not(:disabled) {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.icon-button:focus-visible {\n  outline: 0;\n  box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.icon-button:disabled {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.icon-button--compact {\n  width: var(--control-height-small);\n  height: var(--control-height-small);\n  border-radius: var(--radius-4);\n}\n\n.icon-button--large {\n  width: var(--control-height-xlarge);\n  height: var(--control-height-xlarge);\n}\n\n.icon-button--large svg {\n  width: var(--icon-size-large);\n  height: var(--icon-size-large);\n}\n";
 const toggleButtonStyles = ".toggle-button {\n  appearance: none;\n  background: var(--surface-control);\n  border: 0;\n  color: var(--text-primary);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--control-height-large);\n  height: var(--control-height-large);\n  padding: 0;\n  border-radius: var(--radius-control);\n  font: inherit;\n  font-size: var(--font-size-base);\n  font-weight: 650;\n  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;\n}\n\n.toggle-button svg {\n  stroke-width: var(--icon-stroke-width);\n}\n\n.toggle-button--primary {\n  background: var(--accent);\n  color: #ffffff;\n}\n\n.toggle-button--secondary {\n  background: var(--surface-control);\n}\n\n.toggle-button--quiet {\n  background: transparent;\n  color: var(--text-primary);\n}\n\n.toggle-button--danger {\n  background: var(--danger-surface);\n  color: var(--danger-text);\n}\n\n.toggle-button--disabled {\n  background: var(--surface-control);\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.toggle-button:hover:not(:disabled) {\n  background: var(--surface-well);\n}\n\n.toggle-button--primary:hover:not(:disabled) {\n  background: var(--accent);\n}\n\n.toggle-button[data-pressed] {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.toggle-button[data-pressed]:hover:not(:disabled) {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.toggle-button:focus-visible {\n  outline: 0;\n  box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.toggle-button:disabled {\n  background: var(--surface-control);\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.toggle-button--compact {\n  width: 26px;\n  height: 26px;\n  border-radius: var(--radius-4);\n}\n\n.toggle-button--large {\n  width: var(--control-height-xlarge);\n  height: var(--control-height-xlarge);\n}\n\n.toggle-button--large svg {\n  width: var(--icon-size-large);\n  height: var(--icon-size-large);\n}\n";
 const disclosureStyles = ".disclosure__trigger {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--text-secondary);\n  font-family: inherit;\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n  line-height: 1.4;\n  text-align: left;\n  cursor: pointer;\n}\n\n.disclosure__trigger:hover {\n  color: var(--text-primary);\n}\n\n.disclosure__trigger:hover .disclosure__chevron {\n  color: var(--text-primary);\n}\n\n.disclosure__trigger:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n  border-radius: var(--radius-4);\n}\n\n.disclosure__label {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.disclosure__chevron {\n  flex: none;\n  color: var(--text-muted);\n  transition: transform 120ms ease;\n}\n\n.disclosure__trigger[data-panel-open] .disclosure__chevron {\n  transform: rotate(180deg);\n}\n\n.disclosure__panel {\n  min-width: 0;\n}\n";
-const statusCalloutStyles = ".status-callout {\n  padding: 12px 14px;\n  background: var(--surface-control);\n  border: 0;\n  border-radius: 12px;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  line-height: 1.4;\n}\n\n.status-callout--warning {\n  background: var(--warning-surface);\n  color: var(--warning-text);\n}\n\n.status-callout--accent {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.status-callout--danger {\n  background: var(--danger-surface);\n  color: var(--danger-text);\n}\n";
+const statusCalloutStyles = ".status-callout {\n  padding: var(--space-8) var(--space-12);\n  background: var(--surface-control);\n  border: 0;\n  border-radius: var(--radius-8);\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  line-height: 1.4;\n}\n\n.status-callout--warning {\n  background: var(--warning-surface);\n  color: var(--warning-text);\n}\n\n.status-callout--accent {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.status-callout--danger {\n  background: var(--danger-surface);\n  color: var(--danger-text);\n}\n";
 const colorSwatchStyles = ".color-swatch {\n  display: inline-block;\n  flex-shrink: 0;\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n  background: var(--swatch-color);\n  border-radius: calc(var(--radius-control) - 4px);\n  border: 1px solid #fff;\n  box-shadow: 0 0 0 1px var(--border-medium);\n}\n";
-const popoverListboxStyles = ".popover-listbox {\n  position: relative;\n  width: 100%;\n}\n\n.popover-listbox__positioner {\n  z-index: 20;\n  pointer-events: auto;\n}\n\n.popover-listbox__popup {\n  box-sizing: border-box;\n  width: min(420px, max(var(--anchor-width, 0px), 260px));\n  min-width: 0;\n  max-width: calc(100vw - 24px);\n  max-height: min(320px, calc(100dvh - 24px), var(--available-height, 100dvh));\n  overflow-x: hidden;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  pointer-events: auto;\n  background: var(--surface-raised-2x);\n  border-radius: var(--radius-8);\n  box-shadow: var(--shadow-popup);\n}\n\n.popover-listbox__popup--searchable {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.popover-listbox__search-input {\n  box-sizing: border-box;\n  flex: 0 0 auto;\n  width: 100%;\n  min-height: 32px;\n  padding: var(--space-12) var(--space-16);\n  border: none;\n  border-bottom: 1px solid var(--border-subtle);\n  background: transparent;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  outline: 0;\n}\n\n.popover-listbox__search-input::placeholder {\n  color: var(--text-muted);\n  opacity: 1;\n}\n\n.popover-listbox__search-input:focus {\n  border-color: var(--border-strong);\n}\n\n.popover-listbox__empty {\n  padding: var(--space-12) var(--space-16);\n  color: var(--text-muted);\n  font-size: var(--font-size-base);\n}\n\n.popover-listbox__empty:empty {\n  padding: 0;\n}\n\n.popover-listbox__list {\n  min-width: 0;\n  padding: var(--space-4);\n}\n\n.popover-listbox__list--searchable {\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n\n.popover-listbox__item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  min-height: 34px;\n  padding: 6px 9px;\n  border-radius: var(--radius-4);\n  color: var(--text-primary);\n  cursor: pointer;\n  font-size: var(--font-size-base);\n}\n\n.popover-listbox__item[data-highlighted] {\n  background: var(--surface-control);\n}\n\n.popover-listbox__leading {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n.popover-listbox__label {\n  min-width: 0;\n  flex: 1 1 auto;\n  overflow: hidden;\n  color: var(--text-primary);\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.popover-listbox__trailing {\n  min-width: 0;\n  max-width: 45%;\n  flex: 0 1 auto;\n  overflow: hidden;\n  color: var(--text-muted);\n  font-size: var(--font-size-base);\n  text-align: right;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
+const popoverListboxStyles = ".popover-listbox {\n  position: relative;\n  width: 100%;\n}\n\n.popover-listbox__positioner {\n  z-index: 20;\n  pointer-events: auto;\n}\n\n.popover-listbox__popup {\n  box-sizing: border-box;\n  width: min(420px, max(var(--anchor-width, 0px), 260px));\n  min-width: 0;\n  max-width: calc(100vw - 24px);\n  max-height: min(320px, calc(100dvh - 24px), var(--available-height, 100dvh));\n  overflow-x: hidden;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  pointer-events: auto;\n  background: var(--surface-raised-2x);\n  border-radius: var(--radius-8);\n  box-shadow: var(--shadow-popup);\n}\n\n.popover-listbox__popup--searchable {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.popover-listbox__search-input {\n  box-sizing: border-box;\n  flex: 0 0 auto;\n  width: 100%;\n  min-height: 32px;\n  padding: var(--space-12) var(--space-16);\n  border: none;\n  border-bottom: 1px solid var(--border-subtle);\n  background: transparent;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  outline: 0;\n}\n\n.popover-listbox__search-input::placeholder {\n  color: var(--text-muted);\n  opacity: 1;\n}\n\n.popover-listbox__search-input:focus {\n  border-color: var(--border-strong);\n}\n\n.popover-listbox__empty {\n  padding: var(--space-12) var(--space-16);\n  color: var(--text-muted);\n  font-size: var(--font-size-base);\n}\n\n.popover-listbox__empty:empty {\n  padding: 0;\n}\n\n.popover-listbox__list {\n  min-width: 0;\n  padding: var(--space-4);\n}\n\n.popover-listbox__list--searchable {\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n\n.popover-listbox__item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  min-height: 34px;\n  padding: var(--space-8) 9px;\n  border-radius: var(--radius-4);\n  color: var(--text-primary);\n  cursor: pointer;\n  font-size: var(--font-size-base);\n}\n\n.popover-listbox__item[data-highlighted] {\n  background: var(--surface-control);\n}\n\n.popover-listbox__leading {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n.popover-listbox__label {\n  min-width: 0;\n  flex: 1 1 auto;\n  overflow: hidden;\n  color: var(--text-primary);\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.popover-listbox__trailing {\n  min-width: 0;\n  max-width: 45%;\n  flex: 0 1 auto;\n  overflow: hidden;\n  color: var(--text-muted);\n  font-size: var(--font-size-base);\n  text-align: right;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
+const menuScrollbarStyles = ":is(.select__popup, .select__list--searchable, .popover-listbox__popup, .popover-listbox__list--searchable, .settings__body, .settings__nav, .settings__content) {\n  scrollbar-width: thin;\n  scrollbar-color: var(--border-strong) transparent;\n}\n\n:is(.select__popup, .select__list--searchable, .popover-listbox__popup, .popover-listbox__list--searchable, .settings__body, .settings__nav, .settings__content)::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n\n:is(.select__popup, .select__list--searchable, .popover-listbox__popup, .popover-listbox__list--searchable, .settings__body, .settings__nav, .settings__content)::-webkit-scrollbar-track,\n:is(.select__popup, .select__list--searchable, .popover-listbox__popup, .popover-listbox__list--searchable, .settings__body, .settings__nav, .settings__content)::-webkit-scrollbar-corner {\n  background: transparent;\n}\n\n:is(.select__popup, .select__list--searchable, .popover-listbox__popup, .popover-listbox__list--searchable, .settings__body, .settings__nav, .settings__content)::-webkit-scrollbar-thumb {\n  background: var(--border-strong);\n  border-radius: var(--radius-4);\n}\n";
 const inspectorPopoverStyles = ".inspector-popover__positioner {\n  z-index: 30;\n  pointer-events: auto;\n}\n\n.inspector-popover__popup {\n  box-sizing: border-box;\n  width: min(280px, calc(100vw - 24px));\n  max-height: min(420px, calc(100dvh - 24px));\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding: var(--space-4);\n  background: var(--surface-raised-2x);\n  border-radius: var(--radius-8);\n  box-shadow: var(--shadow-popup);\n  pointer-events: auto;\n}\n";
-const sideValuesFieldStyles = ".side-values {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.side-values__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.side-values__label {\n  min-width: 0;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  line-height: 1.25;\n}\n\n.side-values__linked {\n  min-width: 0;\n}\n\n.side-values__value-row {\n  display: grid;\n  min-width: 0;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 6px;\n}\n\n.side-values[data-expanded=\"true\"] .side-values__value-row {\n  align-items: start;\n}\n\n.side-values__linked-row {\n  grid-template-columns: auto minmax(0, 1fr) auto;\n}\n\n.side-values__linked-row--no-label {\n  grid-template-columns: minmax(0, 1fr) auto;\n}\n\n.side-values__linked-row .side-values__label {\n  white-space: nowrap;\n}\n\n.side-values__pairs {\n  display: grid;\n  min-width: 0;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 6px;\n}\n\n.side-values__grid {\n  display: grid;\n  min-width: 0;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  grid-template-areas:\n    \"left top\"\n    \"right bottom\";\n  gap: 6px;\n}\n\n.side-values__grid [data-side=\"left\"] {\n  grid-area: left;\n}\n\n.side-values__grid [data-side=\"right\"] {\n  grid-area: right;\n}\n\n.side-values__grid [data-side=\"top\"] {\n  grid-area: top;\n}\n\n.side-values__grid [data-side=\"bottom\"] {\n  grid-area: bottom;\n}\n\n.side-values__grid[data-layout=\"corners\"] {\n  grid-template-areas:\n    \"top-left top-right\"\n    \"bottom-left bottom-right\";\n}\n\n.side-values__grid[data-layout=\"corners\"] [data-side=\"top\"] {\n  grid-area: top-left;\n}\n\n.side-values__grid[data-layout=\"corners\"] [data-side=\"right\"] {\n  grid-area: top-right;\n}\n\n.side-values__grid[data-layout=\"corners\"] [data-side=\"bottom\"] {\n  grid-area: bottom-right;\n}\n\n.side-values__grid[data-layout=\"corners\"] [data-side=\"left\"] {\n  grid-area: bottom-left;\n}\n\n.side-values__side {\n  color: var(--text-muted);\n}\n\n.side-values__icon {\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n  flex: 0 0 var(--icon-size-small);\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  stroke-width: var(--icon-stroke-width);\n}\n\n.side-values__axis-icon {\n  color: var(--text-secondary);\n}\n\n.side-values__side-icon {\n  color: var(--text-secondary);\n}\n\n.side-values__icon-emphasis,\n.side-values__icon-emphasis path {\n  stroke-width: var(--icon-stroke-width);\n}\n\n.side-values__control {\n  display: flex;\n  align-self: stretch;\n  min-width: 0;\n  flex: 1 1 auto;\n}\n";
-const inspectorShellStyles = ":host { --panel-width: min(320px, 100vw); }\n\n.panel {\n  position: fixed;\n  inset: 0 0 0 auto;\n  z-index: 2;\n  width: var(--panel-width);\n  height: 100dvh;\n  overflow: auto;\n  background: var(--surface-panel);\n  color: var(--text-primary);\n  border: 0;\n  border-left: 1px solid var(--border-subtle);\n  border-radius: var(--radius-0);\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n  line-height: 1.35;\n  display: flex;\n  flex-direction: column;\n  pointer-events: auto;\n  scrollbar-color: var(--border-strong) transparent;\n  scrollbar-width: thin;\n}\n\n.panel[data-open=\"false\"] {\n  display: none;\n}\n\n.panel__restore {\n  position: fixed;\n  top: max(12px, env(safe-area-inset-top));\n  right: max(12px, env(safe-area-inset-right));\n  z-index: calc(var(--z-index) + 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--control-height-large) + (var(--space-4) * 2));\n  height: calc(var(--control-height-large) + (var(--space-4) * 2));\n  padding: var(--space-4);\n  border-radius: var(--radius-12);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  pointer-events: auto;\n  animation: panel-restore-in 160ms ease-out;\n}\n\n.panel__restore-button.icon-button {\n  width: 100%;\n  height: 100%;\n}\n\n@keyframes panel-restore-in {\n  from { opacity: 0; transform: translateX(8px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n.scope__warning {\n  color: var(--warning-text);\n  font-weight: 500;\n}\n\n.panel__tabs {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n  padding: var(--space-12) var(--space-24);\n  border-bottom: 1px solid var(--border-subtle);\n}\n\n.panel__header-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-8);\n  width: 100%;\n}\n\n.panel__header-actions,\n.panel__copy-row {\n  display: flex;\n  align-items: center;\n}\n\n.panel__header-actions {\n  min-width: 0;\n  gap: var(--space-4);\n}\n\n.panel__copy-row {\n  gap: var(--space-8);\n}\n\n.panel__header-divider {\n  width: 1px;\n  height: var(--control-height-large);\n  margin: 0 var(--space-4);\n  background: var(--border-subtle);\n}\n\n.panel__copy-row {\n  width: 100%;\n}\n\n.copy-prompt__stack {\n  width: 100%;\n  min-width: 0;\n}\n\n.copy-prompt__main.button {\n  width: 100%;\n  position: relative;\n}\n\n.copy-prompt__agent-listening {\n  position: absolute;\n  top: 50%;\n  right: var(--space-12);\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: rgb(34 197 94);\n  transform: translateY(-50%);\n}\n\n.copy-prompt__hint {\n  margin: var(--space-8) 0 0;\n  color: var(--text-secondary);\n  font-size: var(--font-size-small);\n  line-height: 1.4;\n}\n\n.copy-prompt__hint--centered {\n  text-align: center;\n}\n\n.copy-prompt__hint code {\n  font-family: var(--font-mono);\n}\n\n.copy-prompt__agent-status {\n  margin-top: var(--space-8);\n}\n\n.copy-prompt__agent-status-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-8);\n}\n\n.copy-prompt__agent-status-content > span {\n  min-width: 0;\n}\n\n.copy-prompt__agent-status-content .button--quiet {\n  flex: 0 0 auto;\n  color: inherit;\n}\n\n.copy-prompt__sketch-fallback {\n  display: grid;\n  gap: var(--space-8);\n  margin-top: var(--space-8);\n}\n\n.panel__body {\n  min-height: auto;\n  padding: 0 20px 28px;\n  background: var(--surface-panel);\n  color: var(--text-secondary);\n  overflow: visible;\n  flex: 0 0 auto;\n}\n\n.panel__body:has(.empty-state) {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.panel::-webkit-scrollbar {\n  width: 6px;\n}\n\n.panel::-webkit-scrollbar-thumb {\n  background: var(--border-strong);\n  border-radius: var(--radius-pill);\n}\n\n.selection {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px 0 16px;\n  border-bottom: 1px solid var(--border-subtle);\n}\n\n.selection--without-scope-callout {\n  border-bottom: 0;\n}\n\n.selection__summary {\n  display: grid;\n  gap: 2px;\n}\n\n.selection__count {\n  color: var(--text-primary);\n  font-weight: 600;\n}\n\n.style-state {\n  grid-template-columns: var(--label-column) minmax(0, 1fr);\n  column-gap: 6px;\n}\n\n.scope {\n  margin-top: 6px;\n}\n\n.scope__action {\n  margin-top: 0;\n}\n\n.scope__unlinked,\n.scope__linked {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-8);\n}\n\n.style-editors {\n  margin-top: 0;\n  background: var(--surface-panel);\n  border-top: 0;\n  padding-top: 0;\n}\n\n.component-props__source {\n  color: var(--text-muted-subtle);\n  font-size: 10px;\n  font-weight: 650;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n\n.component-props .field-row__label {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.inline-text-diagnostic {\n  margin-top: 12px;\n  font-weight: 400;\n}\n\n.style-editors__title {\n  color: var(--text-muted);\n  margin-bottom: 8px;\n  font-weight: 600;\n}\n\n.empty-state + .changes {\n  margin-top: auto;\n}\n\n.changes__empty {\n  color: var(--text-muted-subtle);\n}\n\n.editor {\n  margin: 0;\n  padding: var(--space-8) 0;\n  background: var(--surface-panel);\n  border: 0;\n  border-bottom: 1px solid var(--border-subtle);\n  border-radius: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.editor__title {\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n  letter-spacing: -0.02em;\n  min-height: var(--control-height-large);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  text-transform: none;\n}\n\n.editor__title-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.editor__title-row .editor__title {\n  margin-bottom: 0;\n}\n";
-const inspectorOverlayStyles = ".hover-outline,\n.selected-outline {\n  position: fixed;\n  pointer-events: none;\n  outline-offset: -2px;\n}\n\n.measurement-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 0;\n  overflow: visible;\n  pointer-events: none;\n}\n\n.alignment-guide {\n  stroke: rgb(59 130 246 / 46%);\n  stroke-dasharray: 3 4;\n  stroke-width: 1;\n  vector-effect: non-scaling-stroke;\n}\n\n.measurement-ruler {\n  stroke: #ef4444;\n  stroke-width: 1;\n  vector-effect: non-scaling-stroke;\n}\n\n.measurement-projection {\n  stroke: #ef4444;\n  stroke-dasharray: 4 4;\n  stroke-width: 1;\n  vector-effect: non-scaling-stroke;\n}\n\n.measurement-label {\n  fill: #fff;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.measurement-label-chip {\n  fill: #ef4444;\n}\n\n.dom-drop-line {\n  z-index: 4;\n  height: 3px;\n  margin-top: -1px;\n  border-radius: 999px;\n  background: #3b82f6;\n  box-shadow: 0 0 0 1px rgb(255 255 255 / 80%);\n}\n\n.dom-drop-target {\n  z-index: 3;\n  box-sizing: border-box;\n  border: 1px solid rgb(59 130 246 / 72%);\n  border-radius: 4px;\n  background: rgb(59 130 246 / 5%);\n}\n\n.hover-outline {\n  outline: 2px solid var(--accent);\n}\n\n.selected-outline {\n  outline: 2px solid var(--accent);\n}\n\n.hover-margin-fill {\n  background: rgb(59 130 246 / 14%);\n}\n\n.hover-margin {\n  border-color: rgb(59 130 246 / 52%);\n  border-style: dotted;\n  border-width: 0;\n  opacity: 0.72;\n}\n\n.hover-margin[data-axis=\"horizontal\"] {\n  border-top-width: 1px;\n}\n\n.hover-margin[data-axis=\"vertical\"] {\n  border-left-width: 1px;\n}\n\n.dom-navigator,\n.dom-navigator-preview {\n  position: fixed;\n  pointer-events: none;\n}\n\n.dom-navigator {\n  z-index: 2147483647;\n  pointer-events: auto;\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n}\n\n.dom-navigator__trigger,\n.dom-navigator__item {\n  appearance: none;\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  border: 1px solid var(--border-strong);\n  color: var(--text-primary);\n  cursor: pointer;\n  font: inherit;\n  white-space: nowrap;\n}\n\n.dom-navigator__trigger {\n  min-height: var(--control-height-small);\n  padding: 0 var(--space-8);\n  border-radius: var(--radius-4);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n}\n\n.dom-navigator__menu {\n  display: grid;\n  min-width: 140px;\n  margin-top: var(--space-4);\n  padding: var(--space-4);\n  gap: var(--space-2);\n  border: 1px solid var(--border-strong);\n  border-radius: var(--radius-4);\n  background: var(--surface-panel);\n  box-shadow: var(--shadow-popup);\n}\n\n.dom-navigator__item {\n  width: 100%;\n  min-height: var(--control-height-small);\n  padding: 0 var(--space-8);\n  border-color: transparent;\n  background: transparent;\n  text-align: left;\n}\n\n.dom-navigator__trigger:hover,\n.dom-navigator__item:hover,\n.dom-navigator__trigger:focus-visible,\n.dom-navigator__item:focus-visible {\n  background: var(--surface-control-hover);\n  outline: 0;\n}\n\n.dom-navigator-preview {\n  z-index: 2147483646;\n  outline: 2px solid var(--accent);\n  outline-offset: -2px;\n}\n";
-const emptyStateStyles = ".empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-40) var(--space-0) var(--space-24);\n  min-height: 70dvh;\n  text-align: center;\n  color: var(--text-secondary);\n}\n\n.empty-state__icon { display: block; width: min(100%, 182px); height: auto; margin-bottom: var(--space-16); }\n.empty-state__title { margin: 0; color: var(--text-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-base); }\n.empty-state__shortcuts { width: 100%; margin-top: var(--space-32); padding-top: var(--space-20); text-align: left; }\n.empty-state__shortcut-list { display: grid; gap: var(--space-8); margin: var(--space-0); padding: var(--space-0); list-style: none; }\n.empty-state__shortcut { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); min-height: var(--control-height-small); color: var(--text-secondary); }\n.empty-state__shortcut-keys { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--text-muted); }\n.empty-state__shortcut-keys kbd { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-height-small); height: var(--control-height-small); padding: var(--space-0) var(--space-8); border-radius: var(--radius-4); background: var(--surface-raised-2x); color: var(--text-primary); font-family: var(--font-family); font-size: var(--font-size-small); box-shadow: var(--shadow-control); }\n.empty-state__shortcut-keys > span { color: var(--text-muted-subtle); font-size: var(--font-size-small); }\n";
-const styleEditorStyles = "/* Shared chrome for style-editor sections. */\n.layout,\n.spacing,\n.typography,\n.border,\n.property,\n.color {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n  background: var(--surface-panel);\n}\n\n.appearance {\n  gap: var(--space-12);\n}\n\n.appearance__fields {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;\n  gap: var(--space-12);\n}\n\n.appearance__field {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.appearance__field-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-8);\n}\n\n.appearance__field-label {\n  min-width: 0;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  line-height: 1.25;\n}\n\n.border-radius-editor__main {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.border-radius-editor--embedded {\n  display: contents;\n}\n\n.border-radius-editor--embedded > .border-radius-editor__main {\n  grid-column: 2;\n}\n\n.border-radius-editor--embedded > .border-radius-editor__toggle {\n  grid-column: 3;\n  align-self: end;\n}\n\n.border-radius__grouped-row {\n  display: grid;\n  min-width: 0;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: stretch;\n  gap: var(--space-8);\n}\n\n.border-radius__grouped-row > .control-surface {\n  min-width: 0;\n}\n\n.border-radius-editor__individuals {\n  grid-column: 1 / span 2;\n  min-width: 0;\n}\n\n.opacity-editor__effective {\n  flex: 0 0 auto;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n}\n";
-const borderEditorStyles = ".border__linked-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.border__linked-control {\n  flex: 1 1 0;\n  min-width: 0;\n}\n\n.border__linked-control--color {\n  flex: 3 1 0;\n}\n\n.border__linked-control--width {\n  flex: 1 1 0;\n}\n\n.border__linked-row > .popover-listbox,\n.border__linked-row > .toggle-button {\n  flex: 0 0 auto;\n}\n\n.border__linked-row > .popover-listbox {\n  width: auto;\n}\n\n.border__expanded {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.border__expanded-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 26px;\n}\n\n.border__side-rows {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.border__side-row {\n  display: grid;\n  min-width: 0;\n  grid-template-columns: auto minmax(0, 3fr) minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 6px;\n}\n\n.border__side-row > .side-values__side-icon {\n  justify-self: center;\n}\n\n.border__side-control {\n  min-width: 0;\n}\n\n.border__side-row > .popover-listbox {\n  flex: 0 0 auto;\n}\n";
+const sideValuesFieldStyles = ".side-values {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.side-values__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.side-values__label {\n  min-width: 0;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  line-height: 1.25;\n}\n\n.side-values__linked {\n  min-width: 0;\n}\n\n.side-values__value-row {\n  display: grid;\n  min-width: 0;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: var(--space-8);\n}\n\n.side-values[data-expanded=\"true\"] .side-values__value-row {\n  align-items: start;\n}\n\n.side-values__linked-row {\n  grid-template-columns: auto minmax(0, 1fr) auto;\n}\n\n.side-values__linked-row--no-label {\n  grid-template-columns: minmax(0, 1fr) auto;\n}\n\n.side-values__linked-row .side-values__label {\n  white-space: nowrap;\n}\n\n.side-values__pairs {\n  display: grid;\n  min-width: 0;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-8);\n}\n\n.side-values__grid {\n  display: grid;\n  min-width: 0;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  grid-template-areas:\n    \"left top\"\n    \"right bottom\";\n  gap: var(--space-8);\n}\n\n.side-values__grid [data-side=\"left\"] {\n  grid-area: left;\n}\n\n.side-values__grid [data-side=\"right\"] {\n  grid-area: right;\n}\n\n.side-values__grid [data-side=\"top\"] {\n  grid-area: top;\n}\n\n.side-values__grid [data-side=\"bottom\"] {\n  grid-area: bottom;\n}\n\n.side-values__grid[data-layout=\"corners\"] {\n  grid-template-areas:\n    \"top-left top-right\"\n    \"bottom-left bottom-right\";\n}\n\n.side-values__grid[data-layout=\"corners\"] [data-side=\"top\"] {\n  grid-area: top-left;\n}\n\n.side-values__grid[data-layout=\"corners\"] [data-side=\"right\"] {\n  grid-area: top-right;\n}\n\n.side-values__grid[data-layout=\"corners\"] [data-side=\"bottom\"] {\n  grid-area: bottom-right;\n}\n\n.side-values__grid[data-layout=\"corners\"] [data-side=\"left\"] {\n  grid-area: bottom-left;\n}\n\n.side-values__side {\n  color: var(--text-muted);\n}\n\n.side-values__icon {\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n  flex: 0 0 var(--icon-size-small);\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  stroke-width: var(--icon-stroke-width);\n}\n\n.side-values__axis-icon {\n  color: var(--text-secondary);\n}\n\n.side-values__side-icon {\n  color: var(--text-secondary);\n}\n\n.side-values__icon-emphasis,\n.side-values__icon-emphasis path {\n  stroke-width: var(--icon-stroke-width);\n}\n\n.side-values__control {\n  display: flex;\n  align-self: stretch;\n  min-width: 0;\n  flex: 1 1 auto;\n}\n";
+const tooltipStyles = ".tooltip__trigger {\n  display: inline-flex;\n}\n\n.tooltip__trigger[data-tooltip-trigger-disabled] > * {\n  pointer-events: none;\n}\n\n.tooltip__positioner {\n  z-index: 35;\n  pointer-events: auto;\n}\n\n.tooltip__popup {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-8);\n  width: max-content;\n  max-width: min(320px, calc(100vw - var(--space-24)));\n  padding: var(--space-4) var(--space-8);\n  border: 0;\n  border-radius: var(--radius-8);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  color: var(--text-primary);\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  line-height: 1.3;\n}\n\n.tooltip__popup[data-open] {\n  animation: tooltip-enter 150ms ease-out;\n}\n\n@keyframes tooltip-enter {\n  from {\n    transform: scale(0.9);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tooltip__popup[data-open] {\n    animation: none;\n  }\n}\n\n.tooltip__content {\n  min-width: 0;\n  position: relative;\n  z-index: 1;\n}\n\n.tooltip__shortcut {\n  flex: 0 0 auto;\n  position: relative;\n  z-index: 1;\n  color: var(--text-secondary);\n  font: inherit;\n  line-height: inherit;\n  white-space: nowrap;\n}\n";
+const inlineStyleWarningStyles = ".inline-style-warning {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: var(--warning, #b45309);\n  color: var(--surface-raised-2x);\n  font-size: 11px;\n  font-weight: 700;\n  line-height: 1;\n  cursor: help;\n}\n\n.inline-style-warning:focus-visible {\n  outline: 0;\n  box-shadow: 0 0 0 2px var(--accent);\n}\n\n.inline-style-warning__symbol {\n  display: block;\n  line-height: 1;\n}\n";
+const inspectorShellStyles = ":host { --panel-width: min(320px, 100vw); }\n\n.panel {\n  position: fixed;\n  inset: 0 0 0 auto;\n  z-index: 2;\n  width: var(--panel-width);\n  height: 100dvh;\n  overflow: auto;\n  background: var(--surface-panel);\n  color: var(--text-primary);\n  border: 0;\n  border-left: 1px solid var(--border-subtle);\n  border-radius: var(--radius-0);\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n  line-height: 1.35;\n  display: flex;\n  flex-direction: column;\n  pointer-events: auto;\n  cursor: default;\n  scrollbar-color: var(--border-strong) transparent;\n  scrollbar-width: thin;\n}\n\n.panel[data-open=\"false\"] {\n  display: none;\n}\n\n.panel__restore {\n  position: fixed;\n  top: max(12px, env(safe-area-inset-top));\n  right: max(12px, env(safe-area-inset-right));\n  z-index: calc(var(--z-index) + 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--control-height-large) + (var(--space-4) * 2));\n  height: calc(var(--control-height-large) + (var(--space-4) * 2));\n  padding: var(--space-4);\n  border-radius: var(--radius-12);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  pointer-events: auto;\n  animation: panel-restore-in 160ms ease-out;\n}\n\n.panel__restore-button.icon-button {\n  width: 100%;\n  height: 100%;\n}\n\n@keyframes panel-restore-in {\n  from { opacity: 0; transform: translateX(8px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n.scope__warning {\n  color: var(--warning-text);\n  font-weight: 500;\n}\n\n.panel__tabs {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n  padding: var(--space-12) var(--space-24);\n  border-bottom: 1px solid var(--border-subtle);\n}\n\n.panel__header-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-8);\n  width: 100%;\n}\n\n.panel__header-actions,\n.panel__copy-row {\n  display: flex;\n  align-items: center;\n}\n\n.panel__header-actions {\n  min-width: 0;\n  gap: var(--space-4);\n}\n\n.panel__copy-row {\n  gap: var(--space-8);\n}\n\n.panel__header-divider {\n  width: 1px;\n  height: var(--control-height-large);\n  margin: 0 var(--space-4);\n  background: var(--border-subtle);\n}\n\n.panel__copy-row {\n  width: 100%;\n}\n\n.copy-prompt__stack {\n  width: 100%;\n  min-width: 0;\n}\n\n.copy-prompt__main.button {\n  width: 100%;\n  position: relative;\n}\n\n.copy-prompt__menu {\n  width: max(var(--anchor-width), 280px);\n  max-width: calc(100vw - 24px);\n}\n\n.copy-prompt__menu-item {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-8);\n  padding: var(--space-8);\n  border-radius: var(--radius-4);\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  line-height: 1.4;\n  cursor: pointer;\n  outline: 0;\n}\n\n.copy-prompt__menu-item[data-highlighted] {\n  background: var(--surface-control);\n}\n\n.copy-prompt__menu-icon {\n  flex: 0 0 auto;\n  color: var(--text-secondary);\n}\n\n.copy-prompt__menu-icon--live {\n  color: var(--accent);\n}\n\n.copy-prompt__menu-content {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: var(--space-4);\n  min-width: 0;\n}\n\n.copy-prompt__menu-title {\n  font-weight: var(--font-weight-base);\n}\n\n.copy-prompt__menu-description {\n  color: var(--text-secondary);\n  overflow-wrap: anywhere;\n}\n\n.copy-prompt__menu-description code {\n  font-family: var(--font-mono);\n}\n\n.agent-status-button {\n  position: relative;\n}\n\n.agent-status-button__avatars {\n  display: inline-flex;\n  align-items: center;\n}\n\n.agent-status-button__avatar {\n  width: 20px;\n  height: 20px;\n  display: block;\n  background: var(--surface-raised-2x);\n  border-radius: 50%;\n  box-shadow: 0 0 0 1px var(--border-subtle);\n  padding: 2px;\n}\n\n.agent-status-button__avatar svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.agent-status-button__avatar + .agent-status-button__avatar {\n  margin-left: calc(var(--space-4) * -1);\n}\n\n.agent-status-button__dot {\n  position: absolute;\n  top: 50%;\n  right: 3px;\n  width: 6px;\n  height: 6px;\n  transform: translateY(-50%);\n  border-radius: 50%;\n  background: var(--text-muted);\n}\n\n.agent-status-button[data-mcp-listening=\"true\"] .agent-status-button__dot {\n  background: var(--success);\n}\n\n.copy-prompt__hint {\n  margin: var(--space-8) 0 0;\n  color: var(--text-secondary);\n  font-size: var(--font-size-small);\n  line-height: 1.4;\n}\n\n.copy-prompt__hint--centered {\n  text-align: center;\n}\n\n.copy-prompt__hint--implemented {\n  font-size: var(--font-size-base);\n}\n\n.copy-prompt__hint-action {\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  cursor: pointer;\n}\n\n.copy-prompt__hint-action:hover {\n  color: var(--text-primary);\n}\n\n.copy-prompt__hint-action:focus-visible {\n  border-radius: var(--radius-4);\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n\n.copy-prompt__hint code {\n  font-family: var(--font-mono);\n}\n\n.copy-prompt__agent-status {\n  margin-top: var(--space-8);\n}\n\n.copy-prompt__agent-status-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-8);\n}\n\n.copy-prompt__agent-status-content > span {\n  min-width: 0;\n}\n\n.copy-prompt__agent-status-content .button--quiet {\n  flex: 0 0 auto;\n  color: inherit;\n}\n\n.copy-prompt__sketch-fallback {\n  display: grid;\n  gap: var(--space-8);\n  margin-top: var(--space-8);\n}\n\n.panel__body {\n  min-height: auto;\n  padding: 0 20px 28px;\n  background: var(--surface-panel);\n  color: var(--text-secondary);\n  overflow: visible;\n  flex: 0 0 auto;\n}\n\n.panel__body:has(.empty-state) {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.panel::-webkit-scrollbar {\n  width: 6px;\n}\n\n.panel::-webkit-scrollbar-thumb {\n  background: var(--border-strong);\n  border-radius: var(--radius-pill);\n}\n\n.selection {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n  padding: 14px 0 16px;\n  border-bottom: 1px solid var(--border-subtle);\n}\n\n.selection--without-scope-callout {\n  border-bottom: 0;\n}\n\n.selection__summary {\n  display: grid;\n  gap: 2px;\n}\n\n.selection__count {\n  color: var(--text-primary);\n  font-weight: 600;\n}\n\n.style-state {\n  grid-template-columns: var(--label-column) minmax(0, 1fr);\n  column-gap: var(--space-8);\n}\n\n.scope {\n  margin-top: var(--space-8);\n}\n\n.scope__action {\n  margin-top: 0;\n}\n\n.scope__unlinked,\n.scope__linked {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-8);\n}\n\n.style-editors {\n  margin-top: 0;\n  background: var(--surface-panel);\n  border-top: 0;\n  padding-top: 0;\n}\n\n.component-props__source {\n  color: var(--text-muted-subtle);\n  font-size: 10px;\n  font-weight: 650;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n\n.component-props .field-row__label {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.inline-text-diagnostic {\n  margin-top: 12px;\n  font-weight: 400;\n}\n\n.style-editors__title {\n  color: var(--text-muted);\n  margin-bottom: 8px;\n  font-weight: 600;\n}\n\n.empty-state + .changes {\n  margin-top: auto;\n}\n\n.changes__empty {\n  color: var(--text-muted-subtle);\n}\n\n.editor {\n  margin: 0;\n  padding: var(--space-8) 0;\n  background: var(--surface-panel);\n  border: 0;\n  border-bottom: 1px solid var(--border-subtle);\n  border-radius: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.editor__title {\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n  letter-spacing: -0.02em;\n  min-height: var(--control-height-large);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  text-transform: none;\n}\n\n.editor__title-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.editor__title-row .editor__title {\n  margin-bottom: 0;\n}\n";
+const inspectorOverlayStyles = ".hover-outline,\n.selected-outline {\n  position: fixed;\n  pointer-events: none;\n  outline-offset: -2px;\n}\n\n.measurement-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 0;\n  overflow: visible;\n  pointer-events: none;\n}\n\n.alignment-guide {\n  stroke: rgb(59 130 246 / 46%);\n  stroke-dasharray: 3 4;\n  stroke-width: 1;\n  vector-effect: non-scaling-stroke;\n}\n\n.measurement-ruler {\n  stroke: #ef4444;\n  stroke-width: 1;\n  vector-effect: non-scaling-stroke;\n}\n\n.measurement-projection {\n  stroke: #ef4444;\n  stroke-dasharray: 4 4;\n  stroke-width: 1;\n  vector-effect: non-scaling-stroke;\n}\n\n.measurement-label {\n  fill: #fff;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.measurement-label-chip {\n  fill: #ef4444;\n}\n\n.dom-drop-line {\n  z-index: 4;\n  height: 3px;\n  margin-top: -1px;\n  border-radius: 999px;\n  background: #3b82f6;\n  box-shadow: 0 0 0 1px rgb(255 255 255 / 80%);\n}\n\n.dom-drop-target {\n  z-index: 3;\n  box-sizing: border-box;\n  border: 1px solid rgb(59 130 246 / 72%);\n  border-radius: 4px;\n  background: rgb(59 130 246 / 5%);\n}\n\n.hover-outline {\n  outline: 2px solid var(--accent);\n}\n\n.selected-outline {\n  outline: 2px solid var(--accent);\n}\n\n.hover-margin-fill {\n  background: rgb(59 130 246 / 14%);\n}\n\n.hover-margin {\n  border-color: rgb(59 130 246 / 52%);\n  border-style: dotted;\n  border-width: 0;\n  opacity: 0.72;\n}\n\n.hover-margin[data-axis=\"horizontal\"] {\n  border-top-width: 1px;\n}\n\n.hover-margin[data-axis=\"vertical\"] {\n  border-left-width: 1px;\n}\n\n.dom-navigator,\n.dom-navigator-preview {\n  position: fixed;\n  pointer-events: none;\n}\n\n.dom-navigator {\n  display: flex;\n  align-items: center;\n  min-height: var(--control-height-small);\n  border-radius: var(--radius-4);\n  background: var(--accent);\n  color: var(--surface-raised-2x);\n  z-index: 2;\n  pointer-events: auto;\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n}\n\n.dom-navigator__trigger,\n.dom-navigator__item {\n  appearance: none;\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  border: 0;\n  color: var(--text-primary);\n  cursor: pointer;\n  font: inherit;\n  white-space: nowrap;\n}\n\n.dom-navigator__trigger {\n  min-height: var(--control-height-small);\n  justify-content: center;\n  width: var(--control-height-small);\n  padding: 0;\n  border-radius: var(--radius-4);\n  background: transparent;\n  color: var(--surface-raised-2x);\n  box-shadow: none;\n}\n\n.dom-navigator__label {\n  padding-right: var(--space-8);\n  white-space: nowrap;\n}\n\n.dom-navigator__positioner {\n  z-index: 2;\n  pointer-events: auto;\n}\n\n.dom-navigator__menu {\n  display: grid;\n  min-width: 140px;\n  padding: var(--space-4);\n  gap: var(--space-4);\n  border: 0;\n  border-radius: var(--radius-8);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n}\n\n.dom-navigator__item {\n  width: 100%;\n  min-height: var(--control-height-small);\n  padding: 0 var(--space-8);\n  border-color: transparent;\n  border-radius: var(--radius-4);\n  background: transparent;\n  text-align: left;\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n}\n\n.dom-navigator__trigger:hover {\n  background: var(--surface-well);\n  color: var(--surface-raised-2x);\n}\n\n.dom-navigator__trigger:focus-visible {\n  background: var(--surface-well);\n  color: var(--surface-raised-2x);\n  outline: 1px solid currentColor;\n  outline-offset: -3px;\n}\n\n.dom-navigator__item:hover,\n.dom-navigator__item:focus-visible {\n  background: var(--surface-well);\n  outline: 0;\n}\n\n.dom-navigator__item--selected {\n  background: var(--accent-surface);\n}\n\n.dom-navigator-preview {\n  z-index: 1;\n  outline: 2px solid var(--accent);\n  outline-offset: -2px;\n}\n";
+const emptyStateStyles = ".empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-40) var(--space-0) var(--space-24);\n  min-height: 70dvh;\n  text-align: center;\n  color: var(--text-secondary);\n}\n\n.empty-state__icon { display: block; width: min(100%, 182px); height: auto; margin-bottom: var(--space-16); }\n.empty-state__title { margin: 0; color: var(--text-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-base); }\n.empty-state--canvas {\n  align-items: stretch;\n  justify-content: flex-start;\n  min-height: 0;\n  padding-top: var(--space-24);\n  text-align: left;\n}\n\n.empty-state__canvas .empty-state__title {\n  margin-bottom: var(--space-24);\n  font-weight: var(--font-weight-label);\n}\n\n.empty-state__canvas p {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-12);\n  margin: 0 0 var(--space-20);\n  line-height: 1.5;\n}\n\n.empty-state__canvas p:last-child { margin-bottom: 0; }\n.empty-state__canvas svg { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }\n.empty-state__live-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 20px;\n  height: 20px;\n  margin-top: 2px;\n  border-radius: var(--radius-4);\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n.empty-state__live-badge svg { width: 12px; height: 12px; margin-top: 0; }\n.empty-state__canvas strong { display: block; color: var(--text-primary); font-weight: var(--font-weight-label); }\n.empty-state__shortcuts { width: 100%; margin-top: var(--space-32); text-align: left; }\n.empty-state__shortcuts .disclosure__panel { padding-top: var(--space-16); }\n.empty-state__shortcut-list { display: grid; gap: var(--space-8); margin: var(--space-0); padding: var(--space-0); list-style: none; }\n.empty-state__shortcut { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); min-height: var(--control-height-small); color: var(--text-secondary); }\n.empty-state__shortcut-keys { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--text-muted); }\n.empty-state__shortcut-keys kbd { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-height-small); height: var(--control-height-small); padding: var(--space-0) var(--space-8); border-radius: var(--radius-4); background: var(--surface-raised-2x); color: var(--text-primary); font-family: var(--font-family); font-size: var(--font-size-small); box-shadow: var(--shadow-control); }\n.empty-state__shortcut-keys > span { color: var(--text-muted-subtle); font-size: var(--font-size-small); }\n";
+const styleEditorStyles = "/* Shared chrome for style-editor sections. */\n.layout,\n.spacing,\n.typography,\n.border,\n.property,\n.color {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n  background: var(--surface-panel);\n}\n\n.appearance {\n  gap: var(--space-12);\n}\n\n.appearance__fields {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;\n  gap: var(--space-8);\n}\n\n.appearance__field {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.appearance__field-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-8);\n}\n\n.appearance__field-label {\n  min-width: 0;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  line-height: 1.25;\n}\n\n.border-radius-editor__main {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.border-radius-editor--embedded {\n  display: contents;\n}\n\n.border-radius-editor--embedded > .border-radius-editor__main {\n  grid-column: 2;\n}\n\n.border-radius-editor--embedded > .border-radius-editor__toggle {\n  grid-column: 3;\n  align-self: end;\n}\n\n.border-radius__grouped-row {\n  display: grid;\n  min-width: 0;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: stretch;\n  gap: var(--space-8);\n}\n\n.border-radius__grouped-row > .control-surface {\n  min-width: 0;\n}\n\n.border-radius-editor__individuals {\n  grid-column: 1 / span 2;\n  min-width: 0;\n}\n\n.opacity-editor__effective {\n  flex: 0 0 auto;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n}\n\n.box-shadow-editor__layers,\n.box-shadow-editor__layer {\n  display: grid;\n  gap: var(--space-8);\n}\n\n.box-shadow-editor__dimensions {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-4);\n}\n\n.box-shadow-editor__layer {\n  grid-template-columns: minmax(0, 1fr) var(--control-height-large);\n  align-items: center;\n}\n\n.box-shadow-editor__layer + .box-shadow-editor__layer {\n  padding-top: var(--space-12);\n  border-top: 1px solid var(--border-subtle);\n}\n\n.box-shadow-editor__remove {\n  grid-column: 2;\n  grid-row: 1;\n}\n\n.box-shadow-editor__color {\n  grid-column: 1;\n}\n\n.box-shadow-editor__dimensions > .control-surface {\n  --control-surface-padding: 2px 4px;\n}\n\n.box-shadow-editor__dimensions .token-field {\n  gap: var(--space-4);\n}\n";
+const backgroundEditorStyles = ".background-editor,\n.background-editor__gradient,\n.background-editor__raw {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n  min-width: 0;\n}\n\n.background-editor__track {\n  position: relative;\n  height: 28px;\n  margin: var(--space-8) 0 var(--space-12);\n  border: 1px solid var(--border-subtle);\n  background-clip: padding-box;\n  border-radius: var(--radius-4);\n  cursor: crosshair;\n  touch-action: none;\n}\n\n.background-editor__stop {\n  position: absolute;\n  top: 19px;\n  width: 16px;\n  height: 20px;\n  padding: 0;\n  transform: translateX(-50%);\n  border: 2px solid var(--surface-raised-2x);\n  border-radius: var(--radius-4);\n  box-shadow: var(--shadow-outline), 0 2px 4px var(--border-medium);\n  outline: none;\n  cursor: grab;\n  touch-action: none;\n}\n\n.background-editor__stop:active { cursor: grabbing; }\n.background-editor__stop:disabled { cursor: default; }\n\n.background-editor__toolbar {\n  display: flex;\n  gap: var(--space-8);\n  align-items: center;\n}\n\n.background-editor__toolbar > .select,\n.background-editor__toolbar > .control-surface {\n  flex: 1;\n  min-width: 0;\n}\n\n.background-editor__stop-row {\n  display: grid;\n  grid-template-columns: 56px minmax(0, 1fr) auto;\n  gap: var(--space-8);\n  align-items: center;\n}\n\n.background-editor__stop-row > .control-surface { min-width: 0; }\n\n.background-editor__hint {\n  font-size: var(--font-size-base);\n  color: var(--text-secondary);\n  line-height: 1.5;\n}\n\n.image-background {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n  min-width: 0;\n}\n\n.image-background__grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-8);\n  align-items: center;\n}\n\n.image-background__tile {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  height: var(--control-height-large);\n  min-height: 0;\n  min-width: 0;\n  gap: var(--space-8);\n  padding: 0;\n  text-align: left;\n}\n\n.image-background__tile:hover:not(:disabled) {\n  background: transparent;\n}\n\n.image-background__thumb {\n  width: var(--control-height-large);\n  height: var(--control-height-large);\n  flex: none;\n  object-fit: cover;\n  border-radius: var(--radius-4);\n  background: var(--surface-well);\n}\n\n.image-background__title {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.background-editor__layer,\n.background-editor__content,\n.background-editor__solid {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n  min-width: 0;\n}\n\n.background-editor__layer + .background-editor__layer {\n  padding-top: var(--space-12);\n  border-top: 1px solid var(--border-subtle);\n}\n\n.background-editor__type-row {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n}\n\n.background-editor__type-row > .segmented-control {\n  flex: 1;\n  min-width: 0;\n}\n\n.background-editor__blend-space {\n  flex: none;\n  width: var(--control-height-large);\n  height: var(--control-height-large);\n}\n\n.background-editor__type-row .segmented-control__button {\n  padding-inline: var(--space-4);\n}\n";
+const borderEditorStyles = ".border__linked-row {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n}\n\n.border__linked-control {\n  flex: 1 1 0;\n  min-width: 0;\n}\n\n.border__linked-control--color {\n  flex: 3 1 0;\n}\n\n.border__linked-control--width {\n  flex: 1 1 0;\n}\n\n.border__linked-row > .popover-listbox,\n.border__linked-row > .toggle-button {\n  flex: 0 0 auto;\n}\n\n.border__linked-row > .popover-listbox {\n  width: auto;\n}\n\n.border__expanded {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.border__expanded-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 26px;\n}\n\n.border__side-rows {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.border__side-row {\n  display: grid;\n  min-width: 0;\n  grid-template-columns: auto minmax(0, 3fr) minmax(0, 1fr) auto;\n  align-items: center;\n  gap: var(--space-8);\n}\n\n.border__side-row > .side-values__side-icon {\n  justify-self: center;\n}\n\n.border__side-control {\n  min-width: 0;\n}\n\n.border__side-row > .popover-listbox {\n  flex: 0 0 auto;\n}\n";
 const typographyStyles = ".typography {\n  gap: var(--space-8);\n}\n\n.typography__field {\n  min-width: 0;\n}\n\n.typography__field-icon {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  color: var(--text-muted);\n}\n\n.typography__field > .select {\n  flex: 1 1 auto;\n}\n\n.typography__metrics {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-8);\n}\n\n.typography__field .token-field__leading svg {\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n}\n\n.typography__field--font-family .token-field__leading svg {\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n}\n\n.typography__alignment {\n  display: grid;\n  grid-template-columns: 1.1fr 1fr;\n  gap: var(--space-8);\n}\n\n.typography__alignment-field {\n  position: relative;\n  min-width: 0;\n}\n";
-const layoutSectionStyles = ".layout__group {\n  margin-top: 4px;\n  padding-top: 10px;\n  border-top: 1px solid var(--border-subtle);\n  background: var(--surface-panel);\n}\n\n.layout__basic {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-12);\n}\n\n.layout__tool-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--control-height-large);\n  gap: var(--space-8);\n  align-items: end;\n}\n\n.layout__tool-row .field-row {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--space-4);\n  min-width: 0;\n  min-height: 0;\n}\n\n\n.layout__tool-row .field-row__control {\n  min-width: 0;\n  width: 100%;\n}\n\n.layout__size {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.layout__size-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;\n  grid-template-areas:\n    \"width height toggle\"\n    \"min-width min-height .\"\n    \"max-width max-height .\"\n    \"aspect-ratio . .\";\n  gap: 6px;\n  align-items: end;\n}\n\n.layout__size[data-expanded=\"false\"] .layout__size-grid {\n  grid-template-areas: \"width height toggle\";\n}\n\n.layout__size-cell {\n  min-width: 0;\n}\n\n.layout__size-cell--width { grid-area: width; }\n.layout__size-cell--height { grid-area: height; }\n.layout__size-cell--toggle { grid-area: toggle; }\n.layout__size-cell--min-width { grid-area: min-width; }\n.layout__size-cell--min-height { grid-area: min-height; }\n.layout__size-cell--max-width { grid-area: max-width; }\n.layout__size-cell--max-height { grid-area: max-height; }\n.layout__size-cell--aspect-ratio { grid-area: aspect-ratio; }\n\n.layout__size-grid .field-row {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--space-4);\n  min-width: 0;\n  min-height: 0;\n}\n\n\n.layout__size-grid .field-row__control,\n.layout__size-grid .token-field {\n  min-width: 0;\n  width: 100%;\n}\n\n.layout__size-grid .layout-combo,\n.layout__aspect-ratio-control {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: 4px;\n  align-items: center;\n}\n\n.layout__size-grid .layout-combo__custom {\n  min-width: 0;\n}\n\n.layout__aspect-ratio-control .text-input {\n  min-width: 0;\n}\n\n\n.layout__grid {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.layout__grid-primary {\n  display: grid;\n  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);\n  gap: 10px;\n  align-items: start;\n}\n\n.layout__grid-picker-column,\n.layout__grid-gap {\n  min-width: 0;\n}\n\n.layout__grid-heading {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 6px;\n}\n\n.layout__grid-gap-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.layout__grid-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.layout__grid-fields .field-row,\n.layout__grid-child .field-row {\n  min-width: 0;\n}\n\n.layout__grid-child {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.layout__grid-child-fields {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  grid-template-areas:\n    \"column row\"\n    \"vertical horizontal\";\n  gap: 6px;\n}\n\n.layout__grid-child-fields .field-row,\n.layout__grid-child-fields .control-surface,\n.layout__grid-child-fields .segmented-control {\n  min-width: 0;\n}\n\n.layout__grid-child-placement--column { grid-area: column; }\n.layout__grid-child-placement--row { grid-area: row; }\n.layout__grid-child-alignment--h { grid-area: horizontal; }\n.layout__grid-child-alignment--v { grid-area: vertical; }\n\n.layout__grid-child-placement .control-surface,\n.layout__grid-child-alignment-control {\n  width: 100%;\n}\n\n.layout__grid-child-placement-icon {\n  flex: 0 0 var(--icon-size-small);\n  color: var(--text-secondary);\n}\n\n.layout__grid-child-align-icon--horizontal {\n  transform: rotate(90deg);\n}\n\n.layout__grid-alignment {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.layout__grid-advanced {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-width: 0;\n}\n\n.inspector-popover__popup:has(> .layout__flex-child-settings),\n.inspector-popover__popup:has(> .layout__grid-advanced) {\n  padding: var(--space-16);\n}\n\n\n.layout__grid-value {\n  min-width: 0;\n}\n\n.layout__flex-toolbar {\n  display: block;\n}\n\n.layout__direction-tools {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto auto;\n  gap: 4px;\n  min-width: 0;\n}\n\n.layout__alignment-grid {\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(3, minmax(0, 1fr));\n  gap: 2px;\n  padding: 5px;\n  overflow: hidden;\n  background: var(--surface-control);\n  border-radius: var(--radius-control);\n  isolation: isolate;\n}\n\n.layout__alignment-button {\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  min-height: 8px;\n  border-radius: 5px;\n}\n\n.layout__alignment-button span {\n  width: 3px;\n  height: 3px;\n  background: var(--text-muted-subtle);\n  border-radius: 50%;\n}\n\n.layout__alignment-button[data-active=\"true\"] span {\n  width: 14px;\n  height: 2px;\n  background: var(--accent);\n  border-radius: var(--radius-pill);\n  box-shadow: 0 -4px 0 var(--accent), 0 4px 0 var(--accent);\n}\n\n.layout__distribution-preview {\n  position: absolute;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  pointer-events: none;\n}\n\n.layout__distribution-preview span {\n  width: 14px;\n  height: 2px;\n  border-radius: var(--radius-pill);\n  background: var(--accent);\n}\n\n/* Match the centers of the 32px controls in the padded 3x3 grid. */\n.layout__alignment-grid[data-direction=\"row\"] .layout__distribution-preview {\n  top: calc((100% - 14px) / 3 + 22px);\n  right: calc((100% - 14px) / 6 - 2px);\n  left: calc((100% - 14px) / 6 - 2px);\n}\n\n.layout__alignment-grid[data-direction=\"row\"][data-align=\"flex-start\"] .layout__distribution-preview {\n  top: 20px;\n}\n\n.layout__alignment-grid[data-direction=\"row\"][data-align=\"flex-end\"] .layout__distribution-preview {\n  top: auto;\n  bottom: calc((100% - 14px) / 3 - 12px);\n}\n\n.layout__alignment-grid[data-direction=\"row\"][data-justify=\"space-around\"] .layout__distribution-preview {\n  right: 20px;\n  left: 20px;\n}\n\n.layout__alignment-grid[data-direction=\"column\"] .layout__distribution-preview {\n  top: 20px;\n  bottom: calc((100% - 14px) / 3 - 12px);\n  left: calc(50% - 7px);\n  flex-direction: column;\n}\n\n.layout__alignment-grid[data-direction=\"column\"][data-align=\"flex-start\"] .layout__distribution-preview {\n  left: calc((100% - 14px) / 6 - 2px);\n}\n\n.layout__alignment-grid[data-direction=\"column\"][data-align=\"flex-end\"] .layout__distribution-preview {\n  right: calc((100% - 14px) / 6 - 2px);\n  left: auto;\n}\n\n.layout__alignment-grid[data-direction=\"column\"][data-justify=\"space-around\"] .layout__distribution-preview {\n  top: 20px;\n  bottom: 20px;\n}\n\n.layout__alignment-grid[data-justify=\"space-around\"] .layout__distribution-preview {\n  justify-content: space-around;\n}\n\n.layout__alignment-grid[data-justify=\"space-evenly\"] .layout__distribution-preview {\n  justify-content: space-evenly;\n}\n\n.layout__flex-lower {\n  display: grid;\n  grid-template-columns: minmax(0, 120px) minmax(0, 1fr);\n  gap: 12px;\n  align-items: start;\n  margin-top: 8px;\n}\n\n.layout__flex-lower .layout__alignment-grid {\n  width: min(100%, 120px);\n  aspect-ratio: 1;\n  grid-template-rows: repeat(3, minmax(0, 1fr));\n  justify-self: start;\n}\n\n.layout__flex-lower .layout__alignment-button {\n  min-height: 0;\n}\n\n.layout__gap-column {\n  min-width: 0;\n}\n\n.layout__gap-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.layout__spacing-primary {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--control-height-large);\n  gap: 5px;\n  align-items: center;\n  min-width: 0;\n}\n\n.layout__spacing-primary .layout-combo {\n  min-width: 0;\n}\n\n.layout__spacing-primary .layout-combo,\n.layout__spacing-primary .text-input {\n  width: 100%;\n}\n\n.layout__distribution-control {\n  width: var(--control-height-large);\n}\n\n.layout__spacing-field {\n  color: var(--text-muted);\n}\n\n.layout__spacing-icon {\n  display: inline-flex;\n  flex: 0 0 var(--icon-size-small);\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n  color: var(--text-secondary);\n}\n\n.layout__spacing-field .layout-combo {\n  flex: 1 1 auto;\n  min-width: 0;\n  width: 100%;\n}\n\n.layout__flex-child-fields {\n  display: grid;\n  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1fr) auto;\n  gap: 5px;\n  align-items: start;\n}\n\n.layout__flex-child-fields > .icon-button {\n  align-self: end;\n  justify-self: end;\n}\n\n.layout__flex-child-fields > .field-row {\n  min-width: 0;\n}\n\n.layout__flex-child-fields .field-row,\n.layout__flex-child-field {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 4px;\n  min-width: 0;\n  min-height: 0;\n}\n\n.layout__flex-child-fields .field-row__label {\n  color: var(--text-secondary);\n}\n\n.layout__flex-child-fields .field-row__control,\n.layout__flex-child-fields .layout-combo {\n  width: 100%;\n  min-width: 0;\n}\n\n.layout__flex-child-settings {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.layout__flex-child-settings-title {\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n}\n\n.layout__flex-child-settings .field-row {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 4px;\n  min-height: 0;\n}\n\n.layout__flex-child-settings .field-row__label {\n  color: var(--text-secondary);\n}\n\n.layout__flex-child-settings .field-row__control,\n.layout__flex-child-settings .layout-combo {\n  width: 100%;\n  min-width: 0;\n}\n";
+const layoutSectionStyles = ".layout__group {\n  margin-top: 4px;\n  padding-top: 10px;\n  border-top: 1px solid var(--border-subtle);\n  background: var(--surface-panel);\n}\n\n.layout__basic {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.layout__tool-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--control-height-large);\n  gap: var(--space-8);\n  align-items: end;\n}\n\n.layout__tool-row .field-row {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--space-4);\n  min-width: 0;\n  min-height: 0;\n}\n\n\n.layout__tool-row .field-row__control {\n  min-width: 0;\n  width: 100%;\n}\n\n.layout__size {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.layout__size-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;\n  grid-template-areas:\n    \"width height toggle\"\n    \"min-width min-height .\"\n    \"max-width max-height .\"\n    \"aspect-ratio . .\";\n  gap: var(--space-8);\n  align-items: end;\n}\n\n.layout__size[data-expanded=\"false\"] .layout__size-grid {\n  grid-template-areas: \"width height toggle\";\n}\n\n.layout__size-cell {\n  min-width: 0;\n}\n\n.layout__size-cell--width { grid-area: width; }\n.layout__size-cell--height { grid-area: height; }\n.layout__size-cell--toggle { grid-area: toggle; }\n.layout__size-cell--min-width { grid-area: min-width; }\n.layout__size-cell--min-height { grid-area: min-height; }\n.layout__size-cell--max-width { grid-area: max-width; }\n.layout__size-cell--max-height { grid-area: max-height; }\n.layout__size-cell--aspect-ratio { grid-area: aspect-ratio; }\n\n.layout__size-grid .field-row {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--space-4);\n  min-width: 0;\n  min-height: 0;\n}\n\n\n.layout__size-grid .field-row__control,\n.layout__size-grid .token-field {\n  min-width: 0;\n  width: 100%;\n}\n\n.layout__size-grid .layout-combo,\n.layout__aspect-ratio-control {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: 4px;\n  align-items: center;\n}\n\n.layout__size-grid .layout-combo__custom {\n  min-width: 0;\n}\n\n.layout__aspect-ratio-control .text-input {\n  min-width: 0;\n}\n\n\n.layout__grid {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.layout__grid-primary {\n  display: grid;\n  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);\n  gap: 10px;\n  align-items: start;\n}\n\n.layout__grid-picker-column,\n.layout__grid-gap {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n  min-width: 0;\n}\n\n.layout__grid-heading {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-8);\n}\n\n.layout__grid-gap-fields {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.layout__grid-fields {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.layout__grid-fields .field-row,\n.layout__grid-child .field-row {\n  min-width: 0;\n}\n\n.layout__grid-child {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.layout__grid-child-fields {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  grid-template-areas:\n    \"column row\"\n    \"vertical horizontal\";\n  gap: var(--space-8);\n}\n\n.layout__grid-child-fields .field-row,\n.layout__grid-child-fields .control-surface,\n.layout__grid-child-fields .segmented-control {\n  min-width: 0;\n}\n\n.layout__grid-child-placement--column { grid-area: column; }\n.layout__grid-child-placement--row { grid-area: row; }\n.layout__grid-child-alignment--h { grid-area: horizontal; }\n.layout__grid-child-alignment--v { grid-area: vertical; }\n\n.layout__grid-child-placement .control-surface,\n.layout__grid-child-alignment-control {\n  width: 100%;\n}\n\n.layout__grid-child-placement-icon {\n  flex: 0 0 var(--icon-size-small);\n  color: var(--text-secondary);\n}\n\n.layout__grid-child-align-icon--horizontal {\n  transform: rotate(90deg);\n}\n\n.layout__grid-alignment {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.layout__grid-advanced {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-width: 0;\n}\n\n.inspector-popover__popup:has(> .layout__flex-child-settings),\n.inspector-popover__popup:has(> .layout__grid-advanced) {\n  padding: var(--space-16);\n}\n\n\n.layout__grid-value {\n  min-width: 0;\n}\n\n.layout__flex-heading,\n.layout__direction-tools {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--control-height-large);\n  gap: var(--space-8);\n  min-width: 0;\n}\n\n.layout__alignment-grid {\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(3, minmax(0, 1fr));\n  gap: 2px;\n  padding: 5px;\n  overflow: hidden;\n  background: var(--surface-control);\n  border-radius: var(--radius-control);\n  isolation: isolate;\n}\n\n.layout__alignment-button {\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  min-height: 8px;\n  border-radius: 5px;\n}\n\n.layout__alignment-button span {\n  width: 3px;\n  height: 3px;\n  background: var(--text-muted-subtle);\n  border-radius: 50%;\n}\n\n.layout__alignment-button[data-active=\"true\"] span {\n  width: 14px;\n  height: 2px;\n  background: var(--accent);\n  border-radius: var(--radius-pill);\n  box-shadow: 0 -4px 0 var(--accent), 0 4px 0 var(--accent);\n}\n\n.layout__distribution-preview {\n  position: absolute;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  pointer-events: none;\n}\n\n.layout__distribution-preview span {\n  width: 14px;\n  height: 2px;\n  border-radius: var(--radius-pill);\n  background: var(--accent);\n}\n\n/* Match the centers of the 32px controls in the padded 3x3 grid. */\n.layout__alignment-grid[data-direction=\"row\"] .layout__distribution-preview {\n  top: calc((100% - 14px) / 3 + 22px);\n  right: calc((100% - 14px) / 6 - 2px);\n  left: calc((100% - 14px) / 6 - 2px);\n}\n\n.layout__alignment-grid[data-direction=\"row\"][data-align=\"flex-start\"] .layout__distribution-preview {\n  top: 20px;\n}\n\n.layout__alignment-grid[data-direction=\"row\"][data-align=\"flex-end\"] .layout__distribution-preview {\n  top: auto;\n  bottom: calc((100% - 14px) / 3 - 12px);\n}\n\n.layout__alignment-grid[data-direction=\"row\"][data-justify=\"space-around\"] .layout__distribution-preview {\n  right: 20px;\n  left: 20px;\n}\n\n.layout__alignment-grid[data-direction=\"column\"] .layout__distribution-preview {\n  top: 20px;\n  bottom: calc((100% - 14px) / 3 - 12px);\n  left: calc(50% - 7px);\n  flex-direction: column;\n}\n\n.layout__alignment-grid[data-direction=\"column\"][data-align=\"flex-start\"] .layout__distribution-preview {\n  left: calc((100% - 14px) / 6 - 2px);\n}\n\n.layout__alignment-grid[data-direction=\"column\"][data-align=\"flex-end\"] .layout__distribution-preview {\n  right: calc((100% - 14px) / 6 - 2px);\n  left: auto;\n}\n\n.layout__alignment-grid[data-direction=\"column\"][data-justify=\"space-around\"] .layout__distribution-preview {\n  top: 20px;\n  bottom: 20px;\n}\n\n.layout__alignment-grid[data-justify=\"space-around\"] .layout__distribution-preview {\n  justify-content: space-around;\n}\n\n.layout__alignment-grid[data-justify=\"space-evenly\"] .layout__distribution-preview {\n  justify-content: space-evenly;\n}\n\n.layout__flex-lower {\n  display: grid;\n  grid-template-columns: minmax(0, 120px) minmax(0, 1fr);\n  gap: var(--space-8);\n  align-items: start;\n  margin-top: 8px;\n}\n\n.layout__flex-lower .layout__alignment-grid {\n  width: min(100%, 120px);\n  aspect-ratio: 1;\n  grid-template-rows: repeat(3, minmax(0, 1fr));\n  justify-self: start;\n}\n\n.layout__flex-lower .layout__alignment-button {\n  min-height: 0;\n}\n\n.layout__gap-column {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n  min-width: 0;\n}\n\n.layout__gap-fields {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.layout__spacing-primary {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--control-height-large);\n  gap: var(--space-8);\n  align-items: center;\n  min-width: 0;\n}\n\n.layout__spacing-primary .layout-combo {\n  min-width: 0;\n}\n\n.layout__spacing-primary .layout-combo,\n.layout__spacing-primary .text-input {\n  width: 100%;\n}\n\n.layout__distribution-control {\n  width: var(--control-height-large);\n}\n\n.layout__spacing-field {\n  color: var(--text-muted);\n}\n\n.layout__spacing-icon {\n  display: inline-flex;\n  flex: 0 0 var(--icon-size-small);\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n  color: var(--text-secondary);\n}\n\n.layout__spacing-field .layout-combo {\n  flex: 1 1 auto;\n  min-width: 0;\n  width: 100%;\n}\n\n.layout__flex-child-fields {\n  display: grid;\n  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1fr) auto;\n  gap: 5px;\n  align-items: start;\n}\n\n.layout__flex-child-fields > .icon-button {\n  align-self: end;\n  justify-self: end;\n}\n\n.layout__flex-child-fields > .field-row {\n  min-width: 0;\n}\n\n.layout__flex-child-fields .field-row,\n.layout__flex-child-field {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 4px;\n  min-width: 0;\n  min-height: 0;\n}\n\n.layout__flex-child-fields .field-row__label {\n  color: var(--text-secondary);\n}\n\n.layout__flex-child-fields .field-row__control,\n.layout__flex-child-fields .layout-combo {\n  width: 100%;\n  min-width: 0;\n}\n\n.layout__flex-child-settings {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.layout__flex-child-settings-title {\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n}\n\n.layout__flex-child-settings .field-row {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 4px;\n  min-height: 0;\n}\n\n.layout__flex-child-settings .field-row__label {\n  color: var(--text-secondary);\n}\n\n.layout__flex-child-settings .field-row__control,\n.layout__flex-child-settings .layout-combo {\n  width: 100%;\n  min-width: 0;\n}\n";
 const gridPickerStyles = ".grid-picker {\n  position: relative;\n  min-width: 0;\n}\n\n.grid-picker__trigger {\n  display: block;\n  width: 100%;\n  padding: 4px;\n  appearance: none;\n  border: none;\n  border-radius: 9px;\n  background: var(--surface-control);\n  color: var(--text-primary);\n  cursor: pointer;\n}\n\n.grid-picker__trigger:hover {\n  border-color: var(--accent);\n  background: var(--surface-control-hover);\n}\n\n.grid-picker__trigger:focus-visible {\n  outline: 0;\n  box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.grid-picker__preview {\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(var(--grid-picker-columns), minmax(0, 1fr));\n  grid-template-rows: repeat(var(--grid-picker-rows), minmax(0, 1fr));\n  gap: 3px;\n  min-height: 88px;\n  padding: 1px;\n}\n\n.grid-picker__preview-cell {\n  min-width: 0;\n  min-height: 0;\n  border: 1px solid var(--border-subtle);\n  border-radius: 4px;\n  background: var(--surface-raised);\n}\n\n.grid-picker__preview-label {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n  letter-spacing: -0.04em;\n  pointer-events: none;\n}\n\n.grid-picker__popover {\n  position: fixed;\n  z-index: 3;\n  top: 0;\n  left: 0;\n  transform: translateX(-50%);\n  visibility: hidden;\n  width: 360px;\n  padding: var(--space-4);\n  border-radius: var(--radius-8);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n}\n\n.grid-picker__cell-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--grid-picker-columns), minmax(24px, 1fr));\n  grid-template-rows: repeat(var(--grid-picker-rows), minmax(24px, 1fr));\n  gap: 4px;\n}\n\n.grid-picker__cell {\n  min-width: 24px;\n  min-height: 24px;\n  padding: 0;\n  appearance: none;\n  border: 0;\n  border-radius: var(--radius-4);\n  background: var(--surface-control);\n  cursor: pointer;\n  transition: background-color 100ms ease, box-shadow 100ms ease;\n}\n\n.grid-picker__cell:hover,\n.grid-picker__cell:focus-visible,\n.grid-picker__cell--active {\n  background: var(--accent-surface);\n  box-shadow: inset 0 0 0 1px var(--accent);\n}\n\n.grid-picker__cell:focus-visible {\n  outline: 0;\n}\n\n.grid-picker__popover-value {\n  margin-top: 9px;\n  color: var(--text-primary);\n  font-size: 13px;\n  font-weight: 700;\n  text-align: center;\n}\n";
 const layoutComboFieldStyles = ".layout-combo {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n}\n\n.layout-combo__custom {\n  display: flex;\n}\n\n.layout-combo > .token-field {\n  width: 100%;\n}\n\n.layout-combo--blocked > .select:disabled,\n.layout-combo--blocked > .text-input:disabled,\n.layout-combo--blocked .layout-combo__custom > .text-input:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\n.layout-combo--blocked > .token-field {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\n.layout-combo-blocked {\n  position: absolute;\n  z-index: 1;\n  top: calc(var(--control-height-large) / 2);\n  right: 8px;\n  transform: translateY(-50%);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: var(--warning, #b45309);\n  color: #fff;\n  font-size: 11px;\n  font-weight: 700;\n  line-height: 1;\n  cursor: help;\n}\n\n.layout-combo-blocked:focus-visible {\n  outline: 0;\n  box-shadow: 0 0 0 2px var(--accent);\n}\n\n.layout-combo-blocked__symbol {\n  display: block;\n  line-height: 1;\n}\n";
-const tokenChipStyles = ".token-chip {\n  position: relative;\n  display: flex;\n  flex: 1;\n  min-width: 0;\n  background: var(--surface-raised-2x);\n  margin-right: -6px;\n  align-self: stretch;\n  padding-left: var(--space-8);\n  border-radius: calc(var(--radius-control) - 2px);\n  overflow: hidden;\n}\n\n.token-chip:has(.token-color-control) {\n  padding-left: 0;\n}\n\n.token-chip > .popover-listbox,\n.token-chip__trigger,\n.token-chip__picker {\n  flex: 1;\n  height: 100%;\n  min-width: 0;\n}\n\n.token-chip--small {\n  flex: 0 1 auto;\n}\n\n.token-chip--small > .popover-listbox {\n  width: auto;\n  flex: 0 1 auto;\n}\n\n.token-chip__trigger {\n  display: block;\n  width: 100%;\n  min-width: 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-control);\n  outline: 0;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n}\n\n.token-chip__trigger:focus-visible {\n  box-shadow: var(--token-chip-focus-ring, inset 0 0 0 2px var(--accent));\n}\n\n.token-chip--small .token-chip__trigger {\n  width: auto;\n}\n\n.token-chip__picker {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  min-width: 0;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n}\n\n.token-chip--small .token-chip__picker {\n  display: inline-flex;\n  width: auto;\n  gap: 3px;\n}\n\n.token-chip__label {\n  min-width: 0;\n  flex: 1;\n  text-align: left;\n}\n\n/* Keep the content inside the existing label box. */\n.token-label {\n  display: block;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.token-label__content {\n  display: block;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: inherit;\n}\n\n.token-chip__picker svg {\n  flex-shrink: 0;\n}\n\n.token-chip__action {\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  right: 2px;\n  display: inline-flex;\n  align-items: center;\n  background: var(--surface-raised-2x);\n  transform: translateY(-50%);\n  opacity: 0;\n}\n\n.token-chip:hover > .token-chip__action,\n.token-chip:focus-within > .token-chip__action {\n  opacity: 1;\n}\n\n.token-chip--small > .token-chip__action {\n  position: relative;\n  top: auto;\n  right: auto;\n  flex: 0 0 auto;\n  margin-left: 2px;\n  transform: none;\n}\n";
-const tokenFieldStyles = ".token-field {\n  display: flex;\n  flex: 1 1 auto;\n  align-self: stretch;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n}\n\n.token-field__leading,\n.token-field__trailing {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  color: var(--text-muted);\n}\n\n.token-field__leading {\n  justify-content: center;\n}\n\n.token-field__leading--nudge {\n  cursor: var(--nudge-drag-cursor, ew-resize);\n  touch-action: none;\n  user-select: none;\n}\n\n.token-field__leading--nudge:hover,\n.token-field__leading--nudge[data-dragging=\"true\"] {\n  color: var(--text-primary);\n}\n\n.token-field__trailing {\n  justify-content: flex-end;\n}\n\n.token-field > .popover-listbox,\n.token-field > .select {\n  flex: 1;\n  min-width: 0;\n}\n\n.token-opacity-input {\n  align-self: stretch;\n  flex: 0 0 44px;\n  width: 44px;\n  min-width: 0;\n  padding: 0 2px 0 8px;\n  border: 0;\n  outline: 0;\n  background: transparent;\n  color: var(--text-muted);\n  font: inherit;\n  text-align: right;\n}\n\n.token-opacity-input:focus {\n  color: var(--text-primary);\n}\n\n.token-color-control {\n  position: relative;\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n\n.token-field--color .token-color-control {\n  align-self: stretch;\n  /* Keep the 28px color slot while centering the 16px swatch in it. */\n  padding: 4px 6px;\n}\n\n.token-field--color {\n  --token-chip-focus-ring: none;\n}\n\n.token-color-control[data-resolved=\"false\"] .color-swatch {\n  background: repeating-conic-gradient(#d8d8d8 0 25%, #ffffff 0 50%) 50% / 8px 8px;\n}\n\n.token-color-control__input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.token-color-control__input:disabled {\n  cursor: not-allowed;\n}\n";
+const tokenChipStyles = ".token-chip {\n  position: relative;\n  display: flex;\n  flex: 1;\n  min-width: 0;\n  background: var(--surface-raised-2x);\n  margin-right: calc(var(--space-8) * -1);\n  align-self: stretch;\n  padding-left: var(--space-8);\n  border-radius: calc(var(--radius-control) - 2px);\n  overflow: hidden;\n}\n\n.token-chip:has(.token-color-control) {\n  padding-left: 0;\n}\n\n.token-chip > .popover-listbox,\n.token-chip__trigger,\n.token-chip__picker {\n  flex: 1;\n  height: 100%;\n  min-width: 0;\n}\n\n.token-chip--small {\n  flex: 0 1 auto;\n}\n\n.token-chip--small > .popover-listbox {\n  width: auto;\n  flex: 0 1 auto;\n}\n\n.token-chip__trigger {\n  display: block;\n  width: 100%;\n  min-width: 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-control);\n  outline: 0;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n}\n\n.token-chip__trigger:focus-visible {\n  box-shadow: var(--token-chip-focus-ring, inset 0 0 0 2px var(--accent));\n}\n\n.token-chip--small .token-chip__trigger {\n  width: auto;\n}\n\n.token-chip__picker {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  width: 100%;\n  min-width: 0;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n}\n\n.token-chip--small .token-chip__picker {\n  display: inline-flex;\n  width: auto;\n  gap: 3px;\n}\n\n.token-chip__label {\n  min-width: 0;\n  flex: 1;\n  text-align: left;\n}\n\n/* Keep the content inside the existing label box. */\n.token-label {\n  display: block;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.token-label__content {\n  display: block;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: inherit;\n}\n\n.token-chip__picker svg {\n  flex-shrink: 0;\n}\n\n.token-chip__action {\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  right: 2px;\n  display: inline-flex;\n  align-items: center;\n  background: var(--surface-raised-2x);\n  transform: translateY(-50%);\n  opacity: 0;\n}\n\n.token-chip:hover > .token-chip__action,\n.token-chip:focus-within > .token-chip__action {\n  opacity: 1;\n}\n\n.token-chip--small > .token-chip__action {\n  position: relative;\n  top: auto;\n  right: auto;\n  flex: 0 0 auto;\n  margin-left: 2px;\n  transform: none;\n}\n";
+const tokenFieldStyles = ".token-field {\n  display: flex;\n  flex: 1 1 auto;\n  align-self: stretch;\n  align-items: center;\n  gap: var(--space-8);\n  min-width: 0;\n}\n\n.token-field__leading,\n.token-field__trailing {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  color: var(--text-muted);\n}\n\n.token-field__leading {\n  justify-content: center;\n}\n\n.token-field__leading--nudge {\n  cursor: var(--nudge-drag-cursor, ew-resize);\n  touch-action: none;\n  user-select: none;\n}\n\n.token-field__leading--nudge:hover,\n.token-field__leading--nudge[data-dragging=\"true\"] {\n  color: var(--text-primary);\n}\n\n.token-field__trailing {\n  justify-content: flex-end;\n}\n\n.token-field--blocked {\n  cursor: not-allowed;\n}\n\n.token-field--blocked > .popover-listbox,\n.token-field--blocked > .token-chip,\n.token-field--blocked > .token-opacity-input {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\n.token-field--blocked .text-input,\n.token-field--blocked .token-chip__trigger,\n.token-field--blocked .token-color-control,\n.token-field--blocked .token-color-control__input {\n  cursor: not-allowed;\n}\n\n.token-field--blocked > .inline-style-warning {\n  margin-inline-start: 2px;\n}\n\n.token-field > .popover-listbox,\n.token-field > .select {\n  flex: 1;\n  min-width: 0;\n}\n\n.token-opacity-input {\n  align-self: stretch;\n  flex: 0 0 44px;\n  width: 44px;\n  min-width: 0;\n  padding: 0 2px 0 var(--space-8);\n  border: 0;\n  outline: 0;\n  background: transparent;\n  color: var(--text-muted);\n  font: inherit;\n  text-align: right;\n}\n\n.token-opacity-input:focus {\n  color: var(--text-primary);\n}\n\n.token-color-control {\n  position: relative;\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n\n.token-field--color .token-color-control {\n  align-self: stretch;\n  /* Keep the 28px color slot while centering the 16px swatch in it. */\n  padding: 4px var(--space-8);\n}\n\n.token-field--color {\n  --token-chip-focus-ring: none;\n}\n\n.token-color-control[data-resolved=\"false\"] .color-swatch {\n  background: repeating-conic-gradient(var(--border-strong) 0 25%, var(--surface-raised-2x) 0 50%) 50% / var(--space-8) var(--space-8);\n}\n\n.token-color-control__input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.token-color-control__input:disabled {\n  cursor: not-allowed;\n}\n";
 const tokenDropdownStyles = ".token-dropdown,\n.token-promote {\n  display: block;\n  min-width: 0;\n}\n";
 const tokensPanelStyles = ".tokens-panel {\n  padding: 14px 0 0;\n}\n\n.tokens-panel__tools {\n  display: block;\n  padding-bottom: 14px;\n  border-bottom: 1px solid var(--border-subtle);\n}\n\n.token-group {\n  border-bottom: 1px solid var(--border-subtle);\n}\n\n.token-group__heading {\n  display: flex;\n  justify-content: space-between;\n  padding: 14px 0 8px;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n}\n\n.token-row {\n  padding: 10px 0 12px;\n  border-top: 1px solid var(--border-subtle);\n}\n\n.token-group__heading + .token-row {\n  border-top: 0;\n}\n\n.token-row__inline {\n  display: grid;\n  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);\n  gap: 8px;\n  align-items: center;\n}\n\n.token-row__name {\n  min-width: 0;\n  color: var(--text-primary);\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n}\n\n.token-variants {\n  margin-top: 8px;\n}\n\n.token-variants__list {\n  margin-top: 7px;\n  padding-left: 10px;\n  border-left: 1px solid var(--border-subtle);\n}\n\n.token-variant {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  gap: 2px 8px;\n  padding: 5px 0;\n  color: var(--text-muted);\n  font-size: 10px;\n}\n\n.token-variant__context {\n  color: var(--text-secondary);\n}\n\n.token-variant > span:last-child {\n  grid-column: 1 / -1;\n  color: var(--text-muted-subtle);\n}\n\n.tokens-panel__empty {\n  padding: 24px 0;\n  color: var(--text-muted);\n  text-align: center;\n}\n";
-const changesLogStyles = ".changes {\n  margin-top: 0;\n  border-top: 0;\n  padding-top: 24px;\n}\n\n.changes .disclosure__trigger {\n  padding: 10px 0;\n  color: var(--text-primary);\n  font-weight: 700;\n}\n\n.changes .disclosure__trigger:hover {\n  color: var(--text-primary);\n}\n\n.changes__count,\n.copy-prompt__change-count {\n  min-width: 20px;\n  padding: 2px 6px;\n  border-radius: var(--radius-pill);\n  background: var(--surface-control);\n  color: var(--text-muted);\n  font-size: 11px;\n  font-weight: 650;\n  line-height: 1.2;\n  text-align: center;\n}\n\n.changes__content {\n  padding-bottom: 4px;\n}\n\n.changes__session-action {\n  display: flex;\n  justify-content: flex-end;\n  padding: 8px 0 20px;\n}\n\n.changes__session-action .button {\n  width: 100%;\n}\n\n.changes__group {\n  margin-bottom: 12px;\n  padding: 12px;\n  background: var(--surface-control);\n  border: 0;\n  border-radius: 12px;\n}\n\n.changes__group-title {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-bottom: 8px;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: 650;\n}\n\n.changes__group-file {\n  color: var(--text-muted);\n  font-weight: 400;\n  word-break: break-all;\n}\n\n.changes__row {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 5px;\n  padding: 4px 0;\n  font-size: var(--font-size-base);\n}\n\n.changes__row + .changes__row {\n  margin-top: 8px;\n  padding-top: 12px;\n  border-top: 1px solid var(--border-subtle);\n}\n\n.changes__prop,\n.changes__before,\n.changes__after {\n  word-break: break-all;\n}\n\n.changes__prop {\n  color: var(--text-primary);\n}\n\n.changes__before,\n.changes__arrow {\n  color: var(--text-muted);\n}\n\n.changes__value {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  width: 100%;\n  line-height: 1.4;\n}\n\n.changes__after {\n  color: var(--accent);\n}\n\n.changes__conflict {\n  color: var(--warning-text);\n  font-size: var(--font-size-base);\n}\n\n.changes__source-site,\n.changes__scope,\n.changes__diagnostic {\n  color: var(--text-muted);\n  font-size: var(--font-size-base);\n}\n\n.changes__diagnostic[data-status=\"overridden\"] {\n  color: var(--warning-text);\n}\n\n.changes__diagnostic[data-status=\"applied\"] {\n  color: var(--accent);\n}\n\n.changes__revert {\n  margin-top: 2px;\n}\n\n.panel__copy[data-copied=\"true\"] {\n  background: #2eaf67;\n  color: #ffffff;\n}\n";
-const promptSettingsStyles = ".prompt-settings__backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 40;\n  background: rgb(0 0 0 / 20%);\n  pointer-events: auto;\n}\n\n.prompt-settings__popup {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 41;\n  width: min(440px, calc(100vw - 32px));\n  max-height: calc(100dvh - 32px);\n  overflow-y: auto;\n  padding: var(--space-20);\n  transform: translate(-50%, -50%);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-16);\n  outline: 0;\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  color: var(--text-primary);\n  pointer-events: auto;\n}\n\n.prompt-settings__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-12);\n}\n\n.prompt-settings__title {\n  margin: 0;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n}\n\n.prompt-settings__close.icon-button {\n  width: var(--control-height-small);\n  height: var(--control-height-small);\n  margin: calc(var(--space-4) * -1);\n}\n\n.prompt-settings__description {\n  margin: var(--space-8) 0 0;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  line-height: 1.45;\n}\n\n.prompt-settings__field {\n  display: grid;\n  margin-top: var(--space-20);\n}\n\n.prompt-settings__textarea {\n  width: 100%;\n  min-height: 136px;\n  padding: var(--space-8) var(--space-12);\n  resize: vertical;\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-control);\n  outline: 0;\n  background: var(--surface-control);\n  color: var(--text-primary);\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  line-height: 1.5;\n}\n\n.prompt-settings__textarea:hover:not(:focus),\n.prompt-settings__textarea:focus-visible {\n  background: var(--surface-control-hover);\n}\n\n.prompt-settings__textarea:focus-visible {\n  border-color: var(--accent);\n  outline: 2px solid var(--accent);\n  outline-offset: -2px;\n}\n\n.prompt-settings__actions {\n  display: flex;\n  justify-content: flex-end;\n  margin-top: var(--space-20);\n}\n";
-const mcpConnectionStyles = ".mcp-connection__backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 40;\n  background: rgb(0 0 0 / 20%);\n  pointer-events: auto;\n}\n\n.mcp-connection__popup {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 41;\n  display: grid;\n  gap: var(--space-16);\n  width: min(560px, calc(100vw - 32px));\n  max-height: calc(100dvh - 32px);\n  overflow-y: auto;\n  padding: var(--space-20);\n  transform: translate(-50%, -50%);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-16);\n  outline: 0;\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  color: var(--text-primary);\n  pointer-events: auto;\n}\n\n.mcp-connection__header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--space-12);\n}\n\n.mcp-connection__title {\n  margin: 0;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n}\n\n.mcp-connection__description,\n.mcp-connection__copy,\n.mcp-connection__error {\n  margin: var(--space-8) 0 0;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  line-height: 1.45;\n}\n\n.mcp-connection__close.icon-button {\n  width: var(--control-height-small);\n  height: var(--control-height-small);\n  margin: calc(var(--space-4) * -1);\n}\n\n.mcp-connection__status {\n  display: grid;\n  gap: var(--space-4);\n}\n\n.mcp-connection__status-label {\n  color: inherit;\n  font-weight: var(--font-weight-label);\n}\n\n.mcp-connection__status-detail {\n  overflow-wrap: anywhere;\n}\n\n.mcp-connection__details .disclosure__trigger {\n  padding: var(--space-4) 0;\n}\n\n.mcp-connection__diagnostics {\n  display: grid;\n  gap: var(--space-8);\n  margin: 0;\n  padding: var(--space-12);\n  border-radius: var(--radius-control);\n  background: var(--surface-control);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n}\n\n.mcp-connection__diagnostic {\n  display: grid;\n  grid-template-columns: 92px minmax(0, 1fr);\n  gap: var(--space-12);\n  align-items: baseline;\n}\n\n.mcp-connection__diagnostic dt {\n  color: var(--text-muted-subtle);\n}\n\n.mcp-connection__diagnostic dd {\n  min-width: 0;\n  margin: 0;\n  overflow-wrap: anywhere;\n  color: var(--text-primary);\n}\n\n.mcp-connection__diagnostic code,\n.mcp-connection__copy code {\n  font-family: var(--font-mono);\n}\n\n.mcp-connection__timeline {\n  display: grid;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.mcp-connection__timeline-step {\n  position: relative;\n  display: grid;\n  grid-template-columns: var(--control-height-small) minmax(0, 1fr);\n  gap: var(--space-12);\n  padding-bottom: var(--space-32);\n}\n\n.mcp-connection__timeline-step:last-child {\n  padding-bottom: 0;\n}\n\n.mcp-connection__timeline-step:not(:last-child)::before {\n  position: absolute;\n  top: var(--control-height-small);\n  bottom: 0;\n  left: calc(var(--control-height-small) / 2 - 0.5px);\n  width: 1px;\n  background: var(--border-subtle);\n  content: \"\";\n}\n\n.mcp-connection__timeline-marker {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--control-height-small);\n  height: var(--control-height-small);\n  border: 1px solid var(--border-medium);\n  border-radius: var(--radius-pill);\n  background: var(--surface-raised-2x);\n  color: var(--text-secondary);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-label);\n}\n\n.mcp-connection__timeline-step--complete .mcp-connection__timeline-marker {\n  border-color: var(--accent);\n  background: var(--accent);\n  color: var(--surface-raised-2x);\n}\n\n.mcp-connection__timeline-content {\n  display: grid;\n  min-width: 0;\n  gap: var(--space-8);\n}\n\n.mcp-connection__section-title {\n  margin: 0;\n  display: flex;\n  min-height: var(--control-height-small);\n  align-items: center;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n}\n\n.mcp-connection__timeline-content .mcp-connection__copy {\n  margin-top: 0;\n}\n\n.mcp-connection__command {\n  max-width: 100%;\n  margin: 0;\n  padding: var(--space-12);\n  overflow-x: auto;\n  border-radius: var(--radius-control);\n  background: var(--surface-control);\n  color: var(--text-primary);\n  font-family: var(--font-mono);\n  font-size: var(--font-size-base);\n  line-height: 1.5;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n\n.mcp-connection__command-actions {\n  display: flex;\n  justify-content: flex-start;\n}\n\n.mcp-connection__error {\n  margin-top: 0;\n  color: var(--danger-text);\n  font-size: var(--font-size-small);\n}\n\n.mcp-connection__actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  gap: var(--space-8);\n  padding-top: var(--space-4);\n}\n\n.mcp-connection__docs {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-4);\n  margin-top: 64px;\n  color: var(--text-secondary);\n  font-size: var(--font-size-small);\n  text-decoration: none;\n}\n\n.mcp-connection__docs:hover,\n.mcp-connection__docs:focus-visible {\n  color: var(--text-primary);\n  text-decoration: underline;\n}\n\n.mcp-connection__docs:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n";
-const settingsStyles = ".settings__backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 40;\n  background: rgb(0 0 0 / 20%);\n  pointer-events: auto;\n}\n\n.settings__popup {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 41;\n  display: flex;\n  flex-direction: column;\n  width: min(760px, calc(100vw - 32px));\n  height: 70dvh;\n  max-height: calc(100dvh - 32px);\n  overflow: hidden;\n  transform: translate(-50%, -50%);\n  border-radius: var(--radius-16);\n  outline: 0;\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  color: var(--text-primary);\n  pointer-events: auto;\n}\n\n.settings__section-description {\n  margin: var(--space-4) 0 0;\n  color: var(--text-secondary);\n  font-size: 14px;\n  font-weight: var(--font-weight-base);\n  line-height: 1.45;\n}\n\n.settings__close.icon-button {\n  position: absolute;\n  top: var(--space-12);\n  right: var(--space-12);\n  z-index: 1;\n  width: var(--control-height-small);\n  height: var(--control-height-small);\n  margin: 0;\n}\n\n.settings__visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.settings__body {\n  display: grid;\n  grid-template-columns: 184px minmax(0, 1fr);\n  min-height: 0;\n  flex: 1 1 auto;\n}\n\n.settings__nav {\n  min-width: 0;\n  padding: var(--space-16) var(--space-8);\n  border-right: 1px solid var(--border-subtle);\n  background: var(--surface-panel);\n}\n\n.settings__nav-label {\n  display: block;\n  padding: 0 var(--space-8) var(--space-8);\n  color: var(--text-muted-subtle);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-label);\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.settings__nav-items {\n  display: grid;\n  gap: var(--space-4);\n}\n\n.settings__nav-item {\n  appearance: none;\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  width: 100%;\n  min-height: var(--control-height-large);\n  padding: var(--space-8);\n  border: 0;\n  border-radius: var(--radius-control);\n  background: transparent;\n  color: var(--text-secondary);\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  line-height: 1.35;\n  text-align: left;\n}\n\n.settings__nav-item:hover,\n.settings__nav-item:focus-visible {\n  background: var(--surface-well);\n  color: var(--text-primary);\n}\n\n.settings__nav-item:focus-visible {\n  outline: 0;\n  box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.settings__nav-item--active {\n  background: var(--surface-well);\n  color: var(--text-primary);\n  font-weight: var(--font-weight-label);\n}\n\n.settings__nav-item > svg {\n  flex: 0 0 auto;\n}\n\n.settings__nav-item-label {\n  min-width: 0;\n}\n\n.settings__content {\n  min-width: 0;\n  overflow-y: auto;\n  padding: var(--space-20);\n}\n\n.settings__section {\n  min-width: 0;\n}\n\n.settings__section-title {\n  margin: 0;\n  color: var(--text-primary);\n  font-size: 14px;\n  font-weight: var(--font-weight-label);\n}\n\n.settings__section > .prompt-settings__field,\n.settings__section > .tokens-panel,\n.settings__section > [data-test=\"mcp-connection-dialog\"] {\n  margin-top: var(--space-20);\n}\n\n.settings__section > [data-test=\"mcp-connection-dialog\"] {\n  min-width: 0;\n  display: grid;\n  gap: var(--space-16);\n}\n\n@media (max-width: 560px) {\n  .settings__body {\n    display: block;\n    overflow-y: auto;\n  }\n\n  .settings__nav {\n    overflow-x: auto;\n    padding: var(--space-8);\n    border-right: 0;\n    border-bottom: 1px solid var(--border-subtle);\n  }\n\n  .settings__nav-label {\n    display: none;\n  }\n\n  .settings__nav-items {\n    display: flex;\n    min-width: max-content;\n  }\n\n  .settings__nav-item {\n    width: auto;\n  }\n\n  .settings__content {\n    overflow: visible;\n  }\n}\n";
-const sketchStyles = ".sketch-layers {\n  display: grid;\n  gap: var(--space-4);\n  width: 100%;\n  margin-top: var(--space-8);\n}\n\n.sketch-layers__item {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-4);\n  min-width: 0;\n}\n\n.sketch-layers__copy {\n  flex: 1 1 auto;\n  position: relative;\n  justify-content: center;\n  min-width: 0;\n  padding-inline: var(--space-12);\n  text-align: center;\n}\n\n.sketch-layers__copy-label {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  gap: var(--space-4);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n}\n\n.sketch-layers__name {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.sketch-layers__thumbnail {\n  position: absolute;\n  top: 50%;\n  left: var(--space-8);\n  width: 32px;\n  height: 32px;\n  margin: 0;\n  border-radius: var(--radius-control);\n  background: var(--surface-panel);\n  box-shadow: var(--shadow-control);\n  object-fit: cover;\n  transform: translateY(-50%) rotate(-7deg);\n}\n\n.sketch-layers__thumbnail--empty {\n  border: 1px solid var(--border-subtle);\n}\n\n.sketch-layers__hint {\n  margin: var(--space-8) 0 0;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  line-height: 1.4;\n}\n\n.sketch-layers__delete {\n  position: absolute;\n  top: var(--space-4);\n  right: var(--space-4);\n  z-index: 1;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 120ms ease;\n}\n\n.sketch-layers__item:hover .sketch-layers__delete,\n.sketch-layers__item:focus-within .sketch-layers__delete {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.sketch-layers__error {\n  flex: 0 0 100%;\n  color: var(--warning-text);\n  font-size: var(--font-size-small);\n  line-height: 1.35;\n}\n\n.sketch__backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 20;\n  background: rgb(8 12 20 / 52%);\n}\n\n.sketch__editor-backdrop {\n  background: transparent;\n  inset: 0 var(--panel-width) 0 0;\n}\n\n.sketch__live-backdrop {\n  background: transparent;\n  inset: 0 var(--panel-width) 0 0;\n  pointer-events: none;\n}\n\n.sketch__live-backdrop[data-inspector-open=\"false\"] {\n  right: 0;\n}\n\n.sketch__popup {\n  position: fixed;\n  inset: 0 var(--panel-width) 0 0;\n  z-index: 21;\n  width: auto;\n  height: 100dvh;\n  max-height: none;\n  overflow: hidden;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: #111827;\n  color: var(--text-primary);\n  box-shadow: none;\n  pointer-events: auto;\n}\n\n.sketch__title {\n  margin: 0 36px 4px 0;\n  color: var(--text-primary);\n  font-size: 17px;\n  font-weight: 700;\n}\n\n.sketch__description {\n  max-width: 620px;\n  margin: 0 0 16px;\n  color: var(--text-secondary);\n  font-size: 13px;\n  line-height: 1.45;\n}\n\n.sketch__sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.sketch__live-popup {\n  overflow: visible;\n  background: transparent;\n  pointer-events: none;\n  /* Let the live controls and CanvasToolbar participate in one layer stack. */\n  z-index: auto;\n}\n\n.sketch__live-popup[data-inspector-open=\"false\"] {\n  right: 0;\n}\n\n.sketch__prompt-panel {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: min(400px, calc(100vw - var(--panel-width) - 32px));\n  padding: var(--space-8);\n  border: 0;\n  border-radius: var(--radius-12);\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-popup);\n  pointer-events: auto;\n}\n\n.sketch__live-note-panel {\n  /* Keep the note editor in the workspace viewport, outside the active frame's\n     scaled and clipped coordinate system. */\n  position: fixed;\n  left: calc((100vw - var(--panel-width)) / 2);\n  bottom: calc(var(--control-height-xlarge) + var(--space-20) + var(--space-8) + var(--space-8));\n  width: min(400px, calc(100vw - var(--panel-width) - var(--space-32)));\n  z-index: calc(var(--z-index) - 1);\n  transform: translateX(-50%);\n}\n\n.sketch__live-popup[data-inspector-open=\"false\"] .sketch__live-note-panel {\n  left: 50%;\n  width: min(400px, calc(100vw - var(--space-32)));\n}\n\n.sketch__saved-note-panel {\n  position: fixed;\n  right: calc(var(--panel-width) + 24px);\n  bottom: 24px;\n  z-index: calc(var(--z-index) - 1);\n}\n\n.sketch__prompt-label {\n  color: var(--text-secondary);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-label);\n}\n\n.sketch__prompt-input {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  min-height: calc(2 * 1.4em + var(--space-16));\n  resize: none;\n  padding: var(--space-8) calc(var(--control-height-small) + var(--space-48)) var(--space-8) var(--space-8);\n  border: 0;\n  border-radius: var(--radius-control);\n  background: transparent;\n  color: var(--text-primary);\n  font: inherit;\n  font-size: var(--font-size-base);\n  line-height: 1.4;\n  outline: 0;\n}\n\n.sketch__prompt-input:focus {\n  box-shadow: none;\n}\n\n.sketch__prompt-input::placeholder {\n  color: var(--text-muted);\n}\n\n.sketch__prompt-footer {\n  position: absolute;\n  inset: auto var(--space-8) var(--space-8);\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  pointer-events: none;\n}\n\n.sketch__prompt-footer .button {\n  pointer-events: auto;\n}\n\n.sketch__prompt-error {\n  min-width: 0;\n  margin-right: auto;\n  max-width: calc(100% - 88px);\n  color: var(--warning-text);\n  font-size: var(--font-size-small);\n  line-height: 1.35;\n  pointer-events: auto;\n}\n\n.sketch__canvas-frame {\n  position: absolute;\n  inset: 0;\n  display: block;\n  max-height: none;\n  overflow: hidden;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: #111827;\n}\n\n.sketch__image-wrap {\n  position: absolute;\n  inset: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n  max-width: none;\n  line-height: 0;\n}\n\n.sketch__image {\n  display: block;\n  width: 100%;\n  height: 100%;\n  max-width: none;\n  max-height: none;\n  object-fit: contain;\n  user-select: none;\n  pointer-events: none;\n}\n\n.sketch__canvas {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  touch-action: none;\n  cursor: crosshair;\n  outline: none;\n  z-index: 1;\n}\n\n.sketch__live-frame {\n  background: transparent;\n  pointer-events: none;\n}\n\n.sketch__canvas:focus-visible {\n  box-shadow: 0 0 0 2px var(--accent);\n}\n\n.sketch__live-canvas {\n  pointer-events: auto;\n  touch-action: pan-y;\n}\n\n.sketch__canvas--move {\n  cursor: grab;\n  touch-action: none;\n}\n\n.sketch__canvas--move:active {\n  cursor: grabbing;\n}\n\n.sketch__canvas--annotate {\n  cursor: crosshair;\n}\n\n.sketch__annotation-editor {\n  position: absolute;\n  z-index: 3;\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  width: 280px;\n  padding: var(--space-4);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-control);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  pointer-events: auto;\n}\n\n.sketch__annotation-editor input {\n  min-width: 0;\n  flex: 1;\n  height: var(--control-height-small);\n  padding: 0 var(--space-8);\n  border: 1px solid var(--border-strong);\n  border-radius: var(--radius-control);\n  background: var(--surface-raised);\n  color: var(--text-primary);\n  font: inherit;\n  font-size: var(--font-size-base);\n  outline: 0;\n}\n\n.sketch__annotation-editor input:focus {\n  border-color: var(--accent);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);\n}\n\n.sketch__annotation-editor input::placeholder {\n  color: var(--text-muted);\n}\n\n.sketch__toolbar,\n.sketch__actions,\n.sketch-change__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n}\n\n.sketch__toolbar {\n  padding: 10px 0;\n}\n\n.sketch__floating-panel {\n  position: absolute;\n  left: 50%;\n  bottom: 20px;\n  z-index: 2;\n  display: grid;\n  gap: 8px;\n  width: max-content;\n  max-width: calc(100% - 32px);\n  max-height: calc(100dvh - 40px);\n  padding: var(--space-4);\n  overflow: auto;\n  border-radius: var(--radius-12);\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-popup);\n  transform: translateX(-50%);\n  animation: sketch-toolbar-enter 300ms ease-out both;\n  pointer-events: auto;\n}\n\n@keyframes sketch-toolbar-enter {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(12px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sketch__floating-panel {\n    animation: none;\n  }\n}\n\n.sketch__floating-panel .sketch__toolbar {\n  padding: 0;\n}\n\n.sketch__floating-panel .button--quiet {\n  background: transparent;\n  color: var(--text-primary);\n}\n\n.sketch__floating-panel .button--quiet:hover:not(:disabled) {\n  background: var(--surface-well);\n  color: var(--text-primary);\n}\n\n.sketch__floating-panel .button--secondary {\n  background: var(--surface-control);\n  color: var(--text-primary);\n}\n\n.sketch__floating-panel .button--secondary:hover:not(:disabled) {\n  background: var(--surface-control-hover);\n  color: var(--text-primary);\n}\n\n.sketch__toolbar-divider {\n  width: 1px;\n  height: var(--control-height-small);\n  margin-inline: var(--space-4);\n  background: var(--border-subtle);\n}\n\n.sketch__field {\n  display: grid;\n  gap: 6px;\n  margin-top: 4px;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: 600;\n}\n\n.sketch__field textarea {\n  width: 100%;\n  resize: vertical;\n  padding: 9px 10px;\n  border: 1px solid var(--border-strong);\n  border-radius: 8px;\n  background: var(--surface-raised);\n  color: var(--text-primary);\n  font: inherit;\n  font-weight: 400;\n  line-height: 1.4;\n}\n\n.sketch__field textarea:focus {\n  border-color: var(--accent);\n  outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);\n}\n\n.sketch__optional {\n  color: var(--text-muted);\n  font-weight: 400;\n}\n\n.sketch__actions {\n  justify-content: flex-end;\n  margin-top: 16px;\n}\n\n.sketch-change {\n  display: grid;\n  gap: 8px;\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid var(--border-subtle);\n}\n\n.sketch-change__title {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  color: var(--text-primary);\n  font-size: 13px;\n  font-weight: 700;\n}\n\n.sketch-change__title span,\n.sketch-change__status {\n  color: var(--text-muted);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.sketch-change__row {\n  display: grid;\n  grid-template-columns: 76px minmax(0, 1fr);\n  gap: 10px;\n  padding: 8px 0;\n  border-top: 1px solid var(--border-subtle);\n}\n\n.sketch-change__thumbnail {\n  width: 76px;\n  height: 58px;\n  object-fit: cover;\n  border: 1px solid var(--border-subtle);\n  border-radius: 6px;\n  background: var(--surface-control);\n}\n\n.sketch-change__thumbnail--empty { display: block; }\n\n.sketch-change__body {\n  display: grid;\n  min-width: 0;\n  gap: 3px;\n}\n\n.sketch-change__heading {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.sketch-change__name,\n.sketch-change__route,\n.sketch-change__description {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sketch-change__name {\n  color: var(--text-primary);\n  font-size: 12px;\n  font-weight: 650;\n}\n\n.sketch-change__route,\n.sketch-change__description,\n.sketch-change__error {\n  color: var(--text-muted);\n  font-size: 11px;\n  line-height: 1.35;\n}\n\n.sketch-change__description {\n  margin: 2px 0;\n  white-space: normal;\n}\n\n.sketch-change__annotations {\n  display: grid;\n  gap: 2px;\n  margin: 2px 0;\n  padding-inline-start: 18px;\n  color: var(--text-secondary);\n  font-size: 11px;\n  line-height: 1.35;\n}\n\n.sketch-change__annotations li::marker {\n  color: var(--accent);\n  font-weight: 700;\n}\n\n.sketch-change__actions {\n  gap: 2px 4px;\n}\n\n.sketch-change__actions .button {\n  padding-inline: 5px;\n  font-size: 11px;\n}\n\n.sketch-change__status[data-status=\"needs-review\"] { color: var(--warning-text); }\n.sketch-change__status[data-status=\"dispatching\"],\n.sketch-change__status[data-status=\"handing-off\"] { color: var(--accent); }\n.sketch-change__error { color: var(--warning-text); }\n";
+const changesLogStyles = ".changes {\n  margin-top: 0;\n  border-top: 0;\n  padding-top: 24px;\n}\n\n.changes .disclosure__trigger {\n  padding: 10px 0;\n  color: var(--text-primary);\n  font-weight: 700;\n}\n\n.changes .disclosure__trigger:hover {\n  color: var(--text-primary);\n}\n\n.changes__count,\n.copy-prompt__change-count {\n  min-width: 20px;\n  padding: 2px var(--space-8);\n  border-radius: var(--radius-pill);\n  background: var(--surface-control);\n  color: var(--text-muted);\n  font-size: 11px;\n  font-weight: 650;\n  line-height: 1.2;\n  text-align: center;\n}\n\n.changes__content {\n  padding-bottom: 4px;\n}\n\n.changes__session-action {\n  display: flex;\n  justify-content: flex-end;\n  padding: 8px 0 20px;\n}\n\n.changes__session-action .button {\n  width: 100%;\n}\n\n.changes__group {\n  margin: 0;\n  padding: 0;\n}\n\n.changes__group + .changes__group {\n  margin-top: var(--space-4);\n  padding-top: var(--space-4);\n  border-top: 1px solid var(--border-subtle);\n}\n\n.changes__row {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  min-height: var(--control-height-small);\n  padding: var(--space-8) 0;\n  font-size: var(--font-size-base);\n}\n\n.changes__row + .changes__row {\n  margin-top: 0;\n  padding-top: var(--space-8);\n  border-top: 1px solid var(--border-subtle);\n}\n\n.changes__target,\n.changes__action {\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.changes__target {\n  color: var(--text-primary);\n  font-weight: var(--font-weight-label);\n}\n\n.changes__action {\n  color: var(--text-secondary);\n}\n\n.changes__metadata {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.changes__prop,\n.changes__before,\n.changes__after {\n  word-break: break-all;\n}\n\n.changes__prop {\n  color: var(--text-primary);\n}\n\n.changes__before,\n.changes__arrow {\n  color: var(--text-muted);\n}\n\n.changes__value {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  width: 100%;\n  line-height: 1.4;\n}\n\n.changes__after {\n  color: var(--accent);\n}\n\n.changes__conflict {\n  color: var(--warning-text);\n  font-size: var(--font-size-base);\n}\n\n.changes__source-site,\n.changes__scope,\n.changes__diagnostic {\n  color: var(--text-muted);\n  font-size: var(--font-size-base);\n}\n\n.changes__diagnostic[data-status=\"overridden\"] {\n  color: var(--warning-text);\n}\n\n.changes__diagnostic[data-status=\"applied\"] {\n  color: var(--accent);\n}\n\n.changes__revert {\n  margin-left: auto;\n}\n\n.panel__copy[data-copied=\"true\"] {\n  background: #2eaf67;\n  color: #ffffff;\n}\n";
+const promptSettingsStyles = ".prompt-settings__backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 40;\n  background: rgb(0 0 0 / 20%);\n  pointer-events: auto;\n}\n\n.prompt-settings__popup {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 41;\n  width: min(440px, calc(100vw - 32px));\n  max-height: calc(100dvh - 32px);\n  overflow-y: auto;\n  padding: var(--space-20);\n  transform: translate(-50%, -50%);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-16);\n  outline: 0;\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  color: var(--text-primary);\n  pointer-events: auto;\n}\n\n.prompt-settings__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-12);\n}\n\n.prompt-settings__title {\n  margin: 0;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n}\n\n.prompt-settings__close.icon-button {\n  width: var(--control-height-small);\n  height: var(--control-height-small);\n  margin: calc(var(--space-4) * -1);\n}\n\n.prompt-settings__description {\n  margin: var(--space-8) 0 0;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  line-height: 1.45;\n}\n\n.prompt-settings__field {\n  display: grid;\n  margin-top: var(--space-20);\n}\n\n.prompt-settings__textarea {\n  width: 100%;\n  min-height: 136px;\n  padding: var(--space-8) var(--space-12);\n  resize: vertical;\n  border: 0;\n  border-radius: var(--radius-control);\n  outline: 0;\n  background: var(--surface-control);\n  color: var(--text-primary);\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  line-height: 1.5;\n}\n\n.prompt-settings__textarea:hover:not(:focus),\n.prompt-settings__textarea:focus-visible {\n  background: var(--surface-control-hover);\n}\n\n.prompt-settings__textarea:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: -2px;\n}\n\n.prompt-settings__actions {\n  display: flex;\n  justify-content: flex-end;\n  margin-top: var(--space-8);\n}\n";
+const mcpConnectionStyles = ".mcp-connection__backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 40;\n  background: rgb(0 0 0 / 20%);\n  pointer-events: auto;\n}\n\n.mcp-connection__popup {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 41;\n  display: grid;\n  gap: var(--space-16);\n  width: min(560px, calc(100vw - 32px));\n  max-height: calc(100dvh - 32px);\n  overflow-y: auto;\n  padding: var(--space-20);\n  transform: translate(-50%, -50%);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-16);\n  outline: 0;\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  color: var(--text-primary);\n  pointer-events: auto;\n}\n\n.mcp-connection__header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--space-12);\n}\n\n.mcp-connection__title {\n  margin: 0;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n}\n\n.mcp-connection__description,\n.mcp-connection__copy,\n.mcp-connection__error {\n  margin: var(--space-8) 0 0;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  line-height: 1.45;\n}\n\n.mcp-connection__close.icon-button {\n  width: var(--control-height-small);\n  height: var(--control-height-small);\n  margin: calc(var(--space-4) * -1);\n}\n\n.mcp-connection__status {\n  display: grid;\n  gap: var(--space-4);\n}\n\n.mcp-connection__status-label {\n  color: inherit;\n  font-weight: var(--font-weight-label);\n}\n\n.mcp-connection__status-detail {\n  overflow-wrap: anywhere;\n}\n\n.mcp-connection__details .disclosure__trigger {\n  padding: var(--space-4) 0;\n}\n\n.mcp-connection__diagnostics {\n  display: grid;\n  gap: var(--space-8);\n  margin: 0;\n  padding: var(--space-12);\n  border-radius: var(--radius-control);\n  background: var(--surface-control);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n}\n\n.mcp-connection__diagnostic {\n  display: grid;\n  grid-template-columns: 92px minmax(0, 1fr);\n  gap: var(--space-12);\n  align-items: baseline;\n}\n\n.mcp-connection__diagnostic dt {\n  color: var(--text-muted-subtle);\n}\n\n.mcp-connection__diagnostic dd {\n  min-width: 0;\n  margin: 0;\n  overflow-wrap: anywhere;\n  color: var(--text-primary);\n}\n\n.mcp-connection__diagnostic code,\n.mcp-connection__copy code {\n  font-family: var(--font-mono);\n}\n\n.mcp-connection__timeline {\n  display: grid;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.mcp-connection__timeline-step {\n  position: relative;\n  display: grid;\n  grid-template-columns: var(--control-height-small) minmax(0, 1fr);\n  gap: var(--space-12);\n  padding-bottom: var(--space-20);\n}\n\n.mcp-connection__timeline-step:last-child {\n  padding-bottom: 0;\n}\n\n.mcp-connection__timeline-step:not(:last-child)::before {\n  position: absolute;\n  top: var(--control-height-small);\n  bottom: 0;\n  left: calc(var(--control-height-small) / 2 - 0.5px);\n  width: 1px;\n  background: var(--border-subtle);\n  content: \"\";\n}\n\n.mcp-connection__timeline-marker {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--control-height-small);\n  height: var(--control-height-small);\n  border: 1px solid var(--border-medium);\n  border-radius: var(--radius-pill);\n  background: var(--surface-raised-2x);\n  color: var(--text-secondary);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-label);\n}\n\n.mcp-connection__timeline-step--complete .mcp-connection__timeline-marker {\n  border-color: var(--accent);\n  background: var(--accent);\n  color: var(--surface-raised-2x);\n}\n\n.mcp-connection__timeline-content {\n  display: grid;\n  min-width: 0;\n  gap: var(--space-8);\n}\n\n.mcp-connection__section-title {\n  margin: 0;\n  display: flex;\n  min-height: var(--control-height-small);\n  align-items: center;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n}\n\n.mcp-connection__timeline-content .mcp-connection__copy {\n  margin-top: 0;\n}\n\n.mcp-connection__command {\n  max-width: 100%;\n  margin: 0;\n  padding: var(--space-12) var(--space-40) var(--space-12) var(--space-12);\n  overflow-x: auto;\n  border-radius: var(--radius-control);\n  background: var(--surface-control);\n  color: var(--text-primary);\n  font-family: var(--font-mono);\n  font-size: var(--font-size-base);\n  line-height: 1.5;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n\n.mcp-connection__command-block {\n  position: relative;\n  min-width: 0;\n}\n\n.mcp-connection__copy-button.icon-button {\n  position: absolute;\n  top: var(--space-8);\n  right: var(--space-8);\n}\n\n.mcp-connection__timeline-content > .mcp-connection__section-title + .mcp-connection__copy {\n  margin-top: var(--space-12);\n}\n\n.mcp-connection__timeline-step:last-child .mcp-connection__timeline-content {\n  gap: 0;\n}\n\n.mcp-connection__timeline-step:last-child .mcp-connection__copy {\n  margin-top: 0;\n}\n\n.mcp-connection__command-block + .mcp-connection__copy {\n  margin-top: var(--space-8);\n}\n\n.mcp-connection__details {\n  margin-top: 48px;\n}\n\n.mcp-connection__details .disclosure__panel {\n  display: grid;\n  gap: var(--space-8);\n}\n\n.mcp-connection__details .disclosure__panel[hidden] {\n  display: none;\n}\n\n.mcp-connection__details .mcp-connection__copy {\n  margin-top: var(--space-8);\n}\n\n.mcp-connection__error {\n  margin-top: 0;\n  color: var(--danger-text);\n  font-size: var(--font-size-small);\n}\n\n.mcp-connection__actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  gap: var(--space-8);\n  padding-top: var(--space-4);\n}\n";
+const settingsStyles = ".settings__backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 40;\n  background: rgb(0 0 0 / 20%);\n  pointer-events: auto;\n}\n\n.settings__popup {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 41;\n  display: flex;\n  flex-direction: column;\n  width: min(760px, calc(100vw - 32px));\n  height: 70dvh;\n  max-height: 600px;\n  overflow: hidden;\n  transform: translate(-50%, -50%);\n  border-radius: var(--radius-16);\n  outline: 0;\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  color: var(--text-primary);\n  pointer-events: auto;\n}\n\n.settings__section-description {\n  margin: var(--space-4) 0 0;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  line-height: 1.45;\n}\n\n.settings__close.icon-button {\n  position: absolute;\n  top: var(--space-12);\n  right: var(--space-12);\n  z-index: 1;\n  width: var(--control-height-small);\n  height: var(--control-height-small);\n  margin: 0;\n}\n\n.settings__visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.settings__body {\n  display: grid;\n  grid-template-columns: 184px minmax(0, 1fr);\n  min-height: 0;\n  flex: 1 1 auto;\n}\n\n.settings__nav {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  padding: var(--space-16) var(--space-8) var(--space-8);\n  background: var(--surface-panel);\n}\n\n.settings__reset-canvas {\n  margin-top: auto;\n}\n\n.settings__nav-label {\n  display: block;\n  padding: 0 var(--space-8) var(--space-8);\n  color: var(--text-muted-subtle);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-label);\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.settings__nav-items {\n  display: grid;\n  gap: var(--space-4);\n}\n\n.settings__nav-item {\n  appearance: none;\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  width: 100%;\n  min-height: var(--control-height-large);\n  padding: var(--space-8);\n  border: 0;\n  border-radius: var(--radius-control);\n  background: transparent;\n  color: var(--text-secondary);\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  line-height: 1.35;\n  text-align: left;\n}\n\n.settings__nav-item:hover,\n.settings__nav-item:focus-visible {\n  background: var(--surface-well);\n  color: var(--text-primary);\n}\n\n.settings__nav-item:focus-visible {\n  outline: 0;\n  box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.settings__nav-item--active {\n  background: var(--surface-well);\n  color: var(--text-primary);\n  font-weight: var(--font-weight-label);\n}\n\n.settings__nav-item > svg {\n  flex: 0 0 auto;\n}\n\n.settings__nav-item-label {\n  min-width: 0;\n}\n\n.settings__content {\n  min-width: 0;\n  overflow-y: auto;\n  padding: var(--space-20);\n}\n\n.settings__section {\n  min-width: 0;\n}\n\n.settings__section-title {\n  margin: 0;\n  color: var(--text-primary);\n  font-size: 14px;\n  font-weight: var(--font-weight-label);\n}\n\n.settings__section > .prompt-settings__field,\n.settings__section > .tokens-panel,\n.settings__section > [data-test=\"mcp-connection-dialog\"] {\n  margin-top: var(--space-20);\n}\n\n.settings__section > [data-test=\"mcp-connection-dialog\"] {\n  min-width: 0;\n  display: grid;\n  gap: var(--space-16);\n}\n\n@media (max-width: 560px) {\n  .settings__body {\n    display: block;\n    overflow-y: auto;\n  }\n\n  .settings__nav {\n    overflow-x: auto;\n    padding: var(--space-8);\n    border-right: 0;\n    border-bottom: 1px solid var(--border-subtle);\n  }\n\n  .settings__nav-label {\n    display: none;\n  }\n\n  .settings__nav-items {\n    display: flex;\n    min-width: max-content;\n  }\n\n  .settings__nav-item {\n    width: auto;\n  }\n\n  .settings__content {\n    overflow: visible;\n  }\n}\n";
+const sketchStyles = ".sketch-layers {\n  display: grid;\n  gap: var(--space-4);\n  width: 100%;\n  margin-top: var(--space-8);\n}\n\n.sketch-layers__item {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-4);\n  min-width: 0;\n}\n\n.sketch-layers__copy {\n  flex: 1 1 auto;\n  position: relative;\n  justify-content: center;\n  min-width: 0;\n  padding-inline: var(--space-12);\n  text-align: center;\n}\n\n.sketch-layers__copy-label {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  gap: var(--space-4);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n}\n\n.sketch-layers__name {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.sketch-layers__thumbnail {\n  position: absolute;\n  top: 50%;\n  left: var(--space-8);\n  width: 32px;\n  height: 32px;\n  margin: 0;\n  border-radius: var(--radius-4);\n  background: var(--surface-panel);\n  box-shadow: var(--shadow-control);\n  object-fit: cover;\n  transform: translateY(-50%) rotate(-7deg);\n}\n\n.sketch-layers__thumbnail--empty {\n  border: 1px solid var(--border-subtle);\n}\n\n.sketch-layers__delete {\n  position: absolute;\n  top: var(--space-4);\n  right: var(--space-4);\n  z-index: 1;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 120ms ease;\n}\n\n.sketch-layers__item:hover .sketch-layers__delete,\n.sketch-layers__item:focus-within .sketch-layers__delete {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.sketch-layers__error {\n  flex: 0 0 100%;\n  color: var(--warning-text);\n  font-size: var(--font-size-small);\n  line-height: 1.35;\n}\n\n.sketch__backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 20;\n  background: rgb(8 12 20 / 52%);\n}\n\n.sketch__editor-backdrop {\n  background: transparent;\n  inset: 0 var(--panel-width) 0 0;\n}\n\n.sketch__live-backdrop {\n  background: transparent;\n  inset: 0 var(--panel-width) 0 0;\n  pointer-events: none;\n}\n\n.sketch__live-backdrop[data-inspector-open=\"false\"] {\n  right: 0;\n}\n\n.sketch__popup {\n  position: fixed;\n  inset: 0 var(--panel-width) 0 0;\n  z-index: 21;\n  width: auto;\n  height: 100dvh;\n  max-height: none;\n  overflow: hidden;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: #111827;\n  color: var(--text-primary);\n  box-shadow: none;\n  pointer-events: auto;\n}\n\n.sketch__title {\n  margin: 0 36px 4px 0;\n  color: var(--text-primary);\n  font-size: 17px;\n  font-weight: 700;\n}\n\n.sketch__description {\n  max-width: 620px;\n  margin: 0 0 16px;\n  color: var(--text-secondary);\n  font-size: 13px;\n  line-height: 1.45;\n}\n\n.sketch__sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.sketch__live-popup {\n  overflow: visible;\n  background: transparent;\n  pointer-events: none;\n  /* Let the live controls and CanvasToolbar participate in one layer stack. */\n  z-index: auto;\n}\n\n.sketch__live-popup[data-inspector-open=\"false\"] {\n  right: 0;\n}\n\n.sketch__prompt-panel {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: min(400px, calc(100vw - var(--panel-width) - 32px));\n  padding: var(--space-8);\n  border: 0;\n  border-radius: var(--radius-12);\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-popup);\n  pointer-events: auto;\n}\n\n.sketch__live-note-panel {\n  /* Keep the note editor in the workspace viewport, outside the active frame's\n     scaled and clipped coordinate system. */\n  position: fixed;\n  left: calc((100vw - var(--panel-width)) / 2);\n  bottom: calc(var(--control-height-xlarge) + var(--space-20) + var(--space-8) + var(--space-8));\n  width: min(400px, calc(100vw - var(--panel-width) - var(--space-32)));\n  z-index: calc(var(--z-index) - 1);\n  transform: translateX(-50%);\n}\n\n.sketch__live-popup[data-inspector-open=\"false\"] .sketch__live-note-panel {\n  left: 50%;\n  width: min(400px, calc(100vw - var(--space-32)));\n}\n\n.sketch__saved-note-panel {\n  position: fixed;\n  right: calc(var(--panel-width) + 24px);\n  bottom: 24px;\n  z-index: calc(var(--z-index) - 1);\n}\n\n.sketch__prompt-label {\n  color: var(--text-secondary);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-label);\n}\n\n.sketch__prompt-input {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  min-height: calc(2 * 1.4em + var(--space-16));\n  resize: none;\n  padding: var(--space-8) calc(var(--control-height-small) + var(--space-48)) var(--space-8) var(--space-8);\n  border: 0;\n  border-radius: var(--radius-control);\n  background: transparent;\n  color: var(--text-primary);\n  font: inherit;\n  font-size: var(--font-size-base);\n  line-height: 1.4;\n  outline: 0;\n}\n\n.sketch__prompt-input:focus {\n  box-shadow: none;\n}\n\n.sketch__prompt-input::placeholder {\n  color: var(--text-muted);\n}\n\n.sketch__prompt-footer {\n  position: absolute;\n  inset: auto var(--space-8) var(--space-8);\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  pointer-events: none;\n}\n\n.sketch__prompt-footer .button {\n  pointer-events: auto;\n}\n\n.sketch__prompt-error {\n  min-width: 0;\n  margin-right: auto;\n  max-width: calc(100% - 88px);\n  color: var(--warning-text);\n  font-size: var(--font-size-small);\n  line-height: 1.35;\n  pointer-events: auto;\n}\n\n.sketch__canvas-frame {\n  position: absolute;\n  inset: 0;\n  display: block;\n  max-height: none;\n  overflow: hidden;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: #111827;\n}\n\n.sketch__image-wrap {\n  position: absolute;\n  inset: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n  max-width: none;\n  line-height: 0;\n}\n\n.sketch__image {\n  display: block;\n  width: 100%;\n  height: 100%;\n  max-width: none;\n  max-height: none;\n  object-fit: contain;\n  user-select: none;\n  pointer-events: none;\n}\n\n.sketch__canvas {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  touch-action: none;\n  cursor: crosshair;\n  outline: none;\n  z-index: 1;\n}\n\n.sketch__live-frame {\n  background: transparent;\n  pointer-events: none;\n}\n\n.sketch__canvas:focus-visible {\n  box-shadow: 0 0 0 2px var(--accent);\n}\n\n.sketch__live-canvas {\n  pointer-events: auto;\n  touch-action: pan-y;\n}\n\n.sketch__canvas--move {\n  cursor: grab;\n  touch-action: none;\n}\n\n.sketch__canvas--move:active {\n  cursor: grabbing;\n}\n\n.sketch__canvas--annotate {\n  cursor: crosshair;\n}\n\n.sketch__annotation-editor {\n  position: absolute;\n  z-index: 3;\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  width: 280px;\n  padding: var(--space-4);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-control);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  pointer-events: auto;\n}\n\n.sketch__annotation-editor input {\n  min-width: 0;\n  flex: 1;\n  height: var(--control-height-small);\n  padding: 0 var(--space-8);\n  border: 1px solid var(--border-strong);\n  border-radius: var(--radius-control);\n  background: var(--surface-raised);\n  color: var(--text-primary);\n  font: inherit;\n  font-size: var(--font-size-base);\n  outline: 0;\n}\n\n.sketch__annotation-editor input:focus {\n  border-color: var(--accent);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);\n}\n\n.sketch__annotation-editor input::placeholder {\n  color: var(--text-muted);\n}\n\n.sketch__toolbar,\n.sketch__actions,\n.sketch-change__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-8);\n}\n\n.sketch__toolbar {\n  padding: 10px 0;\n}\n\n.sketch__floating-panel {\n  position: absolute;\n  left: 50%;\n  bottom: 20px;\n  z-index: 2;\n  display: grid;\n  gap: 8px;\n  width: max-content;\n  max-width: calc(100% - 32px);\n  max-height: calc(100dvh - 40px);\n  padding: var(--space-4);\n  overflow: auto;\n  border-radius: var(--radius-12);\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-popup);\n  transform: translateX(-50%);\n  animation: sketch-toolbar-enter 300ms ease-out both;\n  pointer-events: auto;\n}\n\n@keyframes sketch-toolbar-enter {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(12px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sketch__floating-panel {\n    animation: none;\n  }\n}\n\n.sketch__floating-panel .sketch__toolbar {\n  padding: 0;\n}\n\n.sketch__floating-panel .button--quiet {\n  background: transparent;\n  color: var(--text-primary);\n}\n\n.sketch__floating-panel .button--quiet:hover:not(:disabled) {\n  background: var(--surface-well);\n  color: var(--text-primary);\n}\n\n.sketch__floating-panel .button--secondary {\n  background: var(--surface-control);\n  color: var(--text-primary);\n}\n\n.sketch__floating-panel .button--secondary:hover:not(:disabled) {\n  background: var(--surface-control-hover);\n  color: var(--text-primary);\n}\n\n.sketch__toolbar-divider {\n  width: 1px;\n  height: var(--control-height-small);\n  margin-inline: var(--space-4);\n  background: var(--border-subtle);\n}\n\n.sketch__field {\n  display: grid;\n  gap: var(--space-8);\n  margin-top: 4px;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: 600;\n}\n\n.sketch__field textarea {\n  width: 100%;\n  resize: vertical;\n  padding: 9px 10px;\n  border: 1px solid var(--border-strong);\n  border-radius: 8px;\n  background: var(--surface-raised);\n  color: var(--text-primary);\n  font: inherit;\n  font-weight: 400;\n  line-height: 1.4;\n}\n\n.sketch__field textarea:focus {\n  border-color: var(--accent);\n  outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);\n}\n\n.sketch__optional {\n  color: var(--text-muted);\n  font-weight: 400;\n}\n\n.sketch__actions {\n  justify-content: flex-end;\n  margin-top: 16px;\n}\n\n.sketch-change {\n  display: grid;\n  gap: 8px;\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid var(--border-subtle);\n}\n\n.sketch-change__title {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  color: var(--text-primary);\n  font-size: 13px;\n  font-weight: 700;\n}\n\n.sketch-change__title span,\n.sketch-change__status {\n  color: var(--text-muted);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.sketch-change__row {\n  display: grid;\n  grid-template-columns: 76px minmax(0, 1fr);\n  gap: 10px;\n  padding: 8px 0;\n  border-top: 1px solid var(--border-subtle);\n}\n\n.sketch-change__thumbnail {\n  width: 76px;\n  height: 58px;\n  object-fit: cover;\n  border: 1px solid var(--border-subtle);\n  border-radius: 6px;\n  background: var(--surface-control);\n}\n\n.sketch-change__thumbnail--empty { display: block; }\n\n.sketch-change__body {\n  display: grid;\n  min-width: 0;\n  gap: 3px;\n}\n\n.sketch-change__heading {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.sketch-change__name,\n.sketch-change__route,\n.sketch-change__description {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sketch-change__name {\n  color: var(--text-primary);\n  font-size: 12px;\n  font-weight: 650;\n}\n\n.sketch-change__route,\n.sketch-change__description,\n.sketch-change__error {\n  color: var(--text-muted);\n  font-size: 11px;\n  line-height: 1.35;\n}\n\n.sketch-change__description {\n  margin: 2px 0;\n  white-space: normal;\n}\n\n.sketch-change__annotations {\n  display: grid;\n  gap: 2px;\n  margin: 2px 0;\n  padding-inline-start: 18px;\n  color: var(--text-secondary);\n  font-size: 11px;\n  line-height: 1.35;\n}\n\n.sketch-change__annotations li::marker {\n  color: var(--accent);\n  font-weight: 700;\n}\n\n.sketch-change__actions {\n  gap: 2px 4px;\n}\n\n.sketch-change__actions .button {\n  padding-inline: 5px;\n  font-size: 11px;\n}\n\n.sketch-change__status[data-status=\"needs-review\"] { color: var(--warning-text); }\n.sketch-change__status[data-status=\"dispatching\"],\n.sketch-change__status[data-status=\"handing-off\"] { color: var(--accent); }\n.sketch-change__error { color: var(--warning-text); }\n";
 export const UI_STYLES = [
     DRAG_CURSOR_STYLES,
     foundationStyles,
@@ -49,12 +53,16 @@ export const UI_STYLES = [
     statusCalloutStyles,
     colorSwatchStyles,
     popoverListboxStyles,
+    menuScrollbarStyles,
     inspectorPopoverStyles,
     sideValuesFieldStyles,
+    tooltipStyles,
+    inlineStyleWarningStyles,
     inspectorShellStyles,
     inspectorOverlayStyles,
     emptyStateStyles,
     styleEditorStyles,
+    backgroundEditorStyles,
     borderEditorStyles,
     typographyStyles,
     layoutSectionStyles,

package/dist/inspector/workspace/commands.d.ts

@@ -0,0 +1,9 @@
+import { type CanvasCard } from "../canvas/canvasStore.js";
+export declare function addLinkedFrame(cardId: string): CanvasCard | null;
+export declare function createIteration(cardId: string, position?: {
+    x: number;
+    y: number;
+}): Promise<CanvasCard>;
+export declare function removeFrame(cardId: string, { undoable }?: {
+    undoable?: boolean;
+}): boolean;

package/dist/inspector/workspace/commands.js

@@ -0,0 +1,82 @@
+import { addCanvasIteration, duplicateCard, getCanvasCardLabel, batchCanvasChanges, getCanvasCards, removeCanvasCard, selectCard, } from "../canvas/canvasStore.js";
+import { contentSourceUrl } from "../canvas/frameContent.js";
+import { getRegisteredFrames, projectDraftToDocument, isCanvasProjectionRevisionCurrent, projectToAllReadyCards, } from "../canvas/projection.js";
+import { draftIdForContent, getDraftForCard } from "../drafts/store.js";
+import { createHtmlArtifact, removeHtmlArtifact } from "../iterations/client.js";
+import { captureHtmlIteration } from "../iterations/capture.js";
+import { canEditDraft, forgetDraft, isDraftLocked } from "../changes/draftChanges.js";
+import { discardDraftHistory } from "./timeline.js";
+import { canWriteWorkspace } from "../canvas/workspaceLease.js";
+import { isInlineTextEditingActive } from "../inline-text/inlineTextEditor.js";
+export function addLinkedFrame(cardId) {
+    const draft = getDraftForCard(cardId);
+    if (!draft || draft.target.kind !== "application" || !canEditDraft(draft.id))
+        return null;
+    return batchCanvasChanges(() => {
+        const card = duplicateCard(cardId);
+        if (card)
+            selectCard(card.id);
+        return card;
+    });
+}
+export async function createIteration(cardId, position) {
+    const source = getCanvasCards().find((card) => card.id === cardId);
+    const frame = getRegisteredFrames().get(cardId);
+    const draft = getDraftForCard(cardId);
+    const document = frame?.contentDocument;
+    if (!source || !frame || !document || !draft)
+        throw new Error("The source frame is no longer available.");
+    if (!canEditDraft(draft.id))
+        throw new Error("This workspace is unavailable while saving or open in another tab.");
+    if (isInlineTextEditingActive())
+        throw new Error("Finish editing the text before creating an iteration.");
+    const revision = await projectDraftToDocument(document, draft.contents);
+    if (revision === null)
+        throw new Error("The source preview is still updating. Try again.");
+    try {
+        const html = await captureHtmlIteration(frame);
+        const current = getDraftForCard(cardId);
+        if (current?.id !== draft.id || current.revision !== draft.revision || frame.contentDocument !== document
+            || !isCanvasProjectionRevisionCurrent(document, revision) || !canWriteWorkspace()) {
+            throw new Error("The source changed while capturing. Try again.");
+        }
+        const artifactId = await createHtmlArtifact(frame, contentSourceUrl(source.content), getCanvasCardLabel(source), html);
+        try {
+            if (!canWriteWorkspace() || getDraftForCard(cardId)?.revision !== draft.revision || frame.contentDocument !== document) {
+                throw new Error("The source changed while capturing. Try again.");
+            }
+            return batchCanvasChanges(() => {
+                const iteration = addCanvasIteration(cardId, artifactId, position, !position);
+                if (!iteration)
+                    throw new Error("The source frame is no longer available.");
+                selectCard(iteration.id);
+                return iteration;
+            });
+        }
+        catch (error) {
+            await removeHtmlArtifact(artifactId);
+            throw error;
+        }
+    }
+    finally {
+        projectToAllReadyCards();
+    }
+}
+export function removeFrame(cardId, { undoable = true } = {}) {
+    const card = getCanvasCards().find((candidate) => candidate.id === cardId);
+    if (!card || isDraftLocked() || !canWriteWorkspace())
+        return false;
+    const draftId = draftIdForContent(card.content);
+    batchCanvasChanges(() => {
+        removeCanvasCard(cardId, { undoable });
+        if (undoable)
+            return;
+        if (getCanvasCards().some((candidate) => draftIdForContent(candidate.content) === draftId))
+            return;
+        if (card.content.kind === "iteration")
+            forgetDraft(draftId);
+        else
+            discardDraftHistory(draftId);
+    });
+    return true;
+}

package/dist/inspector/workspace/controller.d.ts

@@ -0,0 +1,4 @@
+export declare function startWorkspaceController(): {
+    restored: boolean;
+    dispose(): void;
+};