.demo-inspector { grid-auto-rows:max-content; }
      /* The shared drag bar assumes the popovers' 16px top padding; the inspector has 12px and an 8px row gap, so it lands at the same 12px above and below the grip. */
      .demo-inspector > .be-popover-drag-bar { margin-top:0; padding-bottom:var(--space-1); }
      .demo-inspector .wa-inspector-title-buttons { display:flex; gap:var(--space-1); flex:none; }
      .demo-inspector .wa-inspector-shortcuts { animation:wa-scrim-fade var(--motion-panel) var(--ease-fluid); background:rgba(0,0,0,.45); border-radius:calc(var(--radius-floating) - 1px); box-sizing:border-box; display:flex; align-items:flex-start; left:0; margin:0; padding:var(--space-3); position:absolute; right:0; z-index:3; }
      @keyframes wa-scrim-fade { from { opacity:0; } to { opacity:1; } }
      .demo-inspector .wa-inspector-shortcuts[hidden] { display:none; }
      .demo-inspector .wa-shortcuts-card { animation:be-surface-enter var(--motion-panel) var(--ease-fluid); background:var(--glass-reflection) var(--surface-popover); border:1px solid var(--border-glass); border-radius:var(--radius-lg); box-shadow:var(--shadow-floating); box-sizing:border-box; display:flex; flex-direction:column; max-height:100%; min-height:0; overflow:hidden; width:100%; }
      .demo-inspector .wa-shortcuts-head { align-items:flex-start; border-bottom:1px solid var(--border-standard); display:flex; flex:none; gap:var(--space-2); justify-content:space-between; padding:var(--space-3) var(--space-2) var(--space-2) var(--space-3); }
      .demo-inspector .wa-shortcuts-eyebrow { color:var(--text-accent); font: 600 var(--text-sm)/1.2 var(--font-mono); letter-spacing:.12em; margin:0 0 var(--space-1); }
      .demo-inspector .wa-shortcuts-head h2 { color:var(--text-primary); font:600 var(--text-sm)/1.3 var(--font-sans); margin:0; }
      .demo-inspector .wa-shortcuts-body { display:grid; gap:var(--space-3); min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:var(--space-3); scrollbar-width:thin; }
      .demo-inspector .wa-shortcuts-body h3 { align-items:center; color:var(--text-secondary); display:flex; font:600 var(--text-xs)/1.3 var(--font-sans); gap:var(--space-2); margin:0 0 var(--space-1); }
      .demo-inspector .wa-shortcuts-icon { background:var(--glass-reflection) var(--surface-elevated); border:1px solid var(--border-standard); border-radius:var(--radius-sm); color:var(--accent); display:grid; height:22px; place-items:center; width:22px; }
      .demo-inspector .wa-shortcuts-icon .be-icon { height:13px; width:13px; }
      .demo-inspector .wa-shortcuts-body dl { display:grid; gap: var(--space-half); margin:0; }
      .demo-inspector .wa-shortcuts-body dl > div { align-items:center; border-radius:var(--radius-sm); display:flex; gap:var(--space-2); justify-content:space-between; min-height:26px; padding: var(--space-half) var(--space-1) var(--space-half) calc(var(--space-6) + var(--space-2)); }
      .demo-inspector .wa-shortcuts-body dl > div:hover { background:var(--surface-hover, var(--surface-elevated)); }
      .demo-inspector .wa-shortcuts-body dt { color:var(--text-primary); font:400 var(--text-xs)/1.4 var(--font-sans); min-width:0; }
      .demo-inspector .wa-shortcuts-body dd { align-items:center; display:flex; flex:none; flex-wrap:wrap; gap: var(--space-1); justify-content:flex-end; margin:0; }
      .demo-inspector .wa-shortcuts-body kbd { background:var(--surface-input); border:1px solid var(--border-strong); border-bottom-width:2px; border-radius:var(--radius-sm); box-sizing:border-box; color:var(--text-primary); font: 600 var(--text-sm)/1.4 var(--font-mono); min-width:22px; padding: 1px var(--space-1); text-align:center; }
      .demo-inspector [data-designer-selection] kbd { background:var(--surface-input); border:1px solid var(--border-strong); border-bottom-width:2px; border-radius:var(--radius-sm); box-sizing:border-box; color:var(--text-primary); font: 600 var(--text-sm)/1.3 var(--font-mono); padding: 0 var(--space-1); }
      .demo-inspector [data-designer-selection] .wa-hint-sep { color:var(--text-muted); }
      .demo-inspector .wa-shortcuts-body .gesture { color:var(--text-muted); font:400 var(--text-xs)/1.4 var(--font-sans); }
      .demo-inspector .wa-shortcuts-body .or { color:var(--text-muted); font: 400 var(--text-sm)/1 var(--font-sans); }
      @media (prefers-reduced-motion: reduce) { .demo-inspector .wa-inspector-shortcuts, .demo-inspector .wa-shortcuts-card { animation:none; } }
      .demo-inspector .wa-inspector-firsttip { align-items:center; background:var(--surface-selected-subtle, var(--surface-elevated)); border:1px solid var(--accent); border-radius:var(--radius-md); color:var(--text-primary); display:flex; font:var(--text-xs)/1.5 var(--font-sans); gap:var(--space-2); justify-content:space-between; margin-block:var(--space-2); padding:var(--space-1) var(--space-2) var(--space-1) var(--space-3); }
      .demo-inspector .wa-inspector-layers { display:flex; align-items:center; gap:var(--space-1); min-width:0; border-inline:1px solid var(--border-standard); margin-inline:var(--space-1); padding-inline:var(--space-1); } /* dividers: history | layers | clipboard */
      .demo-inspector [data-layer="parent"] .be-icon { transform:rotate(180deg); }
      .demo-inspector .wa-inspector-layers span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; color:var(--text-muted); font:var(--text-xs)/1.5 var(--font-mono); }
      .demo-inspector .wa-inspector-layers button { flex:none; }
      .demo-inspector .wa-inspector-layers.is-row { border-inline-start:0; margin-inline-start:0; padding-inline-start:0; }
      .demo-inspector .wa-inspector-layers button:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
      .demo-inspector .wa-inspector-workflows { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-3); align-items:center; padding-block:var(--space-2); }
      .demo-inspector .wa-inspector-workflows label { display:flex; align-items:center; gap:var(--space-2); min-width:0; white-space:nowrap; }
      .demo-inspector .wa-inspector-workflows input[name="inspectorScale"] { flex:none; width:76px; min-width:0; }
      .demo-inspector .wa-inspector-workflows { grid-template-columns:minmax(0,1fr); }
      /* W and H take the row (a 1266.5 px value fits down to the 256 px panel); Scale % sits under W at the same width. */
      .demo-inspector .wa-inspector-size-row { align-items:end; display:grid; gap:var(--space-2); grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); padding-block:var(--space-1) var(--space-2); }
      .demo-inspector .wa-inspector-size-row label:has(> input[name="inspectorScale"]) { grid-column:1; }
      .demo-inspector .wa-inspector-size-row input[name="inspectorScale"] { min-width:0; width:100%; }
      .demo-inspector .wa-link-toggle { align-items:center; background:var(--surface-elevated); border:1px solid var(--border-standard); border-radius:var(--radius-md); color:var(--text-muted); cursor:pointer; display:flex; height: var(--control-md); justify-content:center; padding:0; width: var(--control-md); }
      .demo-inspector .wa-link-toggle svg { fill:none; height:16px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; width:16px; }
      .demo-inspector .wa-link-toggle.is-on { background:var(--surface-selected-subtle, var(--surface-elevated)); border-color:var(--accent); color:var(--accent); }
      .demo-inspector .wa-inspector-workflows output { color:var(--text-secondary); font:var(--text-xs)/1.5 var(--font-mono); background:none; border:0; border-radius:0; min-width:0; padding:0; text-align:right; overflow-wrap:anywhere; }
      .demo-inspector button:disabled { opacity:.45; cursor:default; }

      .demo-inspector::-webkit-scrollbar { width:6px; }
      /* The scrollbar sits inside the border box, so a 7px transparent right border leaves a real resize band beside it; the outline draws the 1px edge. */
      .demo-inspector.be-floating { border-color:transparent; border-right-width:7px; outline:1px solid var(--border-glass); outline-offset:-1px; }
      .demo-inspector::-webkit-scrollbar-thumb { background:var(--border-strong);border-radius:var(--radius-full); }
      .demo-inspector::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }
      .demo-inspector * { box-sizing: border-box; }
      .demo-inspector > * { min-width: 0; }
      .demo-inspector strong { overflow-wrap: anywhere; }
      .demo-inspector .wa-inspector-title { align-items: center; cursor: grab; display: flex; gap: var(--space-3); touch-action: none; user-select: none; }
      .demo-inspector .wa-inspector-heading { display: grid; flex: 1; min-width: 0; }
      .demo-inspector .wa-inspector-title .be-head__tile { width: auto; height: auto; border: 0; background: none; color: var(--text-muted); }
      .demo-inspector .wa-inspector-title em { color: var(--text-secondary); font: var(--weight-semibold) var(--text-sm)/1.4 var(--font-sans); font-style: normal; order: -1; }
      .demo-inspector .wa-inspector-title strong { color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .demo-inspector .wa-inspector-title-buttons { display: flex; gap: var(--space-2); }
      .demo-inspector .wa-inspector-title-actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-half); } /* two rows: this layer (history | layers, Remove at the end), then its copies (element, paste, duplicate | code | styles); narrower panels wrap further instead of leaving the panel */
      .demo-inspector .wa-inspector-title-actions .wa-inspector-layers { flex: none; gap: var(--space-half); margin-inline: var(--space-half); padding-inline: var(--space-half); border-inline-end: 0; } /* never narrower than its buttons: the divider lines stay clear of their hover boxes */
      /* Match this site: where it came from (context), the colors it would take (labelled, on an even grid), then its two actions by weight. */
      .demo-inspector .wa-pasted { display: flex; flex-direction: column; gap: var(--space-3); }
      .demo-inspector .wa-pasted__from, .demo-inspector .wa-pasted__label { margin: 0; color: var(--text-secondary); font: var(--text-xs)/1.5 var(--font-sans); }
      .demo-inspector .wa-pasted__from span { color: var(--text-primary); }
      .demo-inspector .wa-pasted__colors { display: flex; flex-direction: column; gap: var(--space-2); }
      .demo-inspector .wa-pasted__pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--control-sm) * 2 + var(--space-4)), 1fr)); gap: var(--space-2); }
      .demo-inspector .wa-pasted__pair { display: inline-flex; align-items: center; gap: var(--space-half); color: var(--text-muted); }
      .demo-inspector .wa-pasted__pair .wa-fill-color__swatch { width: var(--control-sm); height: var(--control-sm); flex: none; }
      .demo-inspector .wa-pasted__plan { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: 0; font: var(--text-xs)/1.5 var(--font-sans); }
      .demo-inspector .wa-pasted__plan > div { display: contents; }
      .demo-inspector .wa-pasted__plan dt { color: var(--text-secondary); margin: 0; }
      .demo-inspector .wa-pasted__plan dd { display: flex; align-items: center; gap: var(--space-1); min-width: 0; margin: 0; color: var(--text-primary); }
      .demo-inspector .wa-pasted__plan dd span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .demo-inspector .wa-pasted__plan dd .be-icon { flex: none; color: var(--text-muted); }
      .demo-inspector .wa-pasted__actions { display: flex; flex-direction: column; gap: var(--space-1); }
      .demo-inspector .wa-pasted .wa-create-like__button { width: 100%; box-sizing: border-box; } /* buttons start from all:unset (content-box): 100% plus padding ran out of the panel */
      .demo-inspector button.wa-create-like__button.wa-pasted__quiet { min-height: var(--control-sm); background: var(--button-ghost-bg); border-color: var(--button-ghost-border); color: var(--button-ghost-text); font-weight: 500; }
      .demo-inspector button.wa-create-like__button.wa-pasted__quiet:hover { background: var(--button-ghost-bg-hover); border-color: var(--button-ghost-border-hover); color: var(--button-ghost-text-hover); }
      .demo-inspector .wa-inspector-title-actions .wa-actions-spacer { flex-basis: 100%; height: 0; } /* the line break between the two rows */
      .demo-inspector .wa-inspector-title-actions .wa-actions-divider { align-self: stretch; border-inline-start: 1px solid var(--border-standard); margin-inline: var(--space-half); } /* the same line as the layers group's */
      .demo-inspector .wa-inspector-title-actions [data-role=remove] { margin-inline-start: auto; } /* apart from the rest, at the row's end */
      .demo-inspector .wa-inspector-title:active { cursor: grabbing; }
      .demo-inspector button { all: unset; border-radius: var(--radius-control); cursor: pointer; transition:background-color var(--transition-fast),box-shadow var(--transition-fast); font-size: var(--text-lg); line-height: 1; padding: var(--space-1) var(--space-2); }
      .demo-inspector .wa-inspector-icon-button svg { fill: none; height: var(--icon-md, 16px); stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: var(--icon-md, 16px); }
      .demo-inspector .wa-inspector-icon-button[data-tooltip] { position: relative; }

      .demo-inspector button:hover:not(:disabled) { background: var(--surface-active); }
      .demo-inspector label { color: var(--text-secondary); display: grid; gap: var(--space-1); position: relative; }
      .demo-inspector .wa-inspector-fieldset {
        border: 0;
        border-top: 1px solid var(--border-standard);
        display: grid;
        gap: var(--space-2);
        margin: 0;
        min-inline-size: 0;
        padding: var(--space-3) 0 0;
      }
      .demo-inspector .wa-inspector-fieldset legend { color: var(--text-secondary); display: block; float: left; font-size: var(--text-sm); font-weight: 600; margin: 0 0 var(--space-2); padding: 0; width: 100%; }
      .demo-inspector .wa-inspector-fieldset legend + * { clear: both; }
      .demo-inspector .wa-inspector-panel-inner > .wa-inspector-fieldset:first-child { border-top: 0; margin-top: var(--space-2); padding-top: 0; } /* a group at the head of a section needs no rule above it */
      .demo-inspector .wa-inspector-panel-inner > .wa-inspector-fieldset + .wa-inspector-fieldset { margin-top: var(--space-3); }
      .demo-inspector .wa-inspector-panel {
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        margin: 0;
        transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
      }
      .demo-inspector .wa-inspector-panel:hover {
        background: var(--surface-elevated);
        border-color: var(--border-strong);
      }
      .demo-inspector .wa-inspector-panel[data-state="open"] {
        background: var(--surface-panel);
        border-color: var(--accent);
        box-shadow: 0 0 0 1px var(--accent-glow), 0 0 6px var(--accent-glow);
      }
      .demo-inspector .wa-inspector-panel-content {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows var(--transition-smooth);
        overflow: hidden;
      }
      .demo-inspector .wa-inspector-panel[data-state="open"] .wa-inspector-panel-content {
        grid-template-rows: 1fr;
      }
      .demo-inspector .wa-inspector-panel-inner {
        display: grid;
        gap: var(--space-2);
        min-height: 0;
        overflow: hidden;
        padding: 0 var(--space-2);
      }
      .demo-inspector .wa-inspector-panel[data-state="open"] .wa-inspector-panel-inner { padding-bottom: var(--space-2); }
      .demo-inspector .wa-inspector-panel-header {
        align-items: center;
        border-radius: var(--radius-md);
        color: var(--text-primary);
        cursor: pointer;
        display: flex;
        font-size: var(--text-sm);
        font-weight: 750;
        justify-content: space-between;
        padding: var(--space-2);
        transition: background-color var(--transition-fast), color var(--transition-fast);
      }
      .demo-inspector .wa-inspector-panel-header:hover { background: var(--surface-active); }
      .demo-inspector .wa-inspector-panel-header:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
      .demo-inspector .wa-inspector-panel-header:active { background: var(--neutral-600); color: var(--text-primary); }
      .demo-inspector .wa-inspector-panel-header::after {
        border: solid var(--text-muted);
        border-width: 0 1.5px 1.5px 0;
        content: "";
        height: 6px;
        transform: rotate(45deg);
        transition: transform var(--transition-smooth);
        width: 6px;
      }
      .demo-inspector .wa-inspector-panel[data-state="open"] .wa-inspector-panel-header::after { transform: rotate(225deg); }
      .demo-inspector .wa-inspector-panel-inner > label:first-child,
      .demo-inspector .wa-inspector-panel-inner > div:first-child {
        margin-top: var(--space-2);
      }
      .demo-inspector .wa-inspector-size-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .demo-inspector .wa-inspector-label-row { align-items: center; display: flex; justify-content: space-between; gap: var(--space-2); }
      .demo-inspector output { background: var(--surface-elevated); border: 1px solid var(--border-standard); border-radius: var(--radius-full); color: var(--text-primary); font-size: var(--text-sm); font-weight: 700; line-height: 1; min-width: 42px; padding: var(--space-1) var(--space-2); text-align: center; }
      .demo-inspector textarea {
        background: var(--surface-elevated);
        border: 1px solid var(--border-standard);
        border-radius: var(--radius-md);
        color: var(--text-primary);
        font: 500 var(--text-base)/1.4 system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        min-height: 82px;
        outline: none;
        padding: var(--space-2) var(--space-3);
        resize: vertical;
        width: 100%;
      }
      .demo-inspector .wa-inspector-panel textarea { min-height: 64px; }
      .demo-inspector textarea:focus {
        border-color: var(--border-strong);
        box-shadow: var(--shadow-active);
      }
      .demo-inspector input[type="number"] {
        background: var(--surface-elevated);
        border: 1px solid var(--border-standard);
        border-radius: var(--radius-md);
        color: var(--text-primary);
        font: 700 var(--text-base)/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        height: var(--control-md);
        outline: none;
        padding: 0 var(--space-2);
        width: 100%;
      }
      /* Input group: two number fields joined into one control (shared edge, one outer radius, a single divider), the way a design tool pairs top/bottom and left/right. */
      .demo-inspector .wa-inspector-field-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
      .demo-inspector .wa-inspector-field-group > label:first-child input[type="number"] { border-start-end-radius: 0; border-end-end-radius: 0; }
      .demo-inspector .wa-inspector-field-group > label:last-child input[type="number"] { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: -1px; width: calc(100% + 1px); }
      .demo-inspector .wa-inspector-field-group input[type="number"]:hover { border-color: var(--border-strong); }
      .demo-inspector .wa-inspector-field-group input[type="number"]:focus { position: relative; z-index: 1; } /* the focused segment draws its whole edge over the divider */
      .demo-inspector .wa-inspector-field-group .wa-changed-dot { right: var(--space-2); } /* inside its own segment, not on the divider */
      .demo-inspector label[data-scrub] { cursor: ew-resize; }
      .demo-inspector label[data-scrub] input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
      .demo-inspector label[data-scrub] input { cursor: text; direction: ltr; padding-right: var(--space-6); } /* numbers and their px suffix read left to right in every language; the suffix (.wa-unit) is pinned to the physical right */
      .demo-inspector .wa-unit { align-items: center; bottom: 0; color: var(--text-muted); display: flex; font: 600 var(--text-sm)/1 ui-monospace, SFMono-Regular, Menlo, monospace; height: var(--control-md); pointer-events: none; position: absolute; right: var(--space-2); }
      .demo-inspector .wa-changed-dot { background: var(--accent); border: 0; border-radius: var(--radius-full); cursor: pointer; display: block; height: 8px; min-height: 0; min-width: 0; padding: 0; position: absolute; right: -3px; bottom: var(--space-8); width: 8px; box-shadow: 0 0 0 2px var(--surface-panel, #1c1c1c); }
      .demo-inspector .wa-changed-dot::after { content: ""; inset: -6px; position: absolute; }
      .demo-inspector .wa-changed-dot[hidden] { display: none; }
      .demo-inspector input[type="number"]:focus {
        border-color: var(--border-strong);
        box-shadow: var(--shadow-active);
      }
      .demo-inspector input[type="color"] { appearance: none; -webkit-appearance: none; background: var(--surface-elevated); border: 1px solid var(--border-standard); border-radius: var(--radius-control); height: 34px; padding: var(--space-1); width: 100%; }
      .demo-inspector input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
      .demo-inspector input[type="color"]::-webkit-color-swatch { border: 0; border-radius: var(--radius-sm); }
      .demo-inspector input[type="color"]::-moz-color-swatch { border: 0; border-radius: var(--radius-sm); }
      .demo-inspector select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: var(--surface-elevated);
        border: 1px solid var(--border-standard);
        border-radius: var(--radius-md);
        color: var(--text-primary);
        font: 600 var(--text-md)/1.3 system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        height: 40px;
        margin: 0;
        outline: none;
        padding: 0 var(--space-10) 0 var(--space-3);
        width: 100%;
        background-image:
          linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
          linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
        background-position:
          calc(100% - 18px) 17px,
          calc(100% - 12px) 17px;
        background-size: 6px 6px, 6px 6px;
        background-repeat: no-repeat;
      }
      .demo-inspector select:focus {
        border-color: var(--border-strong);
        box-shadow: var(--shadow-active);
      }
      .demo-inspector .wa-align-group {
        background: var(--surface-panel);
        border: 1px solid var(--border-standard);
        border-radius: var(--radius-control);
        display: flex;
        gap: 0;
        overflow: hidden;
      }
      .demo-inspector .wa-align-btn {
        all: unset;
        align-items: center;
        box-sizing: border-box;
        color: var(--text-muted);
        cursor: pointer;
        display: inline-flex;
        flex: 1;
        height: var(--control-md);
        justify-content: center;
        transition: background-color var(--transition-fast), color var(--transition-fast);
      }
      .demo-inspector .wa-align-btn:not(:last-child) {
        border-inline-end: 1px solid var(--border-standard);
      }
      .demo-inspector .wa-align-btn:not(.is-active):hover {
        background: var(--surface-active);
        color: var(--text-primary);
      }
      .demo-inspector .wa-align-btn:focus-visible {
        outline: 2px solid var(--border-focus);
        outline-offset: -2px;
      }
      .demo-inspector .wa-align-btn.is-active {
        background: var(--surface-selected-subtle);
        color: var(--accent);
      }
      .demo-inspector .wa-align-btn svg {
        pointer-events: none;
      }
      .demo-inspector input[type="range"] {
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        height: var(--control-sm);
        margin: 0;
        padding: 0;
        width: 100%;
      }
      .demo-inspector input[type="range"]:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
      .demo-inspector input[type="range"]::-webkit-slider-runnable-track {
        background: var(--neutral-600);
        border-radius: var(--radius-full);
        height: 6px;
      }
      .demo-inspector input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        background: var(--text-primary);
        border: 2px solid var(--surface-panel);
        border-radius: var(--radius-full);
        box-shadow: var(--shadow-sm);
        height: 18px;
        margin-top: -6px;
        width: 18px;
      }
      .demo-inspector input[type="range"]::-moz-range-track {
        background: var(--neutral-600);
        border: 0;
        border-radius: var(--radius-full);
        height: 6px;
      }
      .demo-inspector input[type="range"]::-moz-range-thumb {
        background: var(--text-primary);
        border: 2px solid var(--surface-panel);
        border-radius: var(--radius-full);
        box-shadow: var(--shadow-sm);
        height: 18px;
        width: 18px;
      }
    

      .demo-inspector :is(button,input,select,textarea,summary):focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
      .demo-inspector button { min-height: var(--control-sm); }
      .demo-inspector button:active { box-shadow:var(--shadow-pressed); }
      .demo-inspector :is(input:not([type="range"]),select,textarea) { background-image:var(--glass-reflection); border-radius:var(--radius-control); }
      /* Field boundaries at 3:1 (WCAG 1.4.11); hover, focus, open and error states keep their own. */
      .demo-inspector :is(input,select,textarea):not([type="checkbox"],[type="radio"],[type="range"],[type="color"],[type="file"],[type="button"],[type="submit"]):not(:hover,:focus,:focus-visible,[aria-invalid="true"],:disabled),
      .demo-inspector input[type="color"]:not(:hover,:focus-visible),
      .demo-inspector button.be-select__trigger:not(:hover,[aria-expanded="true"]) { border-color: var(--border-control); }
      .demo-inspector :is(input,select,textarea):not([type="checkbox"],[type="radio"],[type="range"],[type="color"],[type="file"],[type="button"],[type="submit"]):hover:not(:focus,:focus-visible,[aria-invalid="true"],:disabled),
      .demo-inspector input[type="color"]:hover:not(:focus-visible),
      .demo-inspector button.be-select__trigger:hover:not([aria-expanded="true"]) { border-color: var(--border-control-hover); }
      .demo-inspector details[open] > summary { background:var(--active-reflection) var(--surface-selected-subtle); border-color:var(--border-selected); }
      .demo-inspector input[type="range"] { accent-color:var(--accent); }
      .demo-inspector input[type="range"] { cursor:pointer; }
      .demo-inspector input[type="range"]::-webkit-slider-thumb { transition:transform var(--motion-micro) var(--ease-fluid), box-shadow var(--transition-fast); }
      .demo-inspector input[type="range"]:hover::-webkit-slider-thumb { transform:scale(1.1); }
      .demo-inspector input[type="range"]:active::-webkit-slider-thumb { box-shadow:0 0 0 4px var(--accent-glow), var(--shadow-sm); }
      .demo-inspector .be-property-copy { display:inline-flex; align-items:center; justify-content:center; width: var(--control-sm); padding:0; }
      .demo-inspector .be-property-actions { display:flex; gap:var(--space-1); align-items:center; min-width:0; }
      .demo-inspector .be-property-actions > :first-child { flex:1; min-width:0; }
      /* The shared branded select, restated with the menu's ID so the menu's own button rules do not flatten it. */
      .demo-inspector button.be-select__trigger { box-sizing:border-box; align-items:center; background:var(--glass-reflection) var(--surface-input); border:1px solid var(--border-standard); border-radius:var(--radius-control); box-shadow:none; color:var(--text-primary); display:flex; font: 500 var(--text-sm)/1.2 var(--font-sans); gap:var(--space-2); height:auto; justify-content:space-between; min-height:var(--control-md); padding:0 var(--space-3) 0 var(--space-3); text-align:left; width:100%; }
      .demo-inspector button.be-select__trigger:hover { background:var(--surface-hover); border-color:var(--border-strong); }
      .demo-inspector button.be-select__trigger[aria-expanded="true"] { background:var(--active-reflection) var(--surface-selected-subtle); border-color:var(--border-selected); }
      .demo-inspector button.be-select__trigger:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
      .demo-inspector .be-color-trigger { display:block;box-sizing:border-box;width:100%;min-height:34px;background:var(--swatch);border:1px solid var(--border-strong);border-radius:var(--radius-control);box-shadow:inset 0 0 0 3px var(--surface-elevated);padding:var(--space-1); }
      .demo-inspector .wa-fill-colors { display:grid; gap:var(--space-1); margin-top:var(--space-1); }
      .demo-inspector .wa-fill-color__copy { align-items:center; background:transparent; border:1px solid transparent; border-radius:var(--radius-control); color:inherit; cursor:pointer; display:flex; flex:1; gap:var(--space-2); min-width:0; padding:0; text-align:start; }
      .demo-inspector .wa-fill-color__copy:hover:not(:disabled) { background:var(--surface-hover); }
      .demo-inspector .wa-fill-color__copy:disabled { cursor:default; }
      .demo-inspector .wa-fill-color__copy:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
      .demo-inspector [data-fill-background][data-state="none"] .wa-fill-color__swatch { background-color:var(--surface-elevated); background-image:linear-gradient(45deg, var(--surface-hover) 25%, transparent 25%, transparent 75%, var(--surface-hover) 75%), linear-gradient(45deg, var(--surface-hover) 25%, transparent 25%, transparent 75%, var(--surface-hover) 75%); background-position:0 0, var(--space-1) var(--space-1); background-size:calc(var(--space-1) * 2) calc(var(--space-1) * 2); }
      .demo-inspector [data-fill-background][data-state="gradient"] .wa-fill-color__swatch { background-size:cover; }
      .demo-inspector .wa-fill-colors[hidden], .demo-inspector .wa-fill-color__details[hidden] { display:none; }
      .demo-inspector .wa-fill-colors__title { color:var(--text-secondary); font-size:var(--text-sm); padding-block:var(--space-1); }
      .demo-inspector .wa-fill-color { align-items:center; display:flex; gap:var(--space-2); min-width:0; }
      .demo-inspector .wa-fill-color__swatch { border:1px solid var(--border-standard); border-radius:var(--radius-control); flex:none; height:var(--control-md); width:var(--control-md); }
      .demo-inspector .wa-fill-color__meta { display:grid; flex:1; gap:2px; min-width:0; }
      .demo-inspector .wa-fill-color__hex { color:var(--text-primary); font:700 var(--text-sm)/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
      .demo-inspector .wa-fill-color__use { color:var(--text-muted); font-size:var(--text-xs); }
      .demo-inspector .wa-fill-color__view svg { transition:transform var(--transition-fast); }
      .demo-inspector .wa-fill-color__view[aria-expanded="true"] svg { transform:rotate(90deg); }
      .demo-inspector button[data-be-feedback], .demo-inspector .be-selector-copy { position:relative; } /* the reset above drops it; the copy overlay must cover its own button, not the menu */
      .demo-inspector .wa-create-like { display:grid; grid-template-columns:minmax(0, 1fr) auto; /* the action keeps its whole label (a scrollbar or the 256 px minimum used to cut it to "Create prom…"); the tool picker takes the rest */ gap:var(--space-2); align-items:stretch;  position:sticky; bottom:calc(-1 * var(--space-3)); z-index:1; margin-top:var(--space-2); margin-inline:calc(-1 * var(--space-3)); padding-block:var(--space-2) var(--space-3); padding-inline:var(--space-3); background:var(--surface-popover); border-top:1px solid var(--border-subtle); }
      .demo-inspector .wa-create-like__target { display:block; order:-1; min-width:0; }
      .demo-inspector .wa-create-like__actions { display:flex; min-width:0; }
      .demo-inspector .wa-create-like__actions .wa-create-like__button { flex:1; min-width:0; padding:0 var(--space-2); }
      .demo-inspector .be-notice { margin-top:0; }
      .demo-inspector .wa-create-like > .be-notice { grid-column:1 / -1; order:-2; }
      .demo-inspector .wa-create-like > .be-notice button.be-notice__action { flex:1 1 100%; justify-content:center; margin-inline-start:0; } /* the panel is narrow: the two actions stack at full width */
      .demo-inspector button.be-notice__action { display:inline-flex; align-items:center; gap:var(--space-2); min-height: var(--control-sm); padding:0 var(--space-3); border:1px solid var(--button-tonal-border); background:var(--button-tonal-bg); color:var(--button-tonal-text); font: 600 var(--text-sm)/1 var(--font-sans); white-space:nowrap; position:relative; }
      .demo-inspector button.be-notice__action:hover { background:var(--button-tonal-bg-hover); border-color:var(--accent); }
      .demo-inspector button.be-notice__action .be-icon { width:14px; height:14px; }
      .demo-inspector button.wa-create-like__button { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:var(--control-md); padding:0 var(--space-3); border:1px solid var(--button-tonal-border); background:var(--button-tonal-bg); color:var(--button-tonal-text); font: 600 var(--text-sm)/1.2 var(--font-sans); white-space:nowrap; overflow:hidden; transition:background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--motion-micro) var(--ease-fluid); }
      .demo-inspector button.wa-create-like__button span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
      .demo-inspector button.wa-create-like__button .be-icon { width:15px; height:15px; color:currentColor; }
      .demo-inspector button.wa-create-like__button:hover { background:var(--button-tonal-bg-hover); border-color:var(--accent); }
      .demo-inspector button.wa-create-like__button:active { transform:translateY(1px); box-shadow:var(--shadow-pressed); }
      .demo-inspector button.wa-create-like__button:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
      @media (prefers-reduced-motion: reduce) { .demo-inspector button.wa-create-like__button:active { transform:none; } }