diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index bd63dd71..00337ba1 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -8,6 +8,11 @@ on:
 jobs:
   verify:
     runs-on: ubuntu-latest
+    # A healthy run is about 4 minutes. Without a limit GitHub allows 360, and on
+    # 2026-10-23 three runs hung in the Chromium install for 7-10 minutes each,
+    # holding a pull request until somebody noticed and cancelled. The install has
+    # its own retries below; this is only the floor under everything else.
+    timeout-minutes: 20
     steps:
       - uses: actions/checkout@v5
 
@@ -77,8 +82,41 @@ jobs:
 
       # Integration coverage for the parts that only exist in a browser:
       # SharedWorker startup, cross-tab BroadcastChannel fan-out, IndexedDB.
+      #
+      # The browser is cached, keyed on Playwright's version, so most runs do not
+      # download it at all. The download is what hung: three times on 2026-10-23,
+      # 7-10 minutes each against 20-27 seconds healthy, and a re-run on another
+      # runner always went straight through. So each attempt gets two minutes and
+      # three tries, and a stall costs two minutes rather than a cancelled run.
+      # The system packages (`install-deps`) still install every run -- they are
+      # not in the cache path -- under the same retries.
+      - name: Find Playwright's version
+        id: playwright
+        run: echo "version=$(apps/fixture/node_modules/.bin/playwright --version | awk '{print $2}')" >> "$GITHUB_OUTPUT"
+
+      - name: Cache Chromium
+        id: browsers
+        uses: actions/cache@v5
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-chromium-${{ runner.os }}-${{ steps.playwright.outputs.version }}
+
       - name: Install Chromium
-        run: pnpm --filter @single-studio/fixture exec playwright install --with-deps chromium
+        timeout-minutes: 8
+        env:
+          CACHED: ${{ steps.browsers.outputs.cache-hit }}
+        run: |
+          if [ "$CACHED" = true ]; then what='install-deps chromium'; else what='install --with-deps chromium'; fi
+
+          for attempt in 1 2 3; do
+            # `timeout` signals the whole process group, so a hung apt-get under
+            # sudo goes with Playwright rather than holding the dpkg lock.
+            if timeout --kill-after=10 120 apps/fixture/node_modules/.bin/playwright $what; then exit 0; fi
+            echo "::warning::Chromium install attempt $attempt stalled or failed after up to 2 minutes; trying again"
+          done
+
+          echo "::error::Chromium did not install in three attempts"
+          exit 1
 
       - name: Smoke test
         working-directory: apps/fixture
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
index 0474e95b..d3c4f95c 100644
--- a/.github/workflows/pages.yml
+++ b/.github/workflows/pages.yml
@@ -37,6 +37,9 @@ concurrency:
 jobs:
   build:
     runs-on: ubuntu-latest
+    # 19-28 seconds when healthy. A limit so a hung step fails rather than holding
+    # the pages concurrency group, and with it the next deploy, for GitHub's 360.
+    timeout-minutes: 10
     steps:
       - uses: actions/checkout@v5
 
@@ -76,6 +79,8 @@ jobs:
   deploy:
     needs: build
     runs-on: ubuntu-latest
+    # 9-13 seconds when healthy.
+    timeout-minutes: 10
     environment:
       name: github-pages
       url: ${{ steps.deploy.outputs.page_url }}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 110fd8ca..8a6ecdbe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,44 @@ Every published package shares a version — `@single-studio/core`,
 `@single-studio/provider-supabase` and the four plugins go out as one release. The
 tag is checked against all six manifests, so they cannot drift apart.
 
+## 0.14.0
+
+Three findings from a studio running 0.13.0 on client work, each measured on a live
+board. A minor because a `col-auto` image picker now stops at a width, and a board's
+own spacing moved from Tailwind utilities in the markup to `base.css`: a studio that
+overrode those utilities by name should move to the properties below.
+
+### Added
+
+- **The board's spacing as properties.** `--ss-panel-pad`, `--ss-board-pad`,
+  `--ss-board-gap`, `--ss-bar-pad-x` and `--ss-bar-pad-y`, set on `.ss-control`. They
+  default to what the board always had, stepping up at 640px; a studio that sets one
+  gets it at every width -- in an OBS dock the viewport is the dock, so the step
+  re-flowed the board as an operator dragged its edge. The board's `<main>` has a
+  class of its own, `.ss-board`, instead of being reachable only as
+  `.ss-control > main`.
+- **`--ss-picker-max`**, the widest a `col-auto` `ImagePicker` grows. Defaults to
+  `9.25rem`.
+
+### Changed
+
+- **A `col-auto` `ImagePicker` stops at `--ss-picker-max`.** A picker is a `<select>`,
+  as wide as the longest name in the image library, which the operator chooses: in
+  the studio, a logo named `northwind-esports-primary-logo-2026` made the picker
+  365px and left the `Field` beside it 25px. The cap is part of `col-auto` itself, so
+  `sm:col-auto` caps only from `sm` up, and below that the picker still has its line
+  to itself. That is the part a studio could not write: the class is on the element
+  at every width.
+
+### Documented
+
+- **Read an `--ss-*` property with a fallback**, `var(--ss-basis, 0%)`. A misspelt or
+  renamed property makes the declaration invalid, which the browser treats as no rule
+  at all.
+- **A dev server serving half a stylesheet**, in Troubleshooting: a CSS change with no
+  effect, or a board with its colours but no utility classes, is the dev server when
+  `npm run build` is right, and a restart clears it.
+
 ## 0.13.0
 
 A board that reads better and folds away: panels with actions on their title line
diff --git a/apps/fixture/e2e/smoke.mjs b/apps/fixture/e2e/smoke.mjs
index 77ca8db1..8aa94ff7 100644
--- a/apps/fixture/e2e/smoke.mjs
+++ b/apps/fixture/e2e/smoke.mjs
@@ -2844,6 +2844,91 @@ for (const width of [380, 800, 1280]) {
   check(Math.abs(measured.auto - 160) <= 1, `while a col-auto stepper keeps its own 160px, at ${width}px`)
 }
 
+// -- The board's spacing is the studio's to set ---------------------------------
+// It stepped at 640px through utilities in the markup, which a studio could only
+// beat with CSS aimed at the framework's own classes. Now properties, with the same
+// values and the same step by default, which a studio sets on .ss-control.
+const spacing = () => {
+  const px = (el, prop) => Math.round(parseFloat(getComputedStyle(el)[prop]))
+  const panel = document.querySelector('.ss-panel')
+  const board = document.querySelector('.ss-board') ?? document.querySelector('.ss-control > main')
+  const bar = document.querySelector('.ss-control-bar')
+
+  return {
+    named: board.classList.contains('ss-board') && board.parentElement.classList.contains('ss-control'),
+    panel: px(panel, 'paddingTop'),
+    board: px(board, 'paddingTop'),
+    gap: px(board, 'rowGap'),
+    barX: px(bar, 'paddingLeft'),
+    barY: px(bar, 'paddingTop'),
+  }
+}
+const studioSets = () => {
+  const style = document.createElement('style')
+  style.textContent = '.ss-control { --ss-panel-pad: 20px; --ss-board-pad: 20px; --ss-board-gap: 20px; --ss-bar-pad-x: 20px; --ss-bar-pad-y: 20px; }'
+  document.head.append(style)
+  const px = (el, prop) => Math.round(parseFloat(getComputedStyle(el)[prop]))
+  const board = document.querySelector('.ss-board') ?? document.querySelector('.ss-control > main')
+  const bar = document.querySelector('.ss-control-bar')
+
+  return [px(document.querySelector('.ss-panel'), 'paddingTop'), px(board, 'paddingTop'), px(board, 'rowGap'), px(bar, 'paddingLeft'), px(bar, 'paddingTop')]
+}
+const slimSpacing = await rowsAt(380, spacing)
+const wideSpacing = await rowsAt(1280, spacing)
+console.log(`  spacing at 380px: ${JSON.stringify(slimSpacing)}; at 1280px: ${JSON.stringify(wideSpacing)}`)
+check(slimSpacing.named, "the board's <main> has a class of its own, .ss-board")
+check(
+  [slimSpacing.panel, slimSpacing.board, slimSpacing.gap, slimSpacing.barX, slimSpacing.barY].join() === '12,12,12,12,10' &&
+    [wideSpacing.panel, wideSpacing.board, wideSpacing.gap, wideSpacing.barX, wideSpacing.barY].join() === '16,16,16,16,12',
+  'left alone, the board keeps the spacing it always had, and its step at 640px',
+)
+const setSlim = await rowsAt(380, studioSets)
+const setWide = await rowsAt(1280, studioSets)
+check(
+  [...setSlim, ...setWide].every((value) => value === 20),
+  'a studio that sets the spacing on .ss-control gets it at every width, step and all',
+)
+
+// -- A col-auto picker stops at a width -------------------------------------------
+// An ImagePicker is as wide as the longest name in the library. col-auto let it take
+// that, however long, out of the field beside it.
+await control.locator('.ss-asset-library input[aria-label="Image URL"]').fill(`${BASE}/logos/broncos.svg`)
+await control.locator('.ss-asset-library input[aria-label="Asset name"]').fill('northwind-esports-primary-logo-2026')
+await control.locator('.ss-asset-library button:has-text("Add URL")').click()
+check(
+  await becomes(control, () => [...document.querySelectorAll('.fixture-capped option')].some((option) => /northwind/.test(option.textContent))),
+  'a long name reaches the picker',
+)
+const capped = () => {
+  const width = (el) => Math.round(el.getBoundingClientRect().width)
+  const row = document.querySelector('.fixture-capped')
+
+  const picker = row.querySelector('.ss-image-picker').getBoundingClientRect()
+  const field = row.querySelector('.ss-field').getBoundingClientRect()
+
+  return {
+    picker: Math.round(picker.width),
+    field: Math.round(field.width),
+    row: width(row),
+    gap: Math.round(parseFloat(getComputedStyle(row).columnGap)),
+    shared: Math.abs(picker.top - field.top) < 1,
+  }
+}
+const viewport = control.viewportSize()
+await control.setViewportSize({ width: 1024, height: 900 })
+await control.waitForTimeout(300)
+const capWide = await control.evaluate(capped)
+await control.setViewportSize({ width: 380, height: 900 })
+await control.waitForTimeout(300)
+const capSlim = await control.evaluate(capped)
+await control.setViewportSize(viewport)
+console.log(`  at 1024px: picker ${capWide.picker}px, field ${capWide.field}px of ${capWide.row}px; at 380px: picker ${capSlim.picker}px of ${capSlim.row}px`)
+check(
+  capWide.shared && capWide.picker === 148 && capWide.field === capWide.row - capWide.picker - capWide.gap,
+  'a col-auto picker with a long name stops at 9.25rem, and the field on its line keeps the rest',
+)
+check(capSlim.picker === capSlim.row, 'below its breakpoint the same picker has its line to itself, uncapped')
+
 // -- A graphic that crashes ---------------------------------------------------
 // On air it must paint nothing. A missing lower third reads as a cue that did not
 // fire; a red error box reads as the broadcast being broken. `?debug` -- which an
diff --git a/apps/fixture/src/control/Control.jsx b/apps/fixture/src/control/Control.jsx
index 0fc54acf..70fd1eb4 100644
--- a/apps/fixture/src/control/Control.jsx
+++ b/apps/fixture/src/control/Control.jsx
@@ -123,6 +123,16 @@ function Folding() {
         </Row>
       </Panel>
 
+      <Panel title="Picker width">
+        {/* A picker at its own width from 640px, beside the field that used to lose:
+          with a long name in the library it stops at --ss-picker-max rather than
+          leaving the field 25px. Below 640px it has the line to itself. */}
+        <Row className="fixture-capped">
+          <ImagePicker name="fixture.logo" label="Crest" className="sm:col-auto" />
+          <Field name="fixture.team" label="Team name" />
+        </Row>
+      </Panel>
+
       {/* Every header button at size="sm", both ways a reset and a swap render, beside
           the same reset at its own size on a Row. Mounted only when the e2e suite asks,
           because checks long before it find the board's one swap and one reset by
diff --git a/demo/package.json b/demo/package.json
index 1319126b..d23be54b 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -9,9 +9,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@single-studio/core": "^0.13.0",
-    "@single-studio/plugin-twitch": "^0.13.0",
-    "@single-studio/provider-supabase": "^0.13.0",
+    "@single-studio/core": "^0.14.0",
+    "@single-studio/plugin-twitch": "^0.14.0",
+    "@single-studio/provider-supabase": "^0.14.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-router-dom": "^7.18.4",
diff --git a/docs/getting-started.md b/docs/getting-started.md
index cdcb55ec..4cf4cdde 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -867,6 +867,35 @@ is `--ss-input-h` tall (default `2.5rem`):
 } /* a tighter board */
 ```
 
+The board's own spacing is set the same way. Each steps up at 640px by default, as it
+always has; set one on `.ss-control` and it holds at every width.
+
+| Property          | Spaces                              | Below 640px | From 640px |
+| ----------------- | ----------------------------------- | ----------- | ---------- |
+| `--ss-panel-pad`  | inside every `Panel`                | `0.75rem`   | `1rem`     |
+| `--ss-board-pad`  | around the board (`.ss-board`)      | `0.75rem`   | `1rem`     |
+| `--ss-board-gap`  | between the panels                  | `0.75rem`   | `1rem`     |
+| `--ss-bar-pad-x`  | the top bar, either side            | `0.75rem`   | `1rem`     |
+| `--ss-bar-pad-y`  | the top bar, above and below        | `0.625rem`  | `0.75rem`  |
+| `--ss-picker-max` | the widest a `col-auto` ImagePicker | `9.25rem`   | `9.25rem`  |
+
+```css
+.ss-control {
+  --ss-panel-pad: 1rem;
+  --ss-board-pad: 1rem;
+  --ss-board-gap: 1rem;
+} /* one size at every width, in a dock you resize mid-show */
+```
+
+`--ss-picker-max` exists because an `ImagePicker` is as wide as the longest name in the
+library, which the operator chooses: given `col-auto`, a picker with a long logo name
+took the line from the field beside it. It stops there now.
+
+**Reading an `--ss-*` property, give it a fallback** — `var(--ss-basis, 0%)`, not
+`var(--ss-basis)`. A property that is misspelt, or renamed in a later release, makes
+the whole declaration invalid, and the browser treats that as if the rule were not
+there at all: no error, just nothing. A fallback turns that into a default.
+
 Two rules keep a wide control from breaking a narrow dock, and are worth knowing if
 you write your own layout: `min-width: 0` is what lets a flex or grid item shrink
 below its content at all, and `max-width: 100%` is what stops a wide control from
@@ -1166,6 +1195,19 @@ text over the programme.
 unloaded. If the dock is closed and every graphic is hidden at once, the next one to
 appear reloads the show from disk — slower, but nothing is lost.
 
+### A CSS change has no effect, or the board comes up unstyled, in `npm run dev`
+
+Run `npm run build` and look at the CSS it writes to `dist`. If that is right, your
+code is right and the dev server is not: **restart it** — a reload does not help.
+
+Two ways it goes wrong, both seen in a real studio. A hot update can apply one of two
+quick edits to the same file, so a rule arrives but the custom property it reads does
+not, and the rule silently does nothing. And when the dev server restarts itself — a
+branch checkout touching `vite.config.js` is enough — it can come back serving
+Tailwind's colours but none of its utility classes, so the board is serif text and
+bare buttons. To tell which you have, read the page's own `<style>` in the browser's
+dev tools rather than your file.
+
 ### The board will not load on my phone
 
 Not supported yet — see [browser requirements](#browser-requirements).
diff --git a/docs/internal/next.md b/docs/internal/next.md
index 17114966..c62f8c4d 100644
--- a/docs/internal/next.md
+++ b/docs/internal/next.md
@@ -7,17 +7,101 @@ Left here rather than in a chat, so it survives.
 Asked for at the top of any "where are we at": the owner wants reminding of these
 before anything else.
 
-- **Move SS-Mercy-Riftbound-2v2 onto 0.13.0.** Everything it built for itself is in
+- **Move SS-Mercy-Riftbound-2v2 onto 0.14.0.** Everything it built for itself is in
   core from 0.13.0: `actions`, `collapsible`, `size="sm"`, `useCollapsed` and
   `Chevron`, the stripes, `color-scheme: dark`, and steppers that fill. Bump it to
-  `^0.13.0` and delete its `Panel.jsx`, `collapse.jsx`, `FillStepper.jsx`,
-  `HEADER_BUTTON` and the two rules in its `index.css`. See
+  `^0.14.0` and delete its `Panel.jsx`, `collapse.jsx`, `FillStepper.jsx`,
+  `HEADER_BUTTON`, the two rules in its `index.css`, and from 0.14.0 its spacing
+  overrides (now `--ss-panel-pad` and friends) and its picker width band. See
   [the section below](#panel-header-actions-and-folding).
 - **`Sequence` in a real OBS.** 0.12.0 shipped it tested only in Chromium. The check
   that matters: a browser source with _Refresh browser when scene becomes active_
   ticked starts the sequence again from its first item every time the scene is
   taken.
 
+## Reports from client work, 2026-10-23
+
+Filed by a studio running 0.13.0, every number measured on a live board. Each one is
+checked against the code here; none is a 0.13.0 regression.
+
+**All three are in 0.14.0**: the spacing properties and `.ss-board`, the
+`col-auto` picker cap with `--ss-picker-max`, and the docs. Kept for the measurements.
+
+### The board re-pads itself at 640px, and a studio cannot turn it off
+
+Three things step at Tailwind's `sm`, as utilities in the markup:
+
+| Element              | Where                                              | Below 640px    | From 640px     |
+| -------------------- | -------------------------------------------------- | -------------- | -------------- |
+| `.ss-panel`          | `Panel.jsx`, `p-3 sm:p-4`                          | 12px           | 16px           |
+| the board's `<main>` | `pages/Control.jsx`, `gap-3 p-3 sm:gap-4 sm:p-4`   | 12px, gap 12px | 16px, gap 16px |
+| `.ss-control-bar`    | `pages/Control.jsx`, `px-3 py-2.5 sm:px-4 sm:py-3` | 12px / 10px    | 16px / 12px    |
+
+Why it matters: a studio can only undo it with unlayered CSS that beats
+`@layer utilities`, which is overriding the framework's markup rather than setting a
+value it offers -- unlike the Row, which exposes `--ss-row-gap`, `--ss-basis` and
+`--ss-label-offset` on purpose. The `<main>` has no class at all, so the override has
+to reach it as `.ss-control > main`. And it is keyed to the viewport, which in an OBS
+dock is the dock: the chrome re-flows while an operator drags the dock edge past
+640px, mid-show.
+
+The ask: custom properties with today's values as defaults --
+`--ss-panel-pad`, `--ss-board-pad`, `--ss-board-gap`, `--ss-bar-pad-x`,
+`--ss-bar-pad-y` -- with the 640px step moved into `base.css` so it still happens by
+default, and an `ss-board` class on the `<main>`. The studio carries unlayered
+overrides pinned to the 640px-and-up values until then.
+
+### `col-auto` on a control with operator-supplied content has no ceiling
+
+`col-auto` is `flex: 0 0 auto` (`base.css`, `@utility col-auto`): size to content, never
+shrink. Right for a Stepper, which is 160px for ever. Wrong for an `ImagePicker`,
+which is a `<select>` and so as wide as the longest key in the library -- something
+the operator sets at run time. Measured on a 640px board by renaming one asset:
+
+| Longest key                           | Picker | The Field beside it |
+| ------------------------------------- | ------ | ------------------- |
+| `x`                                   | 136px  | 255px               |
+| `broadcaster`                         | 202px  | 188px               |
+| `northwind-esports-primary-logo-2026` | 365px  | 25px                |
+
+A board checked at design time degrades months later because somebody named a logo
+descriptively, and the neighbour that loses is usually the name field.
+
+The ask is a cap inside the utility, where a breakpoint variant wraps it too:
+`.ss-row > &.ss-image-picker { max-width: var(--ss-picker-max, 9.25rem) }`. A studio
+cannot write that rule itself: `sm:col-auto` is a literal class at every width, so an
+attribute selector also matches below the breakpoint, where the picker has a line to
+itself and must fill it. The studio carries a width-band cap meanwhile, which also
+holds back pickers that are not `col-auto` -- about 338px unused at 700px in one panel.
+
+Open before building: whether the cap belongs to `ImagePicker` alone or to any control
+sized by operator content, and whether a cap or a select that does not size to its
+options is the better fix.
+
+### Reading an `--ss-*` property, and a dev server that serves half a stylesheet
+
+Not core's code, but core's users hit it, because core's layer runs on custom
+properties. `max-width: var(--undefined)` is invalid at computed-value time and
+resolves to `none` -- the same as a stylesheet that never loaded -- so a misspelt or
+renamed property fails in silence. The studio met it twice in one day through Vite's
+dev server: once a hot update applied one of two edits to the same file, and once an
+auto-restart (a branch checkout touched `vite.config.js`'s mtime) brought the CSS
+back with Tailwind's theme tokens but not one utility class. `npm run build` was right
+both times; a restart fixed both.
+
+The ask is docs only, where `getting-started.md` introduces the properties:
+
+- read an `--ss-*` property with a fallback, `var(--ss-basis, 0%)`, so a typo or a
+  rename degrades to a default rather than to nothing;
+- when a rule has no effect, read the page's served `<style>`, not the file; a
+  restart, not a reload, clears a half-applied hot update;
+- a board with no utility classes but its theme intact is the dev server's utility
+  scan, not the studio's CSS; if `npm run build` is right, stop reading your own
+  files.
+
+And a release that renames an `--ss-*` property is breaking for every studio that
+overrides it, quietly, so it gets a line in the release notes.
+
 ## Panel: header actions, and folding
 
 From the SS-Mercy-Riftbound-2v2 studio, which built all of it locally
@@ -120,7 +204,7 @@ Found on a real machine, and high severity: one unreachable plugin made a studio
 render nothing at all, with no error anywhere a person will look. `started` waits for
 every plugin's `start()`, every port message queues behind `started`, and
 `SocketService.open()` settles only on the socket's `open` or `error` -- so an address
-that *accepts and then does nothing* never settles, and the board never handles a
+that _accepts and then does nothing_ never settles, and the board never handles a
 single message.
 
 The existing mitigation makes plugin starts concurrent with each other, which
@@ -136,17 +220,17 @@ in `SocketService`, and a board that cannot say "not ready" — in
 
 `vars` maps one custom property to one path and passes the value through verbatim.
 That is the whole surface, and it means the prop is all-or-nothing: the moment a
-scene needs *any* resolution logic, it drops out of `vars` entirely and does every
+scene needs _any_ resolution logic, it drops out of `vars` entirely and does every
 property in `style` instead.
 
 The case that found this is the BSU Rocket League studio, which needs four:
 
-| Property           | Wants                                                   |
-| ------------------ | ------------------------------------------------------- |
+| Property           | Wants                                                                   |
+| ------------------ | ----------------------------------------------------------------------- |
 | `--home-primary`   | the roster sheet's brand colour, else the colour the team is playing in |
-| `--home-secondary` | that, darkened, for the far end of every gradient        |
-| `--away-primary`   | as above                                                 |
-| `--away-secondary` | as above                                                 |
+| `--home-secondary` | that, darkened, for the far end of every gradient                       |
+| `--away-primary`   | as above                                                                |
+| `--away-secondary` | as above                                                                |
 
 None of the four can be written as `vars`, so all four are in `style` and the studio
 re-implements the subscription `useVelcroVars` already does.
@@ -155,7 +239,7 @@ Two different gaps are tangled up in that, and only one is worth closing.
 
 **Worth closing: a fallback chain.** `vars={{ '--home': ['home.color', 'rl.blue.color'] }}`
 — the first path holding something wins. This is the commonest shape in any studio
-driven by both a person and a feed: *operator override, else what the feed says.* It
+driven by both a person and a feed: _operator override, else what the feed says._ It
 needs no new concept, because "empty means no value" is already the store's rule
 everywhere else. A studio that only needs this would keep using `vars`.
 
@@ -178,7 +262,7 @@ So the change is two things, not one:
 2. Say in [api.md](../api.md) that `vars` is the convenience form for properties
    nothing else reads, and that `style` with `useVelcroValue` is the right shape —
    not a failure to use `vars` — the moment a scene needs the value itself. Right
-   now the API reference reads as though `vars` is *the* way to drive a graphic from
+   now the API reference reads as though `vars` is _the_ way to drive a graphic from
    operator input, and a studio author following it hits this and assumes they have
    done something wrong.
 
diff --git a/docs/internal/releasing.md b/docs/internal/releasing.md
index 3d725274..7552dbb7 100644
--- a/docs/internal/releasing.md
+++ b/docs/internal/releasing.md
@@ -478,3 +478,11 @@ compatibility matrix.
 The plugins peer on `@single-studio/core` at `^0.6.0` rather than an exact version,
 so a patch release does not need those ranges touched — `^0.6.0` already admits
 `0.6.1`. Only the `version` fields move.
+
+**Renaming an `--ss-*` custom property is a breaking change**, and a quiet one. Studios
+set them in their own CSS (`--ss-input-h`, `--ss-panel-pad`, `--ss-picker-max` and the
+rest), and a rename does not fail anywhere: the studio's declaration still parses, sets
+a property nothing reads any more, and the board goes back to the default. Rename one
+only in a minor, keep the old name read as a fallback for at least one release
+(`var(--ss-new, var(--ss-old, 1rem))`), and say so in the changelog. Reported by a
+studio that met the same silence from a typo of its own.
diff --git a/packages/core/package.json b/packages/core/package.json
index 319a02e3..1c794871 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@single-studio/core",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Local-first broadcast graphics framework for OBS: replicated state, source graphics, and control surfaces.",
   "license": "MIT",
   "author": {
diff --git a/packages/core/src/components/control/Panel.jsx b/packages/core/src/components/control/Panel.jsx
index 6c9b7573..c73ffea9 100644
--- a/packages/core/src/components/control/Panel.jsx
+++ b/packages/core/src/components/control/Panel.jsx
@@ -108,7 +108,7 @@ export function Panel({ title, actions, collapsible = false, defaultOpen = false
 
   return (
     <section
-      className={cx('ss-panel rounded-lg border border-slate-800 p-3 sm:p-4', className)}
+      className={cx('ss-panel rounded-lg border border-slate-800', className)}
       data-open={collapsible ? String(!folded) : undefined}
       {...rest}
     >
diff --git a/packages/core/src/pages/Control.jsx b/packages/core/src/pages/Control.jsx
index 9f8b5d85..f4a3e2f9 100644
--- a/packages/core/src/pages/Control.jsx
+++ b/packages/core/src/pages/Control.jsx
@@ -45,12 +45,12 @@ export function ControlPage() {
         for nothing. Without wrapping the h1 shrinks instead -- which is what `min-w-0
         truncate` is for -- so the name ellipses and the bar stays one row at any width.
       */}
-      <header className="ss-control-bar sticky top-0 z-10 flex items-center gap-x-3 border-b border-slate-800 bg-slate-950/90 px-3 py-2.5 backdrop-blur sm:px-4 sm:py-3">
+      <header className="ss-control-bar sticky top-0 z-10 flex items-center gap-x-3 border-b border-slate-800 bg-slate-950/90 backdrop-blur">
         <h1 className="min-w-0 truncate text-sm font-semibold uppercase tracking-widest text-slate-300">{studio.name}</h1>
         <Menu className="ml-auto shrink-0" />
         <SaveButton />
       </header>
-      <main className="flex flex-col gap-3 p-3 sm:gap-4 sm:p-4">
+      <main className="ss-board flex flex-col">
         {/*
           Above the studio's own panels and outside their boundary: the panel whose
           button failed may be the one that has crashed, and this has to survive it.
diff --git a/packages/core/src/styles/base.css b/packages/core/src/styles/base.css
index bfcbd217..ef6aabc5 100644
--- a/packages/core/src/styles/base.css
+++ b/packages/core/src/styles/base.css
@@ -343,6 +343,47 @@
     color-scheme: dark;
   }
 
+  /*
+   * The board's own spacing, as properties a studio can set rather than utilities
+   * it has to beat. These were `p-3 sm:p-4` on every panel, `gap-3 p-3 sm:gap-4
+   * sm:p-4` on the board and `px-3 py-2.5 sm:px-4 sm:py-3` on the bar, in the
+   * markup: a studio that wanted one size at every width had to write unlayered
+   * CSS against Tailwind's utilities, and reach the board as `.ss-control > main`
+   * because it had no class. Reported from a studio whose panels went collapsible
+   * and short enough to show the step -- in an OBS dock the viewport is the dock,
+   * so the chrome re-flowed as an operator dragged its edge past 640px.
+   *
+   * Same values and the same step at 40rem by default, so nothing moves for a board
+   * that does not care. Declared on `.ss-control`, in this layer: a studio sets them
+   * there in its own CSS, which wins at every width, step and all.
+   */
+  .ss-control {
+    --ss-board-pad: 0.75rem;
+    --ss-board-gap: 0.75rem;
+    --ss-panel-pad: 0.75rem;
+    --ss-bar-pad-x: 0.75rem;
+    --ss-bar-pad-y: 0.625rem;
+  }
+
+  @media (min-width: 40rem) {
+    .ss-control {
+      --ss-board-pad: 1rem;
+      --ss-board-gap: 1rem;
+      --ss-panel-pad: 1rem;
+      --ss-bar-pad-x: 1rem;
+      --ss-bar-pad-y: 0.75rem;
+    }
+  }
+
+  .ss-board {
+    padding: var(--ss-board-pad, 1rem);
+    gap: var(--ss-board-gap, 1rem);
+  }
+
+  .ss-control-bar {
+    padding: var(--ss-bar-pad-y, 0.75rem) var(--ss-bar-pad-x, 1rem);
+  }
+
   /*
    * Cursors on the board.
    *
@@ -463,6 +504,7 @@
    * `bg-*` on one panel, or its own rule, still wins.
    */
   .ss-panel {
+    padding: var(--ss-panel-pad, 1rem);
     background-color: rgb(15 23 42 / 0.4);
   }
 
@@ -588,10 +630,29 @@
   }
 }
 
+/*
+ * `col-auto` sizes a control to its content and never shrinks it, which is right for
+ * content with a ceiling -- a stepper is 160px for ever -- and wrong for content the
+ * operator supplies. An ImagePicker is a <select>, as wide as the longest key in the
+ * library: measured in a studio on a 640px board, 136px with a key of `x` and 365px
+ * with `northwind-esports-primary-logo-2026`, leaving the Field beside it 25px. A
+ * board checked at design time degraded months later because a logo was named
+ * descriptively.
+ *
+ * So a `col-auto` picker stops at `--ss-picker-max`. Here, inside the utility, so that
+ * `sm:col-auto` caps it only from `sm` up: a studio cannot write this rule itself,
+ * because the class `sm:col-auto` is on the element at every width, and a selector
+ * that matched it would also cap the picker below the breakpoint, where it has a line
+ * to itself and must fill it.
+ */
 @utility col-auto {
   .ss-row > & {
     flex: 0 0 auto;
   }
+
+  .ss-row > &.ss-image-picker {
+    max-width: var(--ss-picker-max, 9.25rem);
+  }
 }
 
 @utility row-cols-* {
diff --git a/packages/plugin-obs/package.json b/packages/plugin-obs/package.json
index 49d17020..6ba4e288 100644
--- a/packages/plugin-obs/package.json
+++ b/packages/plugin-obs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@single-studio/plugin-obs",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "OBS for Single Studio: the live scene, stream and record state, straight into a studio over obs-websocket.",
   "license": "MIT",
   "author": {
@@ -33,7 +33,7 @@
     "test": "vitest run"
   },
   "peerDependencies": {
-    "@single-studio/core": "^0.13.0"
+    "@single-studio/core": "^0.14.0"
   },
   "devDependencies": {
     "@single-studio/core": "workspace:*",
diff --git a/packages/plugin-rocket-league/package.json b/packages/plugin-rocket-league/package.json
index cd3a42a1..c84baebf 100644
--- a/packages/plugin-rocket-league/package.json
+++ b/packages/plugin-rocket-league/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@single-studio/plugin-rocket-league",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Rocket League for Single Studio: score, clock, goals and the stat feed, over Psyonix's own Stats API.",
   "license": "MIT",
   "author": {
@@ -34,7 +34,7 @@
     "replay": "node dev/replay.mjs"
   },
   "peerDependencies": {
-    "@single-studio/core": "^0.13.0"
+    "@single-studio/core": "^0.14.0"
   },
   "devDependencies": {
     "@single-studio/core": "workspace:*",
diff --git a/packages/plugin-sheets/package.json b/packages/plugin-sheets/package.json
index 9fbfb2ed..b6a81960 100644
--- a/packages/plugin-sheets/package.json
+++ b/packages/plugin-sheets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@single-studio/plugin-sheets",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Google Sheets for Single Studio: a shared spreadsheet as a data source, with an API key and no backend.",
   "license": "MIT",
   "author": {
@@ -33,7 +33,7 @@
     "test": "vitest run"
   },
   "peerDependencies": {
-    "@single-studio/core": "^0.13.0"
+    "@single-studio/core": "^0.14.0"
   },
   "devDependencies": {
     "@single-studio/core": "workspace:*",
diff --git a/packages/plugin-twitch/package.json b/packages/plugin-twitch/package.json
index 3beebbcc..b1b06470 100644
--- a/packages/plugin-twitch/package.json
+++ b/packages/plugin-twitch/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@single-studio/plugin-twitch",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Twitch EventSub for Single Studio: chat, follows, subs, gifts, cheers and raids, straight into a studio with no backend.",
   "license": "MIT",
   "author": {
@@ -34,7 +34,7 @@
     "mock": "node dev/mock.mjs"
   },
   "peerDependencies": {
-    "@single-studio/core": "^0.13.0"
+    "@single-studio/core": "^0.14.0"
   },
   "devDependencies": {
     "@single-studio/core": "workspace:*",
diff --git a/packages/provider-supabase/package.json b/packages/provider-supabase/package.json
index 4baea007..284f84ed 100644
--- a/packages/provider-supabase/package.json
+++ b/packages/provider-supabase/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@single-studio/provider-supabase",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Collaboration for Single Studio over Supabase Realtime: bring your own key, no backend to deploy.",
   "license": "MIT",
   "author": {
diff --git a/templates/plugin/package.json b/templates/plugin/package.json
index 1b75cd2b..9798e931 100644
--- a/templates/plugin/package.json
+++ b/templates/plugin/package.json
@@ -28,10 +28,10 @@
     "lint": "eslint ."
   },
   "peerDependencies": {
-    "@single-studio/core": "^0.13.0"
+    "@single-studio/core": "^0.14.0"
   },
   "devDependencies": {
-    "@single-studio/core": "^0.13.0",
+    "@single-studio/core": "^0.14.0",
     "vitest": "^5.0.2"
   }
 }
diff --git a/templates/studio/package.json b/templates/studio/package.json
index dcc908d8..29e0288d 100644
--- a/templates/studio/package.json
+++ b/templates/studio/package.json
@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@single-studio/core": "^0.13.0",
-    "@single-studio/provider-supabase": "^0.13.0",
+    "@single-studio/core": "^0.14.0",
+    "@single-studio/provider-supabase": "^0.14.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-router-dom": "^7.18.4",