stillmade-sdk 0.1.11 → 0.1.13

package/AGENTS.md

@@ -6,7 +6,7 @@ This folder is the StillMade Block SDK. Read this file before writing code; it i
 
 Do not tell the user a Block is ready, done or working until `node packages/block-cli/cli.js gate .` passes after your last edit, and report the exact status it prints. In this folder Claude Code (`.claude/settings.json`) and Cursor (`.cursor/hooks.json`) run the gate when you finish a turn and send any failures back to you, but only in a session started in this folder: if you downloaded the SDK during the current session, run the gate yourself. Other agents must also run it themselves. If you cannot fix a failure, say plainly that the Block is not ready and list the failing checks.
 
-Contract `stillmade.block-builder@1.5.2`. Humans, coding agents, imported source, GitHub repositories and generated code all adapt to the Block platform; anything that becomes a StillMade Block obeys this contract.
+Contract `stillmade.block-builder@1.5.4`. Humans, coding agents, imported source, GitHub repositories and generated code all adapt to the Block platform; anything that becomes a StillMade Block obeys this contract.
 
 ## Source of truth
 
@@ -54,7 +54,7 @@ Give the Block a short, plain name of 40 characters or fewer that says what it d
 
 ## Interface
 
-If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction genuinely needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (Write, Generate; never "Run") and no price (StillMade's run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Expose the capability, not the implementation: meaningful controls, sensible defaults, preview, direct manipulation, progress, clear errors and visible outputs. Do not show raw JSON, internal IDs, filesystem details, provider terminology or developer settings unless the Block is itself a developer tool. When a person chooses among options they need to hear or see (voices, music, sounds, fonts, looks, colors, templates or images), let them preview each option before choosing: a sample to play or a thumbnail, from the Block's own files or the host's free samples, never a paid generation. Leave previews out only when the builder states there is nothing to preview. Choices StillMade owns, such as voices and models in the run review, already show their samples. Follow the host appearance (Light, Dark and White) and the mobile layout contract: one interface for every screen size that fits a 320 CSS-pixel phone without horizontal scrolling.
+If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction genuinely needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (Write, Generate; never "Run") and no price (StillMade's run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Expose the capability, not the implementation: sensible defaults, previews, progress, clear errors, visible outputs. Do not show raw JSON, internal IDs, filesystem details, provider terminology or developer settings unless the Block is itself a developer tool. When a person chooses among options they need to hear or see (voices, music, sounds, fonts, looks, colors, templates or images), let them preview each option before choosing: a sample to play or a thumbnail, from the Block's own files or the host's free samples, never a paid generation. Leave previews out only when the builder states there is nothing to preview. Choices StillMade owns, such as voices and models in the run review, already show their samples. Follow the host appearance (Light, Dark and White) and one elastic layout: stacked on a 320px phone with no sideways scroll (result first, action pinned), and from 860px the controls left (≤380px), the result filling the right. Short settings sit side by side (`sm-settings`; three or four short options as one `data-segmented` row); many items are one line each (`sm-list`) that open in place; input files are small tiles (`sm-gallery data-size="small"`); on a phone chip rows scroll sideways and long lists show three. Compacting moves controls, never deletes them.
 
 ## Shared editing
 

package/INTERFACE_DESIGN.md

@@ -57,13 +57,16 @@ piece in Light, Dark and White.
 | `sm-block` | The one workspace. `data-layout="split"` puts the stage beside the controls on wide screens. |
 | `sm-stage` | The thing being made: preview, media or result. `data-ratio="16:9"`, `"9:16"` or `"1:1"`. |
 | `sm-empty` | An empty stage: a glyph, at most five words, one action. |
-| `sm-choices` | Picks shown as pictures (`img`, `.sm-swatch`, `.sm-glyph`) and one or two words. `data-compact` for short text chips. Give the `fieldset` an `id` and `data-stillmade-share` so teammates see the same pick. |
+| `sm-choices` | Picks shown as pictures (`img`, `.sm-swatch`, `.sm-glyph`) and one or two words. `data-compact` for short text chips, `data-segmented` for one connected row of three or four short options. Chips and segments scroll sideways on a phone. Give the `fieldset` an `id` and `data-stillmade-share` so teammates see the same pick. |
 | `sm-field`, `sm-fields` | A short label above one control; a responsive group of them. |
+| `sm-settings` | Short settings side by side, each label above its control. |
+| `sm-list` | Many items, one line each: a thumbnail, one line of text, a short fact. An item that opens in place is an `li` holding a `details`. `data-peek` shows three on a phone, with a last `li.sm-list-more` button that sets `data-open`. |
+| `sm-clamp` | Long text that shows five lines on a phone until it gets `data-open`. |
 | `sm-actions` | One `sm-primary`, then `sm-quiet` buttons and `sm-icon` buttons (each with `aria-label` and `title`). |
 | `sm-status` | Live state beside the action: `data-state="loading"`, `"success"`, `"waiting"` or `"error"`. |
 | `sm-more` | A closed `<details>` for secondary settings. |
 | `sm-hint` | A closed `<details>` info toggle for an explanation that might help. |
-| `sm-gallery` | A grid of results or media. |
+| `sm-gallery` | A grid of results or media. `data-size="small"` for input files: more tiles per row as the screen widens. |
 | `sm-glyph` | A small icon in `currentColor`: `play`, `pause`, `plus`, `close`, `check`, `chevron`, `upload`, `image`, `video`, `audio`, `text`, `spark`, `info`, `warning`, `spinner`. Works in standard views, which cannot use SVG. |
 
 **Function first.** When the person building a Block does not ask for a look,
@@ -140,6 +143,28 @@ exception, never unrelated technical UI.
     or two plain sentences. On generated controls StillMade shows the input's
     `description` as that (i), so write a `description` for every input that
     needs one. Obvious controls ("Photos", "Tone") get none.
+16. Use the width. From 860 px wide, the kit puts the controls on the left
+    at a reading width (300–380 px) and the result (`sm-stage`, a direct
+    child of `sm-block`) fills the right, in its real shape. Under that the
+    page is one column: result first, then the controls, with the action
+    within reach. Extra width goes to the result, never to wider text
+    fields. Before there is a result, the stage previews what will be made
+    from the inputs given so far, not an empty box. `data-layout="stack"`
+    keeps one column.
+17. Settings sit side by side, next to what they change. Short settings are
+    an `sm-settings` grid, and three or four short options (Low / Med /
+    High, 16:9 / 9:16 / 1:1) are one `data-segmented` row, not big tiles.
+18. Lists fill the width at a small size. Input files are `sm-gallery
+    data-size="small"` tiles; many items (shots, scenes, rows) are an
+    `sm-list`, one line each with a thumbnail, one line of text and a short
+    fact, and tapping an item opens all of its fields in place. Extra width
+    means more items per row, never bigger cards.
+19. On a phone, chip and segment rows scroll sideways instead of wrapping,
+    long lists show their first three and "N more" (`sm-list data-peek`),
+    and long text shows five lines until tapped (`sm-clamp`).
+20. Nothing is lost when a Block gets smaller. Every control stays on the
+    screen, behind an (i), in `sm-more`, or inside the item it belongs to.
+    Compacting moves controls; it never deletes them.
 
 ## 4. What StillMade checks
 

package/PASTE_TO_LLM.md

@@ -2,9 +2,9 @@
 
 <!-- builder-contract:start (generated by npm run build:sdk; do not edit) -->
 
-## Block builder contract (stillmade.block-builder@1.5.2)
+## Block builder contract (stillmade.block-builder@1.5.4)
 
-Contract `stillmade.block-builder@1.5.2`. Humans, coding agents, imported source, GitHub repositories and generated code all adapt to the Block platform; anything that becomes a StillMade Block obeys this contract.
+Contract `stillmade.block-builder@1.5.4`. Humans, coding agents, imported source, GitHub repositories and generated code all adapt to the Block platform; anything that becomes a StillMade Block obeys this contract.
 
 ### Source of truth
 
@@ -52,7 +52,7 @@ Give the Block a short, plain name of 40 characters or fewer that says what it d
 
 ### Interface
 
-If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction genuinely needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (Write, Generate; never "Run") and no price (StillMade's run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Expose the capability, not the implementation: meaningful controls, sensible defaults, preview, direct manipulation, progress, clear errors and visible outputs. Do not show raw JSON, internal IDs, filesystem details, provider terminology or developer settings unless the Block is itself a developer tool. When a person chooses among options they need to hear or see (voices, music, sounds, fonts, looks, colors, templates or images), let them preview each option before choosing: a sample to play or a thumbnail, from the Block's own files or the host's free samples, never a paid generation. Leave previews out only when the builder states there is nothing to preview. Choices StillMade owns, such as voices and models in the run review, already show their samples. Follow the host appearance (Light, Dark and White) and the mobile layout contract: one interface for every screen size that fits a 320 CSS-pixel phone without horizontal scrolling.
+If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction genuinely needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (Write, Generate; never "Run") and no price (StillMade's run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Expose the capability, not the implementation: sensible defaults, previews, progress, clear errors, visible outputs. Do not show raw JSON, internal IDs, filesystem details, provider terminology or developer settings unless the Block is itself a developer tool. When a person chooses among options they need to hear or see (voices, music, sounds, fonts, looks, colors, templates or images), let them preview each option before choosing: a sample to play or a thumbnail, from the Block's own files or the host's free samples, never a paid generation. Leave previews out only when the builder states there is nothing to preview. Choices StillMade owns, such as voices and models in the run review, already show their samples. Follow the host appearance (Light, Dark and White) and one elastic layout: stacked on a 320px phone with no sideways scroll (result first, action pinned), and from 860px the controls left (≤380px), the result filling the right. Short settings sit side by side (`sm-settings`; three or four short options as one `data-segmented` row); many items are one line each (`sm-list`) that open in place; input files are small tiles (`sm-gallery data-size="small"`); on a phone chip rows scroll sideways and long lists show three. Compacting moves controls, never deletes them.
 
 ### Shared editing
 
@@ -210,7 +210,7 @@ Optional custom view interfaces are supported, but generated manifest.ui control
 
 *When:* StillMade's builder adds this section when the person asks for an interface, preview or controls, or refines a Block that has one.
 
-A custom interface is the optional package-level view:{html,css?,themedCss?,javascript?}; when refining, preserve and refine base.view. Design it by StillMade's interface principles, in order: Function first: unless the person asks for a design direction, build from the Block kit (`sm-block`, `sm-stage`, `sm-choices`, `sm-actions`, `sm-more`) and ship little or no CSS of your own. A direction the person names wins over the kit. Show the thing being made: the preview, media or result gets the largest area (`sm-stage`). Never a JSON dump, source editor, manifest or diagnostic panel unless the task is about source. One obvious next action (`sm-primary`); peers are quiet buttons or named icons. Seven or fewer choices in view. The action button names what it does ("Write", "Generate image", "Make video"), never "Run", "Run step", "Submit" or "Review cost". Show no credit numbers: StillMade puts the price beside the verb on its own run button ("Write · 1 credit"), with a chip for the model, quality or count when they can change. Pressing it runs at that price; a confirmation appears only when the server price is higher. Pictures over words: choices people see or hear are thumbnails, swatches, samples or glyphs (`sm-choices`), not word lists. Icons carry an accessible name and tooltip; never emoji. Words only when needed. Drop what nobody needs to finish the task (intros, "how it works", restating the Block name). Words that might help start collapsed (`sm-hint`, `sm-more`). Errors, spending approvals, stale inputs and destructive steps stay visible, in few words. Strong defaults; secondary settings go in `sm-more`, closed. Compact: the whole Block fits one laptop screen without scrolling. A short setting is one row, its label beside the control; no card around a single control. Status is a dot or a few words ("No narration yet"), never a paragraph; the reason sits behind an `sm-hint`. Files are tiles: a saved file is a thumbnail or chip and adding one is a + tile. Never the bare browser file picker, and no size limits in view until a file is too big. Rare tools (update, schedule, history, reload) are named icon buttons beside the action, never sections under the work. An (i) beside anything a newcomer could misread: a setting, status or number whose effect is not obvious from its label gets a closed `sm-hint` with one or two sentences. Give every input that needs one a `description`; StillMade shows it as that (i). Obvious controls get none. One workspace: no cards inside cards, no second title, step counter or Back/Next bar; the host owns navigation. Status sits beside the action it describes (`sm-status`), in a few words. Keep the page in normal scroll flow; no sticky media or control strips unless the editing task needs them. Text scene descriptions are planning notes, never a storyboard or an approved frame. Its DOM controller is separate from manifest runtime code. The view may also declare appearance:"original" or "host". For an imported design, preserve its colors with appearance:"original" and view.css; no themed replacement is required. Preserve base.view.appearance when refining unless the user requests a change. Omitted/host appearance retains the existing Light, Dark and White requirement: supply semantic colors in view.css or a complete replacement view.themedCss. An original-style view may optionally supply valid themedCss for a StillMade appearance preview. Use StillMade variables (--bg,--fg,--fg-muted,--border-tok,--r-3) only when opting into host styling; do not redefine host tokens in the themed variant. Appearance never relaxes sandbox constraints: no CSS escapes/filters/blending, imports/url(), or element.style mutations in JS. Use classes for UI state; media pixels retain their colors. Both CSS fields have the same 32 KiB limit; all existing shared-state, security and permission checks still apply. Declare elements in html, bind with document.getElementById/querySelector and addEventListener; use literal property access, array methods, textContent, input.value, button.disabled and canvas. Initial values: StillMade.onInput(values=>{...}); await StillMade.run(inputBindings) returns validated output bindings from the isolated package runtime; catch errors and show results. No computation in the DOM controller; put it in code/recipe. Disable the action button while pending.
+A custom interface is the optional package-level view:{html,css?,themedCss?,javascript?}; when refining, preserve and refine base.view. Design it by StillMade's interface principles, in order: Function first: unless the person asks for a design direction, build from the Block kit (`sm-block`, `sm-stage`, `sm-choices`, `sm-actions`, `sm-more`) and ship little or no CSS of your own. A direction the person names wins over the kit. Show the thing being made: the preview, media or result gets the largest area (`sm-stage`). Never a JSON dump, source editor, manifest or diagnostic panel unless the task is about source. One obvious next action (`sm-primary`); peers are quiet buttons or named icons. Seven or fewer choices in view. The action button names what it does ("Write", "Generate image", "Make video"), never "Run", "Run step", "Submit" or "Review cost". Show no credit numbers: StillMade puts the price beside the verb on its own run button ("Write · 1 credit"), with a chip for the model, quality or count when they can change. Pressing it runs at that price; a confirmation appears only when the server price is higher. Pictures over words: choices people see or hear are thumbnails, swatches, samples or glyphs (`sm-choices`), not word lists. Icons carry an accessible name and tooltip; never emoji. Words only when needed. Drop what nobody needs to finish the task (intros, "how it works", restating the Block name). Words that might help start collapsed (`sm-hint`, `sm-more`). Errors, spending approvals, stale inputs and destructive steps stay visible, in few words. Strong defaults; secondary settings go in `sm-more`, closed. Compact: the whole Block fits one laptop screen without scrolling. A short setting is one row, its label beside the control; no card around a single control. Status is a dot or a few words ("No narration yet"), never a paragraph; the reason sits behind an `sm-hint`. Files are tiles: a saved file is a thumbnail or chip and adding one is a + tile. Never the bare browser file picker, and no size limits in view until a file is too big. Rare tools (update, schedule, history, reload) are named icon buttons beside the action, never sections under the work. An (i) beside anything a newcomer could misread: a setting, status or number whose effect is not obvious from its label gets a closed `sm-hint` with one or two sentences. Give every input that needs one a `description`; StillMade shows it as that (i). Obvious controls get none. One workspace: no cards inside cards, no second title, step counter or Back/Next bar; the host owns navigation. Status sits beside the action it describes (`sm-status`), in a few words. Keep the page in normal scroll flow; no sticky media or control strips unless the editing task needs them. Use the width: from 860px wide the kit puts the controls on the left at a reading width (300–380px) and the result (`sm-stage`) fills the right, in its real shape; under that everything stacks with the result first and the action within reach. Extra width goes to the result, never to wider text fields. Before there is a result, the stage previews what will be made from the inputs. `data-layout="stack"` opts out. Settings sit side by side (`sm-settings`), next to what they change. Three or four short options are one segmented row (`data-segmented`), not a row of big tiles. Lists fill the width at a small size: input files are small tiles (`sm-gallery data-size="small"`), many items are one line each (`sm-list`): a thumbnail, one line of text, a short fact. Tapping an item opens all of its fields in place. Extra width means more items per row, never bigger cards. On a phone chip and segment rows scroll sideways instead of wrapping; long lists show their first three with "N more" (`data-peek`) and long text five lines until tapped (`sm-clamp`). Nothing is lost when a Block gets smaller: every control stays on the screen, behind an (i), in `sm-more`, or inside the item it belongs to. Compacting moves controls; it never deletes them. Text scene descriptions are planning notes, never a storyboard or an approved frame. Its DOM controller is separate from manifest runtime code. The view may also declare appearance:"original" or "host". For an imported design, preserve its colors with appearance:"original" and view.css; no themed replacement is required. Preserve base.view.appearance when refining unless the user requests a change. Omitted/host appearance retains the existing Light, Dark and White requirement: supply semantic colors in view.css or a complete replacement view.themedCss. An original-style view may optionally supply valid themedCss for a StillMade appearance preview. Use StillMade variables (--bg,--fg,--fg-muted,--border-tok,--r-3) only when opting into host styling; do not redefine host tokens in the themed variant. Appearance never relaxes sandbox constraints: no CSS escapes/filters/blending, imports/url(), or element.style mutations in JS. Use classes for UI state; media pixels retain their colors. Both CSS fields have the same 32 KiB limit; all existing shared-state, security and permission checks still apply. Declare elements in html, bind with document.getElementById/querySelector and addEventListener; use literal property access, array methods, textContent, input.value, button.disabled and canvas. Initial values: StillMade.onInput(values=>{...}); await StillMade.run(inputBindings) returns validated output bindings from the isolated package runtime; catch errors and show results. No computation in the DOM controller; put it in code/recipe. Disable the action button while pending.
 Standard custom view code (no `view.config.json` frame runtime) is checked before it runs. These rules come straight from the validator; frame views run in their own sandbox and may build the page with ordinary DOM calls such as `createElement`:
 
 - **HTML elements:** only `div`, `section`, `article`, `header`, `footer`, `main`, `aside`, `nav`, `h1`, `h2`, `h3`, `h4`, `p`, `span`, `strong`, `em`, `i`, `small`, `br`, `hr`, `label`, `input`, `textarea`, `button`, `select`, `option`, `optgroup`, `fieldset`, `legend`, `output`, `progress`, `meter`, `ul`, `ol`, `li`, `dl`, `dt`, `dd`, `figure`, `figcaption`, `img`, `video`, `audio`, `source`, `canvas`, `table`, `thead`, `tbody`, `tfoot`, `tr`, `th`, `td`, `pre`, `code`, `details`, `summary`. No scripts, iframes, SVG, forms, comments or inline event attributes; media URLs must be `data:` or `blob:`.

package/SDK.md

@@ -182,7 +182,7 @@ The archive needs Node.js 22 or later and nothing else; its runtime is bundled,
 
 ## Block builder contract
 
-Contract `stillmade.block-builder@1.5.2`. Humans, coding agents, imported source, GitHub repositories and generated code all adapt to the Block platform; anything that becomes a StillMade Block obeys this contract.
+Contract `stillmade.block-builder@1.5.4`. Humans, coding agents, imported source, GitHub repositories and generated code all adapt to the Block platform; anything that becomes a StillMade Block obeys this contract.
 
 ### Source of truth
 
@@ -230,7 +230,7 @@ Give the Block a short, plain name of 40 characters or fewer that says what it d
 
 ### Interface
 
-If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction genuinely needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (Write, Generate; never "Run") and no price (StillMade's run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Expose the capability, not the implementation: meaningful controls, sensible defaults, preview, direct manipulation, progress, clear errors and visible outputs. Do not show raw JSON, internal IDs, filesystem details, provider terminology or developer settings unless the Block is itself a developer tool. When a person chooses among options they need to hear or see (voices, music, sounds, fonts, looks, colors, templates or images), let them preview each option before choosing: a sample to play or a thumbnail, from the Block's own files or the host's free samples, never a paid generation. Leave previews out only when the builder states there is nothing to preview. Choices StillMade owns, such as voices and models in the run review, already show their samples. Follow the host appearance (Light, Dark and White) and the mobile layout contract: one interface for every screen size that fits a 320 CSS-pixel phone without horizontal scrolling.
+If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction genuinely needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (Write, Generate; never "Run") and no price (StillMade's run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Expose the capability, not the implementation: sensible defaults, previews, progress, clear errors, visible outputs. Do not show raw JSON, internal IDs, filesystem details, provider terminology or developer settings unless the Block is itself a developer tool. When a person chooses among options they need to hear or see (voices, music, sounds, fonts, looks, colors, templates or images), let them preview each option before choosing: a sample to play or a thumbnail, from the Block's own files or the host's free samples, never a paid generation. Leave previews out only when the builder states there is nothing to preview. Choices StillMade owns, such as voices and models in the run review, already show their samples. Follow the host appearance (Light, Dark and White) and one elastic layout: stacked on a 320px phone with no sideways scroll (result first, action pinned), and from 860px the controls left (≤380px), the result filling the right. Short settings sit side by side (`sm-settings`; three or four short options as one `data-segmented` row); many items are one line each (`sm-list`) that open in place; input files are small tiles (`sm-gallery data-size="small"`); on a phone chip rows scroll sideways and long lists show three. Compacting moves controls, never deletes them.
 
 ### Shared editing
 
@@ -7224,9 +7224,9 @@ Ask the assistant to return source files or one `.stillmade.json` package. Run t
 
 <!-- builder-contract:start (generated by npm run build:sdk; do not edit) -->
 
-### Block builder contract (stillmade.block-builder@1.5.2)
+### Block builder contract (stillmade.block-builder@1.5.4)
 
-Contract `stillmade.block-builder@1.5.2`. Humans, coding agents, imported source, GitHub repositories and generated code all adapt to the Block platform; anything that becomes a StillMade Block obeys this contract.
+Contract `stillmade.block-builder@1.5.4`. Humans, coding agents, imported source, GitHub repositories and generated code all adapt to the Block platform; anything that becomes a StillMade Block obeys this contract.
 
 ### Source of truth
 
@@ -7274,7 +7274,7 @@ Give the Block a short, plain name of 40 characters or fewer that says what it d
 
 ### Interface
 
-If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction genuinely needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (Write, Generate; never "Run") and no price (StillMade's run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Expose the capability, not the implementation: meaningful controls, sensible defaults, preview, direct manipulation, progress, clear errors and visible outputs. Do not show raw JSON, internal IDs, filesystem details, provider terminology or developer settings unless the Block is itself a developer tool. When a person chooses among options they need to hear or see (voices, music, sounds, fonts, looks, colors, templates or images), let them preview each option before choosing: a sample to play or a thumbnail, from the Block's own files or the host's free samples, never a paid generation. Leave previews out only when the builder states there is nothing to preview. Choices StillMade owns, such as voices and models in the run review, already show their samples. Follow the host appearance (Light, Dark and White) and the mobile layout contract: one interface for every screen size that fits a 320 CSS-pixel phone without horizontal scrolling.
+If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction genuinely needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (Write, Generate; never "Run") and no price (StillMade's run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Expose the capability, not the implementation: sensible defaults, previews, progress, clear errors, visible outputs. Do not show raw JSON, internal IDs, filesystem details, provider terminology or developer settings unless the Block is itself a developer tool. When a person chooses among options they need to hear or see (voices, music, sounds, fonts, looks, colors, templates or images), let them preview each option before choosing: a sample to play or a thumbnail, from the Block's own files or the host's free samples, never a paid generation. Leave previews out only when the builder states there is nothing to preview. Choices StillMade owns, such as voices and models in the run review, already show their samples. Follow the host appearance (Light, Dark and White) and one elastic layout: stacked on a 320px phone with no sideways scroll (result first, action pinned), and from 860px the controls left (≤380px), the result filling the right. Short settings sit side by side (`sm-settings`; three or four short options as one `data-segmented` row); many items are one line each (`sm-list`) that open in place; input files are small tiles (`sm-gallery data-size="small"`); on a phone chip rows scroll sideways and long lists show three. Compacting moves controls, never deletes them.
 
 ### Shared editing
 
@@ -7432,7 +7432,7 @@ Optional custom view interfaces are supported, but generated manifest.ui control
 
 *When:* StillMade's builder adds this section when the person asks for an interface, preview or controls, or refines a Block that has one.
 
-A custom interface is the optional package-level view:{html,css?,themedCss?,javascript?}; when refining, preserve and refine base.view. Design it by StillMade's interface principles, in order: Function first: unless the person asks for a design direction, build from the Block kit (`sm-block`, `sm-stage`, `sm-choices`, `sm-actions`, `sm-more`) and ship little or no CSS of your own. A direction the person names wins over the kit. Show the thing being made: the preview, media or result gets the largest area (`sm-stage`). Never a JSON dump, source editor, manifest or diagnostic panel unless the task is about source. One obvious next action (`sm-primary`); peers are quiet buttons or named icons. Seven or fewer choices in view. The action button names what it does ("Write", "Generate image", "Make video"), never "Run", "Run step", "Submit" or "Review cost". Show no credit numbers: StillMade puts the price beside the verb on its own run button ("Write · 1 credit"), with a chip for the model, quality or count when they can change. Pressing it runs at that price; a confirmation appears only when the server price is higher. Pictures over words: choices people see or hear are thumbnails, swatches, samples or glyphs (`sm-choices`), not word lists. Icons carry an accessible name and tooltip; never emoji. Words only when needed. Drop what nobody needs to finish the task (intros, "how it works", restating the Block name). Words that might help start collapsed (`sm-hint`, `sm-more`). Errors, spending approvals, stale inputs and destructive steps stay visible, in few words. Strong defaults; secondary settings go in `sm-more`, closed. Compact: the whole Block fits one laptop screen without scrolling. A short setting is one row, its label beside the control; no card around a single control. Status is a dot or a few words ("No narration yet"), never a paragraph; the reason sits behind an `sm-hint`. Files are tiles: a saved file is a thumbnail or chip and adding one is a + tile. Never the bare browser file picker, and no size limits in view until a file is too big. Rare tools (update, schedule, history, reload) are named icon buttons beside the action, never sections under the work. An (i) beside anything a newcomer could misread: a setting, status or number whose effect is not obvious from its label gets a closed `sm-hint` with one or two sentences. Give every input that needs one a `description`; StillMade shows it as that (i). Obvious controls get none. One workspace: no cards inside cards, no second title, step counter or Back/Next bar; the host owns navigation. Status sits beside the action it describes (`sm-status`), in a few words. Keep the page in normal scroll flow; no sticky media or control strips unless the editing task needs them. Text scene descriptions are planning notes, never a storyboard or an approved frame. Its DOM controller is separate from manifest runtime code. The view may also declare appearance:"original" or "host". For an imported design, preserve its colors with appearance:"original" and view.css; no themed replacement is required. Preserve base.view.appearance when refining unless the user requests a change. Omitted/host appearance retains the existing Light, Dark and White requirement: supply semantic colors in view.css or a complete replacement view.themedCss. An original-style view may optionally supply valid themedCss for a StillMade appearance preview. Use StillMade variables (--bg,--fg,--fg-muted,--border-tok,--r-3) only when opting into host styling; do not redefine host tokens in the themed variant. Appearance never relaxes sandbox constraints: no CSS escapes/filters/blending, imports/url(), or element.style mutations in JS. Use classes for UI state; media pixels retain their colors. Both CSS fields have the same 32 KiB limit; all existing shared-state, security and permission checks still apply. Declare elements in html, bind with document.getElementById/querySelector and addEventListener; use literal property access, array methods, textContent, input.value, button.disabled and canvas. Initial values: StillMade.onInput(values=>{...}); await StillMade.run(inputBindings) returns validated output bindings from the isolated package runtime; catch errors and show results. No computation in the DOM controller; put it in code/recipe. Disable the action button while pending.
+A custom interface is the optional package-level view:{html,css?,themedCss?,javascript?}; when refining, preserve and refine base.view. Design it by StillMade's interface principles, in order: Function first: unless the person asks for a design direction, build from the Block kit (`sm-block`, `sm-stage`, `sm-choices`, `sm-actions`, `sm-more`) and ship little or no CSS of your own. A direction the person names wins over the kit. Show the thing being made: the preview, media or result gets the largest area (`sm-stage`). Never a JSON dump, source editor, manifest or diagnostic panel unless the task is about source. One obvious next action (`sm-primary`); peers are quiet buttons or named icons. Seven or fewer choices in view. The action button names what it does ("Write", "Generate image", "Make video"), never "Run", "Run step", "Submit" or "Review cost". Show no credit numbers: StillMade puts the price beside the verb on its own run button ("Write · 1 credit"), with a chip for the model, quality or count when they can change. Pressing it runs at that price; a confirmation appears only when the server price is higher. Pictures over words: choices people see or hear are thumbnails, swatches, samples or glyphs (`sm-choices`), not word lists. Icons carry an accessible name and tooltip; never emoji. Words only when needed. Drop what nobody needs to finish the task (intros, "how it works", restating the Block name). Words that might help start collapsed (`sm-hint`, `sm-more`). Errors, spending approvals, stale inputs and destructive steps stay visible, in few words. Strong defaults; secondary settings go in `sm-more`, closed. Compact: the whole Block fits one laptop screen without scrolling. A short setting is one row, its label beside the control; no card around a single control. Status is a dot or a few words ("No narration yet"), never a paragraph; the reason sits behind an `sm-hint`. Files are tiles: a saved file is a thumbnail or chip and adding one is a + tile. Never the bare browser file picker, and no size limits in view until a file is too big. Rare tools (update, schedule, history, reload) are named icon buttons beside the action, never sections under the work. An (i) beside anything a newcomer could misread: a setting, status or number whose effect is not obvious from its label gets a closed `sm-hint` with one or two sentences. Give every input that needs one a `description`; StillMade shows it as that (i). Obvious controls get none. One workspace: no cards inside cards, no second title, step counter or Back/Next bar; the host owns navigation. Status sits beside the action it describes (`sm-status`), in a few words. Keep the page in normal scroll flow; no sticky media or control strips unless the editing task needs them. Use the width: from 860px wide the kit puts the controls on the left at a reading width (300–380px) and the result (`sm-stage`) fills the right, in its real shape; under that everything stacks with the result first and the action within reach. Extra width goes to the result, never to wider text fields. Before there is a result, the stage previews what will be made from the inputs. `data-layout="stack"` opts out. Settings sit side by side (`sm-settings`), next to what they change. Three or four short options are one segmented row (`data-segmented`), not a row of big tiles. Lists fill the width at a small size: input files are small tiles (`sm-gallery data-size="small"`), many items are one line each (`sm-list`): a thumbnail, one line of text, a short fact. Tapping an item opens all of its fields in place. Extra width means more items per row, never bigger cards. On a phone chip and segment rows scroll sideways instead of wrapping; long lists show their first three with "N more" (`data-peek`) and long text five lines until tapped (`sm-clamp`). Nothing is lost when a Block gets smaller: every control stays on the screen, behind an (i), in `sm-more`, or inside the item it belongs to. Compacting moves controls; it never deletes them. Text scene descriptions are planning notes, never a storyboard or an approved frame. Its DOM controller is separate from manifest runtime code. The view may also declare appearance:"original" or "host". For an imported design, preserve its colors with appearance:"original" and view.css; no themed replacement is required. Preserve base.view.appearance when refining unless the user requests a change. Omitted/host appearance retains the existing Light, Dark and White requirement: supply semantic colors in view.css or a complete replacement view.themedCss. An original-style view may optionally supply valid themedCss for a StillMade appearance preview. Use StillMade variables (--bg,--fg,--fg-muted,--border-tok,--r-3) only when opting into host styling; do not redefine host tokens in the themed variant. Appearance never relaxes sandbox constraints: no CSS escapes/filters/blending, imports/url(), or element.style mutations in JS. Use classes for UI state; media pixels retain their colors. Both CSS fields have the same 32 KiB limit; all existing shared-state, security and permission checks still apply. Declare elements in html, bind with document.getElementById/querySelector and addEventListener; use literal property access, array methods, textContent, input.value, button.disabled and canvas. Initial values: StillMade.onInput(values=>{...}); await StillMade.run(inputBindings) returns validated output bindings from the isolated package runtime; catch errors and show results. No computation in the DOM controller; put it in code/recipe. Disable the action button while pending.
 Standard custom view code (no `view.config.json` frame runtime) is checked before it runs. These rules come straight from the validator; frame views run in their own sandbox and may build the page with ordinary DOM calls such as `createElement`:
 
 - **HTML elements:** only `div`, `section`, `article`, `header`, `footer`, `main`, `aside`, `nav`, `h1`, `h2`, `h3`, `h4`, `p`, `span`, `strong`, `em`, `i`, `small`, `br`, `hr`, `label`, `input`, `textarea`, `button`, `select`, `option`, `optgroup`, `fieldset`, `legend`, `output`, `progress`, `meter`, `ul`, `ol`, `li`, `dl`, `dt`, `dd`, `figure`, `figcaption`, `img`, `video`, `audio`, `source`, `canvas`, `table`, `thead`, `tbody`, `tfoot`, `tr`, `th`, `td`, `pre`, `code`, `details`, `summary`. No scripts, iframes, SVG, forms, comments or inline event attributes; media URLs must be `data:` or `blob:`.
@@ -9554,13 +9554,16 @@ piece in Light, Dark and White.
 | `sm-block` | The one workspace. `data-layout="split"` puts the stage beside the controls on wide screens. |
 | `sm-stage` | The thing being made: preview, media or result. `data-ratio="16:9"`, `"9:16"` or `"1:1"`. |
 | `sm-empty` | An empty stage: a glyph, at most five words, one action. |
-| `sm-choices` | Picks shown as pictures (`img`, `.sm-swatch`, `.sm-glyph`) and one or two words. `data-compact` for short text chips. Give the `fieldset` an `id` and `data-stillmade-share` so teammates see the same pick. |
+| `sm-choices` | Picks shown as pictures (`img`, `.sm-swatch`, `.sm-glyph`) and one or two words. `data-compact` for short text chips, `data-segmented` for one connected row of three or four short options. Chips and segments scroll sideways on a phone. Give the `fieldset` an `id` and `data-stillmade-share` so teammates see the same pick. |
 | `sm-field`, `sm-fields` | A short label above one control; a responsive group of them. |
+| `sm-settings` | Short settings side by side, each label above its control. |
+| `sm-list` | Many items, one line each: a thumbnail, one line of text, a short fact. An item that opens in place is an `li` holding a `details`. `data-peek` shows three on a phone, with a last `li.sm-list-more` button that sets `data-open`. |
+| `sm-clamp` | Long text that shows five lines on a phone until it gets `data-open`. |
 | `sm-actions` | One `sm-primary`, then `sm-quiet` buttons and `sm-icon` buttons (each with `aria-label` and `title`). |
 | `sm-status` | Live state beside the action: `data-state="loading"`, `"success"`, `"waiting"` or `"error"`. |
 | `sm-more` | A closed `<details>` for secondary settings. |
 | `sm-hint` | A closed `<details>` info toggle for an explanation that might help. |
-| `sm-gallery` | A grid of results or media. |
+| `sm-gallery` | A grid of results or media. `data-size="small"` for input files: more tiles per row as the screen widens. |
 | `sm-glyph` | A small icon in `currentColor`: `play`, `pause`, `plus`, `close`, `check`, `chevron`, `upload`, `image`, `video`, `audio`, `text`, `spark`, `info`, `warning`, `spinner`. Works in standard views, which cannot use SVG. |
 
 **Function first.** When the person building a Block does not ask for a look,
@@ -9637,6 +9640,28 @@ exception, never unrelated technical UI.
     or two plain sentences. On generated controls StillMade shows the input's
     `description` as that (i), so write a `description` for every input that
     needs one. Obvious controls ("Photos", "Tone") get none.
+16. Use the width. From 860 px wide, the kit puts the controls on the left
+    at a reading width (300–380 px) and the result (`sm-stage`, a direct
+    child of `sm-block`) fills the right, in its real shape. Under that the
+    page is one column: result first, then the controls, with the action
+    within reach. Extra width goes to the result, never to wider text
+    fields. Before there is a result, the stage previews what will be made
+    from the inputs given so far, not an empty box. `data-layout="stack"`
+    keeps one column.
+17. Settings sit side by side, next to what they change. Short settings are
+    an `sm-settings` grid, and three or four short options (Low / Med /
+    High, 16:9 / 9:16 / 1:1) are one `data-segmented` row, not big tiles.
+18. Lists fill the width at a small size. Input files are `sm-gallery
+    data-size="small"` tiles; many items (shots, scenes, rows) are an
+    `sm-list`, one line each with a thumbnail, one line of text and a short
+    fact, and tapping an item opens all of its fields in place. Extra width
+    means more items per row, never bigger cards.
+19. On a phone, chip and segment rows scroll sideways instead of wrapping,
+    long lists show their first three and "N more" (`sm-list data-peek`),
+    and long text shows five lines until tapped (`sm-clamp`).
+20. Nothing is lost when a Block gets smaller. Every control stays on the
+    screen, behind an (i), in `sm-more`, or inside the item it belongs to.
+    Compacting moves controls; it never deletes them.
 
 ### 4. What StillMade checks
 
@@ -12299,7 +12324,7 @@ Optional custom view interfaces are supported, but generated manifest.ui control
 
 *When:* StillMade's builder adds this section when the person asks for an interface, preview or controls, or refines a Block that has one.
 
-A custom interface is the optional package-level view:{html,css?,themedCss?,javascript?}; when refining, preserve and refine base.view. Design it by StillMade's interface principles, in order: Function first: unless the person asks for a design direction, build from the Block kit (`sm-block`, `sm-stage`, `sm-choices`, `sm-actions`, `sm-more`) and ship little or no CSS of your own. A direction the person names wins over the kit. Show the thing being made: the preview, media or result gets the largest area (`sm-stage`). Never a JSON dump, source editor, manifest or diagnostic panel unless the task is about source. One obvious next action (`sm-primary`); peers are quiet buttons or named icons. Seven or fewer choices in view. The action button names what it does ("Write", "Generate image", "Make video"), never "Run", "Run step", "Submit" or "Review cost". Show no credit numbers: StillMade puts the price beside the verb on its own run button ("Write · 1 credit"), with a chip for the model, quality or count when they can change. Pressing it runs at that price; a confirmation appears only when the server price is higher. Pictures over words: choices people see or hear are thumbnails, swatches, samples or glyphs (`sm-choices`), not word lists. Icons carry an accessible name and tooltip; never emoji. Words only when needed. Drop what nobody needs to finish the task (intros, "how it works", restating the Block name). Words that might help start collapsed (`sm-hint`, `sm-more`). Errors, spending approvals, stale inputs and destructive steps stay visible, in few words. Strong defaults; secondary settings go in `sm-more`, closed. Compact: the whole Block fits one laptop screen without scrolling. A short setting is one row, its label beside the control; no card around a single control. Status is a dot or a few words ("No narration yet"), never a paragraph; the reason sits behind an `sm-hint`. Files are tiles: a saved file is a thumbnail or chip and adding one is a + tile. Never the bare browser file picker, and no size limits in view until a file is too big. Rare tools (update, schedule, history, reload) are named icon buttons beside the action, never sections under the work. An (i) beside anything a newcomer could misread: a setting, status or number whose effect is not obvious from its label gets a closed `sm-hint` with one or two sentences. Give every input that needs one a `description`; StillMade shows it as that (i). Obvious controls get none. One workspace: no cards inside cards, no second title, step counter or Back/Next bar; the host owns navigation. Status sits beside the action it describes (`sm-status`), in a few words. Keep the page in normal scroll flow; no sticky media or control strips unless the editing task needs them. Text scene descriptions are planning notes, never a storyboard or an approved frame. Its DOM controller is separate from manifest runtime code. The view may also declare appearance:"original" or "host". For an imported design, preserve its colors with appearance:"original" and view.css; no themed replacement is required. Preserve base.view.appearance when refining unless the user requests a change. Omitted/host appearance retains the existing Light, Dark and White requirement: supply semantic colors in view.css or a complete replacement view.themedCss. An original-style view may optionally supply valid themedCss for a StillMade appearance preview. Use StillMade variables (--bg,--fg,--fg-muted,--border-tok,--r-3) only when opting into host styling; do not redefine host tokens in the themed variant. Appearance never relaxes sandbox constraints: no CSS escapes/filters/blending, imports/url(), or element.style mutations in JS. Use classes for UI state; media pixels retain their colors. Both CSS fields have the same 32 KiB limit; all existing shared-state, security and permission checks still apply. Declare elements in html, bind with document.getElementById/querySelector and addEventListener; use literal property access, array methods, textContent, input.value, button.disabled and canvas. Initial values: StillMade.onInput(values=>{...}); await StillMade.run(inputBindings) returns validated output bindings from the isolated package runtime; catch errors and show results. No computation in the DOM controller; put it in code/recipe. Disable the action button while pending.
+A custom interface is the optional package-level view:{html,css?,themedCss?,javascript?}; when refining, preserve and refine base.view. Design it by StillMade's interface principles, in order: Function first: unless the person asks for a design direction, build from the Block kit (`sm-block`, `sm-stage`, `sm-choices`, `sm-actions`, `sm-more`) and ship little or no CSS of your own. A direction the person names wins over the kit. Show the thing being made: the preview, media or result gets the largest area (`sm-stage`). Never a JSON dump, source editor, manifest or diagnostic panel unless the task is about source. One obvious next action (`sm-primary`); peers are quiet buttons or named icons. Seven or fewer choices in view. The action button names what it does ("Write", "Generate image", "Make video"), never "Run", "Run step", "Submit" or "Review cost". Show no credit numbers: StillMade puts the price beside the verb on its own run button ("Write · 1 credit"), with a chip for the model, quality or count when they can change. Pressing it runs at that price; a confirmation appears only when the server price is higher. Pictures over words: choices people see or hear are thumbnails, swatches, samples or glyphs (`sm-choices`), not word lists. Icons carry an accessible name and tooltip; never emoji. Words only when needed. Drop what nobody needs to finish the task (intros, "how it works", restating the Block name). Words that might help start collapsed (`sm-hint`, `sm-more`). Errors, spending approvals, stale inputs and destructive steps stay visible, in few words. Strong defaults; secondary settings go in `sm-more`, closed. Compact: the whole Block fits one laptop screen without scrolling. A short setting is one row, its label beside the control; no card around a single control. Status is a dot or a few words ("No narration yet"), never a paragraph; the reason sits behind an `sm-hint`. Files are tiles: a saved file is a thumbnail or chip and adding one is a + tile. Never the bare browser file picker, and no size limits in view until a file is too big. Rare tools (update, schedule, history, reload) are named icon buttons beside the action, never sections under the work. An (i) beside anything a newcomer could misread: a setting, status or number whose effect is not obvious from its label gets a closed `sm-hint` with one or two sentences. Give every input that needs one a `description`; StillMade shows it as that (i). Obvious controls get none. One workspace: no cards inside cards, no second title, step counter or Back/Next bar; the host owns navigation. Status sits beside the action it describes (`sm-status`), in a few words. Keep the page in normal scroll flow; no sticky media or control strips unless the editing task needs them. Use the width: from 860px wide the kit puts the controls on the left at a reading width (300–380px) and the result (`sm-stage`) fills the right, in its real shape; under that everything stacks with the result first and the action within reach. Extra width goes to the result, never to wider text fields. Before there is a result, the stage previews what will be made from the inputs. `data-layout="stack"` opts out. Settings sit side by side (`sm-settings`), next to what they change. Three or four short options are one segmented row (`data-segmented`), not a row of big tiles. Lists fill the width at a small size: input files are small tiles (`sm-gallery data-size="small"`), many items are one line each (`sm-list`): a thumbnail, one line of text, a short fact. Tapping an item opens all of its fields in place. Extra width means more items per row, never bigger cards. On a phone chip and segment rows scroll sideways instead of wrapping; long lists show their first three with "N more" (`data-peek`) and long text five lines until tapped (`sm-clamp`). Nothing is lost when a Block gets smaller: every control stays on the screen, behind an (i), in `sm-more`, or inside the item it belongs to. Compacting moves controls; it never deletes them. Text scene descriptions are planning notes, never a storyboard or an approved frame. Its DOM controller is separate from manifest runtime code. The view may also declare appearance:"original" or "host". For an imported design, preserve its colors with appearance:"original" and view.css; no themed replacement is required. Preserve base.view.appearance when refining unless the user requests a change. Omitted/host appearance retains the existing Light, Dark and White requirement: supply semantic colors in view.css or a complete replacement view.themedCss. An original-style view may optionally supply valid themedCss for a StillMade appearance preview. Use StillMade variables (--bg,--fg,--fg-muted,--border-tok,--r-3) only when opting into host styling; do not redefine host tokens in the themed variant. Appearance never relaxes sandbox constraints: no CSS escapes/filters/blending, imports/url(), or element.style mutations in JS. Use classes for UI state; media pixels retain their colors. Both CSS fields have the same 32 KiB limit; all existing shared-state, security and permission checks still apply. Declare elements in html, bind with document.getElementById/querySelector and addEventListener; use literal property access, array methods, textContent, input.value, button.disabled and canvas. Initial values: StillMade.onInput(values=>{...}); await StillMade.run(inputBindings) returns validated output bindings from the isolated package runtime; catch errors and show results. No computation in the DOM controller; put it in code/recipe. Disable the action button while pending.
 Standard custom view code (no `view.config.json` frame runtime) is checked before it runs. These rules come straight from the validator; frame views run in their own sandbox and may build the page with ordinary DOM calls such as `createElement`:
 
 - **HTML elements:** only `div`, `section`, `article`, `header`, `footer`, `main`, `aside`, `nav`, `h1`, `h2`, `h3`, `h4`, `p`, `span`, `strong`, `em`, `i`, `small`, `br`, `hr`, `label`, `input`, `textarea`, `button`, `select`, `option`, `optgroup`, `fieldset`, `legend`, `output`, `progress`, `meter`, `ul`, `ol`, `li`, `dl`, `dt`, `dd`, `figure`, `figcaption`, `img`, `video`, `audio`, `source`, `canvas`, `table`, `thead`, `tbody`, `tfoot`, `tr`, `th`, `td`, `pre`, `code`, `details`, `summary`. No scripts, iframes, SVG, forms, comments or inline event attributes; media URLs must be `data:` or `blob:`.

package/UI_AESTHETIC.md

@@ -218,6 +218,22 @@ before/after examples from an Image Panels project (Voiceover 1,210 px to about
   whose effect isn't obvious from its label gets a small info toggle with one or
   two plain sentences. Obvious controls get none. On Steps the (i) comes from the
   input's `description`.
+- Use the width (October 19, 2026): from about 860 px wide, controls sit on the
+  left at 300–380 px and the result fills the right in its real shape; extra
+  width goes to the result, never to wider fields. Before there is a result,
+  the right side previews what will be made from the inputs. Under 860 px it is
+  one elastic column, result first, with the action pinned to the bottom on a
+  phone. Mockup: `docs/ui-review/wide-step-layout.html`.
+- Settings sit side by side next to what they change (a grid of short
+  segmented controls, not rows of big tiles). Lists fill the width at a small
+  size: photos are small tiles, shots are one line each and open in place.
+  On a phone, choice rows scroll sideways, long lists show the first few and
+  "6 more", long text shows five lines. Kit: `sm-settings`,
+  `sm-choices[data-segmented]`, `sm-gallery[data-size="small"]`, `sm-list`,
+  `sm-clamp`.
+- Nothing is lost when a screen gets smaller: every control stays, behind an
+  (i), in a one-tap menu, or inside the item it belongs to. The dealership
+  Steps with every control accounted for: `docs/ui-review/wide-steps.html`.
 - Mockups: `docs/ui-review/compact-principles.html`.
 
 ## Icon preference

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stillmade-sdk",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "StillMade Block SDK, CLI and examples",
   "license": "PolyForm-Shield-1.0.0",
   "type": "module",

package/packages/block-cli/dev-host/assets/host.js

@@ -1401,6 +1401,8 @@ label:has(> textarea) {
    The shape of a Block page, top to bottom:
      .sm-block      one workspace, no cards inside cards
        .sm-stage    the thing being made (preview, media, result); biggest area
+       .sm-settings settings side by side; .sm-choices[data-segmented] for short ones
+       .sm-list     many items, one line each; an item opens in place
        .sm-choices  picks shown as pictures or icons, not word lists
        .sm-shape    a frame shape at its real ratio (style="--r:9/16")
        .sm-field    the few inputs a person actually needs
@@ -1424,7 +1426,21 @@ label:has(> textarea) {
  :where(.sm-block[data-layout="split"]){grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);align-items:start}
  :where(.sm-block[data-layout="split"]) > :where(.sm-stage){grid-row:span 6}
 }
+/* Wide views (October 19, 2026): the controls keep a reading width on the left and
+   the result fills the rest on the right. Under 860px everything stacks with the
+   result first. data-layout="stack" opts out; "split" keeps its older layout. */
+@container (min-width:860px){
+ :where(.sm-block:not([data-layout]):has(> .sm-stage)){grid-template-columns:minmax(300px,380px) minmax(0,1fr);align-items:start;column-gap:var(--s-5,24px);row-gap:var(--s-4,16px)}
+ :where(.sm-block:not([data-layout]):has(> .sm-stage)) > :where(*){grid-column:1}
+ :where(.sm-block:not([data-layout]):has(> .sm-stage)) > :where(.sm-stage){grid-column:2;grid-row:1 / span 12;align-self:stretch;min-height:min(70vh,640px)}
+ /* A stage with a real shape keeps it: a min-height would widen a 16:9 stage past its column. */
+ :where(.sm-block:not([data-layout]):has(> .sm-stage)) > :where(.sm-stage[data-ratio]){align-self:start;min-height:0}
+}
 :where(.sm-row){display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2,8px)}
+/* Long text shows five lines on a phone until someone opens it (data-open). */
+@container (max-width:519px){
+ :where(.sm-clamp:not([data-open])){display:-webkit-box;-webkit-line-clamp:var(--sm-lines,5);-webkit-box-orient:vertical;overflow:hidden}
+}
 
 /* ---------- The stage: the object being made gets the main surface ---------- */
 :where(.sm-stage){position:relative;display:grid;place-items:center;min-height:220px;padding:var(--s-3,12px);border-radius:var(--r-3,8px);background:var(--bg-inset);overflow:hidden}
@@ -1465,8 +1481,8 @@ label:has(> textarea) {
 :where(.sm-fields){display:grid;gap:var(--s-4,16px);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
 /* Compact: on a view wider than a phone a short field is one row, its label beside the control. */
 @container (min-width:520px){
- /* Picture choices keep the full width: their legend is their label, and the tiles need the row. */
- :where(.sm-field:not(:has(textarea,.sm-choices))){grid-template-columns:minmax(5rem,9rem) minmax(0,1fr);align-items:center;gap:var(--s-2,8px)}
+ /* Picture choices, file tiles and lists keep the full width: their label sits above, and they need the row. */
+ :where(.sm-field:not(:has(textarea,.sm-choices,.sm-gallery,.sm-list))){grid-template-columns:minmax(5rem,9rem) minmax(0,1fr);align-items:center;gap:var(--s-2,8px)}
  :where(.sm-field) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select){min-height:36px;padding:6px 10px}
  :where(.sm-fields){gap:var(--s-2,8px) var(--s-4,16px)}
 }
@@ -1493,12 +1509,54 @@ label:has(> textarea) {
 :where(.sm-choices) :where(.sm-shape){--sm-shape-size:36px;align-self:center;margin:6px auto 2px}
 :where(.sm-choices[data-compact]) :where(.sm-shape){--sm-shape-size:20px;margin:0}
 
+/* Segmented: three or four short words or numbers in one connected row (Low / Med / High). */
+:where(.sm-choices[data-segmented]){display:flex;gap:0;width:fit-content;max-width:100%}
+:where(.sm-choices[data-segmented]) > :where(label){display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:4px 12px;border-radius:0;font-size:var(--fs-body-s,.875rem);white-space:nowrap}
+:where(.sm-choices[data-segmented]) > :where(label + label){margin-inline-start:-1px}
+:where(.sm-choices[data-segmented]) > :where(label:first-of-type){border-start-start-radius:var(--r-pill,999px);border-end-start-radius:var(--r-pill,999px)}
+:where(.sm-choices[data-segmented]) > :where(label:last-of-type){border-start-end-radius:var(--r-pill,999px);border-end-end-radius:var(--r-pill,999px)}
+:where(.sm-choices[data-segmented]) > :where(label:has(input:checked)){position:relative;z-index:1;background:var(--bg-elev-2)}
+:where(.sm-choices[data-segmented]) :where(.sm-glyph){--sm-glyph-size:16px;margin:0}
+/* Settings side by side: a grid of short settings, each label above its control. */
+:where(.sm-settings){display:grid;gap:var(--s-3,12px) var(--s-4,16px);grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr));align-items:start;min-width:0}
+:where(.sm-settings) > :where(.sm-field){grid-template-columns:minmax(0,1fr);gap:4px}
+:where(.sm-settings) > :where(.sm-choices) > :where(legend),:where(.sm-settings) :where(.sm-label){font-size:var(--fs-caption,.8125rem)}
+/* On a phone, a row of chips or segments scrolls sideways instead of wrapping. */
+@container (max-width:519px){
+ :where(.sm-choices[data-compact],.sm-choices[data-segmented]){display:flex;flex-wrap:nowrap;width:auto;overflow-x:auto;scrollbar-width:none}
+ :where(.sm-choices[data-compact]) > :where(label){flex:none}
+ :where(.sm-choices[data-segmented]) > :where(label){flex:none}
+}
+
+/* ---------- One-line list: many items, one short row each ----------
+   <ol class="sm-list"><li><img alt=""><span class="sm-line">Text</span><small>Wide</small></li></ol>
+   An item that opens in place is <li><details><summary>…the row…</summary>…its fields…</details></li>.
+   data-peek shows the first three on a phone, with a last <li class="sm-list-more"> button to open the rest. */
+:where(.sm-list){display:grid;margin:0;padding:0;list-style:none;border:1px solid var(--border-tok);border-radius:var(--r-3,8px);background:var(--bg-elev-1);min-width:0;overflow:hidden}
+:where(.sm-list) > :where(li){display:flex;align-items:center;gap:var(--s-2,8px);min-width:0;min-height:40px;padding:4px var(--s-2,8px);border-bottom:1px solid var(--divider)}
+:where(.sm-list) > :where(li:last-child){border-bottom:0}
+:where(.sm-list) > :where(li:has(> details)){display:block;padding:0}
+:where(.sm-list) > :where(li) > :where(details) > :where(summary){display:flex;align-items:center;gap:var(--s-2,8px);min-height:40px;padding:4px var(--s-2,8px);list-style:none;cursor:pointer}
+:where(.sm-list) > :where(li) > :where(details) > :where(summary)::-webkit-details-marker{display:none}
+:where(.sm-list) > :where(li) > :where(details[open]){background:var(--bg-inset)}
+:where(.sm-list) > :where(li) > :where(details) > :where(:not(summary)){padding:var(--s-2,8px) var(--s-3,12px) var(--s-3,12px)}
+:where(.sm-list) :where(img,video,canvas,.sm-swatch){flex:none;width:40px;height:26px;object-fit:cover;border-radius:var(--r-2,4px);background:var(--bg-inset)}
+:where(.sm-list) :where(.sm-line){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+:where(.sm-list) :where(small){flex:none;color:var(--fg-subtle);font-size:var(--fs-caption,.8125rem);white-space:nowrap;font-variant-numeric:tabular-nums}
+:where(.sm-list) > :where(.sm-list-more){display:none}
+@container (max-width:519px){
+ :where(.sm-list[data-peek]:not([data-open])) > :where(li:nth-child(n+4):not(.sm-list-more)){display:none}
+ :where(.sm-list[data-peek]:not([data-open])) > :where(.sm-list-more){display:flex;color:var(--fg-muted)}
+}
+
 /* ---------- Media gallery ---------- */
 :where(.sm-gallery){display:grid;gap:var(--s-2,8px);grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--sm-tile,140px)),1fr));margin:0;padding:0;list-style:none}
 :where(.sm-gallery) > :where(*){position:relative;margin:0;border-radius:var(--r-3,8px);overflow:hidden;background:var(--bg-inset)}
 :where(.sm-gallery) :where(img,video,canvas){display:block;width:100%;aspect-ratio:var(--sm-tile-ratio,1);object-fit:cover}
 :where(.sm-gallery) :where(figcaption){padding:6px 8px;font-size:var(--fs-caption,.8125rem);color:var(--fg-muted)}
 :where(.sm-gallery) :where([aria-selected="true"],.is-selected){box-shadow:inset 0 0 0 2px var(--fg)}
+/* Small tiles: more per row as the screen widens, never bigger tiles. */
+:where(.sm-gallery[data-size="small"]){--sm-tile:92px;--sm-tile-ratio:3/2}
 
 /* ---------- Status: a glyph and a few words, next to the action ---------- */
 :where(.sm-status){display:inline-flex;align-items:center;gap:var(--s-2,8px);min-height:24px;font-size:var(--fs-body-s,.875rem);color:var(--fg-muted)}

package/packages/block-cli/dev-host/assets/index.css

@@ -1 +1 @@
-@font-face{font-family:Hanken Grotesk;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/HankenGrotesk-Variable.ttf)format("truetype")}@font-face{font-family:Hanken Grotesk;font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/HankenGrotesk-Italic-Variable.ttf)format("truetype")}:root{--cream-50:#fdfaf1;--cream-100:#f7f0db;--cream-200:#ece3c9;--cream-300:#dcd2b5;--cream-600:#4e483a;--ink-50:#f2f0ec;--ink-100:#c9c6be;--ink-300:#4a4843;--ink-400:#26241f;--ink-500:#16140f;--ink-600:#0a0a0a;--signal:#e8b23a;--signal-dim:#e8b23a26;--signal-glow:#e8b23a4d;--font-display:"Balgin", "Hanken Grotesk", ui-sans-serif, sans-serif;--font-body:"Hanken Grotesk", ui-sans-serif, sans-serif;--font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--font:var(--font-body);--fs-display-xl:clamp(72px, 14vw, 220px);--fs-display-l:clamp(56px, 9vw, 144px);--fs-display-m:clamp(40px, 6vw, 96px);--fs-h4:1.25rem;--fs-body:1rem;--fs-body-s:.875rem;--fs-caption:.8125rem;--fs-micro:.75rem;--tr-display:-.02em;--tr-body:-.005em;--tr-micro:.08em;--lh-display:.92;--lh-tight:1.05;--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;--s-11:192px;--page-gutter:clamp(20px, 3vw, 48px);--page-gutter-compact:clamp(16px, 5vw, 24px);--page-section-gap:clamp(32px, 5vw, 64px);--content-readable:720px;--content-wide:1440px;--control-height:40px;--touch-target:44px;--mobile-dock-height:66px;--z-nav:30;--hover:var(--hover-wash);--r-0:0;--r-1:2px;--r-2:4px;--r-3:8px;--r-pill:999px;--radius-sm:var(--r-2);--radius:var(--r-3);--radius-lg:var(--r-3);--bw-hair:.5px;--bw-1:1px;--bw-2:2px;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--dur-instant:80ms;--dur-fast:.16s;--dur-base:.24s;--dur-slow:.48s;--dur-reveal:.72s}:root,[data-mode=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#101010;--bg-elev-1:#232221;--bg-elev-2:#33312f;--bg-inset:#171716;--fg:#f3eee5;--fg-muted:#bbb2a7;--fg-subtle:#f3eee594;--fg-on-accent:#191716;--border-tok:#58534d;--border-strong:#8b7e6f;--divider:#393735;--signal:#d0ae77;--signal-dim:#d0ae7726;--signal-glow:#d0ae774d;--hover-wash:#f7f0db0f;--press-wash:#f7f0db1f;--selection-bg:var(--cream-100);--selection-fg:var(--ink-600);--shadow-1:0 1px 0 #f7f0db0a inset, 0 4px 12px #00000080;--shadow-2:0 1px 0 #f7f0db0f inset, 0 16px 48px #0009;--scrim-top:linear-gradient(to bottom, #0a0a0ad9, #0a0a0a00);--scrim-bottom:linear-gradient(to top, #0a0a0ad9, #0a0a0a00);--bg-primary:var(--bg);--bg-secondary:var(--bg-elev-1);--bg-tertiary:var(--bg-elev-2);--bg-elevated:var(--bg-elev-1);--bg-hover:#403d3a;--border:var(--border-tok);--border-light:var(--border-strong);--accent:var(--fg);--accent-hover:var(--cream-50);--accent-dim:var(--hover-wash);--accent-glow:#f7f0db38;--accent-contrast:var(--bg);--editor-standout-bg:var(--fg);--editor-standout-fg:var(--bg);--text-primary:var(--fg);--text-secondary:var(--fg-muted);--text-muted:var(--fg-subtle);--success:var(--fg);--warning:var(--signal);--danger:var(--signal);--attention-warning:#e0b24f;--attention-error:#e26a5f;--attention-ok:#6bc38e;--attention-info:#7da7e8;--shadow:var(--shadow-1);--shadow-lg:var(--shadow-2)}[data-mode=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--signal:#e8b23a;--signal-dim:#e8b23a26;--signal-glow:#e8b23a4d;--bg:var(--cream-100);--bg-elev-1:var(--cream-50);--bg-elev-2:var(--cream-200);--bg-inset:var(--cream-200);--fg:var(--ink-600);--fg-muted:var(--cream-600);--fg-subtle:#0a0a0a61;--fg-on-accent:var(--cream-100);--border-tok:#0a0a0a1a;--border-strong:#0a0a0a38;--divider:#0a0a0a0f;--hover-wash:#0a0a0a0d;--press-wash:#0a0a0a1a;--selection-bg:var(--ink-600);--selection-fg:var(--cream-100);--shadow-1:0 1px 0 #ffffff80 inset, 0 4px 12px #0a0a0a0f;--shadow-2:0 1px 0 #fff9 inset, 0 16px 48px #0a0a0a1a;--scrim-top:linear-gradient(to bottom, #f7f0dbe6, #f7f0db00);--scrim-bottom:linear-gradient(to top, #f7f0dbe6, #f7f0db00);--bg-primary:var(--bg);--bg-secondary:var(--bg-elev-1);--bg-tertiary:var(--bg-elev-2);--bg-elevated:var(--bg-elev-2);--bg-hover:var(--cream-300);--border:var(--border-tok);--border-light:var(--border-strong);--accent:var(--fg);--accent-hover:var(--ink-500);--accent-dim:var(--hover-wash);--accent-glow:#0a0a0a38;--accent-contrast:var(--bg);--editor-standout-bg:var(--ink-300);--editor-standout-fg:var(--cream-100);--text-primary:var(--fg);--text-secondary:var(--fg-muted);--text-muted:var(--fg-subtle);--success:var(--fg);--warning:var(--signal);--danger:var(--signal);--attention-warning:#b98200;--attention-error:#c2453d;--attention-ok:#2e7d4f;--attention-info:#2f67b8;--shadow:var(--shadow-1);--shadow-lg:var(--shadow-2)}[data-mode=white]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#e9e8e6;--bg-elev-1:#fff;--bg-elev-2:#ebe9e6;--bg-inset:#f7f6f4;--fg:#1a1917;--fg-muted:#615c56;--fg-subtle:#77716b;--fg-on-accent:#fff;--border-tok:#bcb8b2;--border-strong:#978b7d;--divider:#cdc8c2;--hover-wash:#00000014;--press-wash:#00000021;--selection-bg:#1a1917;--selection-fg:#fff;--signal:#8e6b46;--signal-dim:#8e6b461a;--signal-glow:#8e6b4638;--shadow-1:0 1px 3px #0000000a;--shadow-2:0 12px 40px #0000001a;--scrim-top:linear-gradient(to bottom,#e9e8e6e6,#e9e8e600);--scrim-bottom:linear-gradient(to top,#e9e8e6e6,#e9e8e600);--bg-primary:var(--bg);--bg-secondary:var(--bg-elev-1);--bg-tertiary:var(--bg-elev-2);--bg-elevated:var(--bg-elev-1);--bg-hover:#e0ddd8;--border:var(--border-tok);--border-light:var(--border-strong);--accent:var(--fg);--accent-hover:#33302c;--accent-dim:var(--hover-wash);--accent-glow:#0000001f;--accent-contrast:var(--bg);--editor-standout-bg:#24211d;--editor-standout-fg:#fff;--text-primary:var(--fg);--text-secondary:var(--fg-muted);--text-muted:var(--fg-subtle);--success:var(--fg);--warning:var(--signal);--danger:var(--signal);--attention-warning:#b98200;--attention-error:#c2453d;--attention-ok:#2e7d4f;--attention-info:#2f67b8;--shadow:var(--shadow-1);--shadow-lg:var(--shadow-2)}button[data-icon-action=true]{cursor:pointer;flex-shrink:0;line-height:1;min-width:36px!important;min-height:36px!important;box-shadow:none!important;color:var(--text-secondary,var(--fg))!important;background:0 0!important;border:0!important;border-radius:0!important;justify-content:center!important;align-items:center!important;padding:8px!important;display:inline-flex!important}button[data-icon-action=true]:hover:not(:disabled){color:var(--text-primary,var(--fg))!important}button[data-icon-action=true]:focus-visible{outline-offset:2px;outline:2px solid var(--signal)!important}button[data-icon-action=true]:disabled{cursor:not-allowed;opacity:.4!important}button[data-icon-action=true][aria-pressed=true]{text-underline-offset:5px;text-decoration:underline;color:var(--text-primary,var(--fg))!important}@media (pointer:coarse){button[data-icon-action=true]{min-width:44px!important;min-height:44px!important}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root[data-anim-theme="1"]:not([data-mode=white]){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0a0d13;--bg-elev-1:#0f141c;--bg-elev-2:#1a2230;--bg-inset:#0f141c;--fg:#d8dee8;--fg-muted:#8b98ac;--fg-subtle:#64748b;--fg-on-accent:#0a0d13;--border-tok:#232d3d;--border-strong:#303d50;--divider:#1a2230;--hover-wash:#8b98ac14;--press-wash:#8b98ac29;--selection-bg:#303d50;--selection-fg:#d8dee8;--bg-primary:#0a0d13;--bg-secondary:#0f141c;--bg-tertiary:#1a2230;--bg-elevated:#1a2230;--bg-hover:#232d3d;--border:#232d3d;--border-light:#303d50;--accent:#8b98ac;--accent-hover:#b6c0ce;--accent-dim:#8b98ac1f;--accent-glow:#8b98ac40;--accent-contrast:#0a0d13;--editor-standout-bg:#d8dee8;--editor-standout-fg:#0a0d13;--text-primary:#d8dee8;--text-secondary:#8b98ac;--text-muted:#64748b;--success:#8b98ac;--warning:#b6c0ce;--danger:#b6c0ce}html,body{background:var(--bg);width:100%;height:100%;color:var(--fg);font-family:var(--font-body);letter-spacing:var(--tr-body);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-size:14px;line-height:1.6;overflow:hidden}#root{width:100%;height:100%;overflow:hidden}.sm-app-shell{height:100dvh}@keyframes sm-navmenu-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.mobile-nav-menu{animation:.2s cubic-bezier(.22,1,.36,1) sm-navmenu-in}::selection{background:var(--selection-bg);color:var(--selection-fg)}.display,h1,h2{font-family:var(--font-display);font-style:italic;font-weight:200;line-height:var(--lh-tight);letter-spacing:var(--tr-display);margin:0}.display{line-height:var(--lh-display)}h3,h4{font-family:var(--font-body);font-weight:500;line-height:var(--lh-tight);letter-spacing:-.01em;margin:0}.eyebrow{color:var(--fg-muted);font-size:11px;font-weight:500}code,pre,.mono{font-family:var(--font-mono);font-size:.92em}.listing-identity code{font-family:inherit;font-size:inherit}button{font-family:var(--font-body);cursor:pointer;letter-spacing:var(--tr-body);border:none;outline:none}textarea,input,select{font-family:var(--font-body);outline:none}select{background-color:var(--bg-elev-1);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--r-2)}select option,select optgroup{background-color:var(--bg-elevated);color:var(--text-primary)}select option:checked{font-weight:600}.tsel-trigger{background-color:var(--bg-elev-1);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--r-2);font-family:var(--font-body);font-size:inherit;cursor:pointer;text-align:left;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;display:inline-flex}.tsel-trigger:hover{border-color:var(--border-strong)}.tsel-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.tsel-trigger:disabled{opacity:.5;cursor:default}.tsel-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tsel-caret{opacity:.7;flex:none;font-size:10px}.tsel-pop{z-index:100100;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-2);max-height:260px;padding:4px;overflow-y:auto;box-shadow:0 8px 28px #00000047}.tsel-opt{color:var(--text-primary);cursor:pointer;white-space:nowrap;border-radius:6px;align-items:center;gap:6px;padding:6px 8px;font-size:13px;display:flex}.tsel-opt[data-active=true]{background:var(--bg-elev-1)}.tsel-opt[aria-selected=true]{font-weight:600}.tsel-opt[aria-disabled=true]{color:var(--text-muted);cursor:default}.tsel-opt[aria-disabled=true][data-active=true]{background:0 0}.tsel-check{opacity:.8;flex:none;width:12px;font-size:11px}.tsel-opt-label{text-overflow:ellipsis;flex:auto;overflow:hidden}.tsel-note{cursor:help;width:16px;height:16px;color:var(--text-muted);border:1px solid var(--border);border-radius:999px;flex:none;justify-content:center;align-items:center;font-size:11px;display:inline-flex;position:relative}.tsel-note:hover{color:var(--text-primary);border-color:var(--border-strong)}.tsel-tip{z-index:100110;background:var(--text-primary);color:var(--bg-elevated);box-sizing:border-box;white-space:normal;pointer-events:none;border-radius:5px;max-width:min(260px,100vw - 16px);padding:4px 8px;font-size:11px;font-weight:600;box-shadow:0 2px 10px #0000004d}@media (width<=767.98px),(height<=480px) and (pointer:coarse){.tsel-opt{box-sizing:border-box;min-height:44px;font-size:14px}.tsel-note{flex:0 0 44px;width:44px;height:44px;font-size:14px}}.video-editor input,.video-editor select,.video-editor textarea{background:var(--bg-inset);width:100%;min-width:0;color:var(--fg);border:var(--bw-1) solid var(--border-strong);border-radius:var(--r-2);font-family:var(--font-body);accent-color:var(--signal);padding:7px 8px;font-size:12px}.video-editor,.mobile-editor-root{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.video-editor input,.video-editor select,.video-editor textarea,.video-editor [contenteditable=true],.mobile-editor-root input,.mobile-editor-root select,.mobile-editor-root textarea,.mobile-editor-root [contenteditable=true]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}.video-editor input[type=range]{background:0 0;border:0;padding:0}.video-editor input[type=checkbox]{width:auto;min-width:auto}.video-editor select:focus,.video-editor input:focus,.video-editor textarea:focus{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal-dim)}:focus-visible{outline:2px solid var(--signal);outline-offset:2px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-pill)}::-webkit-scrollbar-thumb:hover{background:var(--fg-subtle)}.sm-hide-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.sm-hide-scrollbar::-webkit-scrollbar{width:0;height:0;display:none}.btn{align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-4);border-radius:var(--r-pill);letter-spacing:var(--tr-body);transition:transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);font-size:13px;font-weight:500;display:inline-flex}.btn:active{transform:scale(.98)}.btn-primary{background:var(--fg);color:var(--bg)}.btn-primary:hover{background:var(--fg);opacity:.86}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-secondary{color:var(--fg);border:var(--bw-1) solid var(--border-strong);background:0 0}.btn-secondary:hover{background:var(--hover-wash);border-color:var(--fg)}.btn-ghost{color:var(--fg-muted);background:0 0;padding:6px 10px}.btn-ghost:hover{background:var(--hover-wash);color:var(--fg)}.btn-icon{color:var(--fg-muted);border-radius:var(--r-2);transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);background:0 0;justify-content:center;align-items:center;padding:5px;display:inline-flex}.btn-icon:hover{background:var(--hover-wash);color:var(--fg)}.btn-icon:active{transform:scale(.98)}.btn-icon:disabled{opacity:.4;cursor:not-allowed}.typing-indicator{align-items:center;gap:4px;padding:4px 0;display:flex}.typing-indicator span{border-radius:var(--r-pill);background:var(--fg-subtle);width:6px;height:6px;animation:1.2s infinite bounce}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,60%,to{opacity:.4;transform:translateY(0)}30%{opacity:1;transform:translateY(-5px)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}@keyframes toastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}button:focus-visible,[role=button]:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):is(:focus,:focus-visible),textarea:is(:focus,:focus-visible),select:is(:focus,:focus-visible),[contenteditable]:not([contenteditable=false]):is(:focus,:focus-visible){outline:none!important}@keyframes skeletonShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg,#ffffff08 0%,#ffffff1a 50%,#ffffff08 100%) 0 0/200% 100%;border-radius:6px;animation:1.4s ease-in-out infinite skeletonShimmer}.node-state-empty{border-style:dashed!important}.node-state-generating{box-shadow:0 0 0 2px var(--accent);position:relative}.node-state-generating:after{content:"";border-radius:inherit;pointer-events:none;will-change:opacity;animation:1.6s ease-in-out infinite nodePulse;position:absolute;inset:-2px;box-shadow:0 0 18px #f7c8328c}@keyframes nodePulse{0%,to{opacity:.36}50%{opacity:1}}.node-state-warning{position:relative;border-color:var(--attention-warning)!important}.node-state-warning:after{content:"";border-radius:inherit;pointer-events:none;box-shadow:0 0 0 1px var(--attention-warning), 0 0 14px color-mix(in srgb, var(--attention-warning) 40%, transparent);position:absolute;inset:-2px}.node-state-failed{border-top:4px solid #d04848!important}.node-state-failed:before{content:"⚠ ";color:#d04848;z-index:2;pointer-events:none;font-size:12px;font-weight:800;position:absolute;top:6px;left:8px}.react-flow__node{cursor:default}.react-flow__node.dragging,.react-flow__pane.dragging .react-flow__viewport{will-change:transform}.react-flow__node:not(.react-flow__node-sceneGroupNode):not(.react-flow__node-shotLabelNode):not(.react-flow__node-stickyNoteNode):not(.react-flow__node-transitionNode){box-shadow:1px 1px 0 var(--node-side,#d8cfb3), 2px 2px 0 var(--node-side,#d8cfb3), 3px 3px 0 var(--node-side,#d8cfb3), 4px 4px 0 var(--node-side,#d8cfb3), 5px 5px 0 var(--node-side,#d8cfb3), 6px 6px 0 var(--node-side,#d8cfb3), 7px 7px 0 var(--node-edge,#0a0a0a2e), 14px 16px 18px -4px #0a0a0a2e;border-radius:10px}[data-mode=dark] .react-flow__node:not(.react-flow__node-sceneGroupNode):not(.react-flow__node-shotLabelNode):not(.react-flow__node-stickyNoteNode):not(.react-flow__node-transitionNode){--node-side:#1f1d18;--node-edge:#f7f0db2e}.react-flow__controls{grid-template-columns:repeat(2,1fr)!important;display:grid!important}.react-flow__controls button{background:var(--bg-elev-2)!important;border-color:var(--border-tok)!important;color:var(--fg-muted)!important;fill:var(--fg-muted)!important}.react-flow__controls button:hover{background:var(--ink-300)!important}.react-flow__edge-path{stroke:var(--border-strong)}.react-flow.rf-edges-panning .react-flow__edges{display:none}.react-flow__node.node-controls-locked input,.react-flow__node.node-controls-locked textarea,.react-flow__node.node-controls-locked select,.react-flow__node.node-controls-locked button,.react-flow__node.node-controls-locked [role=button]{pointer-events:none!important}.react-flow__node.node-controls-locked{cursor:grab}.react-flow__node.node-controls-locked:active{cursor:grabbing}.react-flow__node.scene-add-available-node{filter:drop-shadow(0 0 10px #f7f0db38)}.react-flow__node.scene-add-available-node>div{outline:1px solid var(--border-strong);outline-offset:4px;border-radius:var(--r-3)}.react-flow__node.scene-add-available-node:after{content:"";border:1px dashed var(--border-strong);border-radius:var(--r-3);pointer-events:none;position:absolute;inset:-8px}.react-flow__node.node-replace-available{filter:drop-shadow(0 0 10px #f7f0db38)}.react-flow__node.node-replace-available>div{outline:1px solid var(--border-strong);outline-offset:4px;border-radius:var(--r-3)}.react-flow__node.node-replace-available:after{content:"";border:1px dashed var(--border-strong);border-radius:var(--r-3);pointer-events:none;position:absolute;inset:-8px}select option{background:var(--bg-elev-2);color:var(--fg)}.spinner{border:2px solid var(--border-tok);border-top-color:var(--fg);border-radius:var(--r-pill);width:16px;height:16px;animation:.7s linear infinite spin}.media-upload-preview:hover .media-upload-overlay{opacity:1!important}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important}}.assets-card .assets-card-overlay{opacity:0;transition:opacity .15s}.assets-card:hover .assets-card-overlay{opacity:1}.yt-video-row{transition:background .12s,box-shadow .12s,color .12s}.yt-video-row:hover{box-shadow:inset 2px 0 0 var(--accent), inset 0 0 14px var(--accent-glow);color:var(--text-primary);background:var(--hover-wash)!important}.chat-bubble ::selection{background:var(--signal);color:#0a0a0a}.chat-bubble ::selection{background:var(--signal);color:#0a0a0a}.chat-bubble:hover .chat-bubble-copy,.chat-bubble:focus-within .chat-bubble-copy,.chat-bubble-copy:hover,.chat-bubble-copy:focus{opacity:1!important}.chat-bubble-copy:hover{background:var(--bg-elevated-2,var(--bg-elevated));color:var(--text-primary)!important}.chat-bubble-copy:active{transform:scale(.94)}.sm-brand .sm-brandmark{transform-origin:50%;transition:transform .76s cubic-bezier(.2,.8,.2,1),filter .28s}.sm-brand:hover .sm-brandmark{filter:drop-shadow(0 0 7px color-mix(in srgb, currentColor 45%, transparent));will-change:transform, filter;transform:perspective(340px)rotateY(360deg)scale(1.06)}.sm-brand .sm-word{transition:transform .3s cubic-bezier(.2,.8,.2,1);transform:translate(-4px)}.sm-brand:hover .sm-word{will-change:transform;transform:translate(-4px,-1px)}@media (prefers-reduced-motion:reduce){.sm-brand .sm-brandmark{transition:transform .24s,filter .24s}.sm-brand:hover .sm-brandmark{transform:scale(1.06)}.sm-brand:hover .sm-word{transform:translate(-4px)}}body.sm-mobile-ui input,body.sm-mobile-ui textarea,body.sm-mobile-ui select{font-size:16px!important}body.sm-mobile-ui button,body.sm-mobile-ui select,body.sm-mobile-ui [role=button]{min-height:44px}body.sm-mobile-ui select:not([multiple]):not([size]){height:max(44px,2.75em)}body.sm-mobile-ui button.btn-icon,body.sm-mobile-ui button[data-compact],body.sm-mobile-ui .no-min-tap{min-height:0}body.sm-mobile-ui .yt-video-row{min-width:560px}:where(html:has(.sm-block)){container-type:inline-size}:where(.sm-block){gap:var(--s-5,24px);min-width:0;display:grid}:where(.sm-block,.sm-block *){box-sizing:border-box}:where(.sm-block)>:where(*){min-width:0}@container (width>=720px){:where(.sm-block[data-layout=split]){grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);align-items:start}:where(.sm-block[data-layout=split])>:where(.sm-stage){grid-row:span 6}}:where(.sm-row){align-items:center;gap:var(--s-2,8px);flex-wrap:wrap;display:flex}:where(.sm-stage){min-height:220px;padding:var(--s-3,12px);border-radius:var(--r-3,8px);background:var(--bg-inset);place-items:center;display:grid;position:relative;overflow:hidden}:where(.sm-stage[data-ratio="16:9"]){aspect-ratio:16/9;min-height:0}:where(.sm-stage[data-ratio="9:16"]){aspect-ratio:9/16;justify-self:center;width:auto;height:min(70vh,640px);min-height:0;max-height:70vh}:where(.sm-stage[data-ratio="1:1"]){aspect-ratio:1;min-height:0}:where(.sm-stage)>:where(img,video,canvas){object-fit:contain;border-radius:var(--r-2,4px);max-width:100%;max-height:100%;display:block}:where(.sm-stage[data-fill])>:where(img,video,canvas){object-fit:cover;width:100%;height:100%}:where(.sm-empty){justify-items:center;gap:var(--s-3,12px);padding:var(--s-5,24px) var(--s-4,16px);text-align:center;color:var(--fg-muted);display:grid}:where(.sm-empty)>:where(.sm-glyph){--sm-glyph-size:40px;color:var(--fg-subtle)}:where(.sm-empty)>:where(p){max-width:24ch;font-size:var(--fs-body,1rem);margin:0}:where(.sm-drop){outline:1px dashed var(--border-tok);outline-offset:-8px}:where(.sm-drop[data-over]){outline-color:var(--fg);background:var(--hover-wash)}:where(.sm-actions){align-items:center;gap:var(--s-2,8px);flex-wrap:wrap;display:flex}:where(.sm-actions)>:where(.sm-status){margin-inline-start:var(--s-2,8px)}:where(.sm-primary,.sm-quiet){justify-content:center;align-items:center;gap:var(--s-2,8px);min-height:var(--touch-target,44px);border-radius:var(--r-pill,999px);font:inherit;cursor:pointer;text-align:center;overflow-wrap:anywhere;max-width:100%;padding:10px 20px;font-weight:500;display:inline-flex}:where(.sm-primary){border:1px solid var(--fg);background:var(--fg);color:var(--bg)}:where(.sm-quiet){border:1px solid var(--border-tok);color:var(--fg);background:0 0}:where(.sm-quiet):hover{background:var(--hover-wash)}:where(.sm-icon){min-width:var(--touch-target,44px);min-height:var(--touch-target,44px);border-radius:var(--r-2,4px);color:var(--fg-muted);cursor:pointer;background:0 0;border:0;place-items:center;padding:0;display:inline-grid}:where(.sm-icon):hover{color:var(--fg);background:var(--hover-wash)}:where(.sm-icon[aria-pressed=true]){color:var(--fg);background:var(--press-wash)}:where(.sm-primary,.sm-quiet,.sm-icon):disabled{opacity:.45;cursor:default}:where(.sm-primary,.sm-quiet,.sm-icon):focus-visible{outline:2px solid var(--signal);outline-offset:3px}@container (width<=420px){:where(.sm-actions)>:where(.sm-primary){flex:100%}}:where(.sm-field){gap:6px;min-width:0;display:grid}:where(.sm-field)>:where(label,.sm-label){align-items:center;gap:var(--s-1,4px);font-size:var(--fs-body-s,.875rem);color:var(--fg-muted);min-height:24px;display:flex}:where(.sm-field) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){width:100%;min-height:var(--touch-target,44px);border:1px solid var(--border-tok);border-radius:var(--r-3,8px);background:var(--bg-elev-1);color:var(--fg);font:inherit;padding:10px 12px}:where(.sm-field) :where(textarea){resize:vertical;min-height:96px}:where(.sm-fields){gap:var(--s-4,16px);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));display:grid}@container (width>=520px){:where(.sm-field:not(:has(textarea,.sm-choices))){align-items:center;gap:var(--s-2,8px);grid-template-columns:minmax(5rem,9rem) minmax(0,1fr)}:where(.sm-field) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]),select){min-height:36px;padding:6px 10px}:where(.sm-fields){gap:var(--s-2,8px) var(--s-4,16px)}}:where(.sm-choices){gap:var(--s-2,8px);grid-template-columns:repeat(auto-fill,minmax(var(--sm-tile,96px),1fr));border:0;min-width:0;margin:0;padding:0;display:grid}:where(.sm-choices[data-size=wide]){--sm-tile:160px}:where(.sm-choices)>:where(legend){font-size:var(--fs-body-s,.875rem);color:var(--fg-muted);margin-bottom:6px;padding:0}:where(.sm-choices)>:where(label){padding:var(--s-2,8px);border:1px solid var(--border-tok);border-radius:var(--r-3,8px);background:var(--bg-elev-1);color:var(--fg-muted);font-size:var(--fs-caption,.8125rem);text-align:center;cursor:pointer;align-content:start;justify-items:center;gap:6px;display:grid;position:relative}:where(.sm-choices)>:where(label):hover{border-color:var(--border-strong);color:var(--fg)}:where(.sm-choices) :where(input[type=radio],input[type=checkbox]){opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}:where(.sm-choices)>:where(label:has(input:checked)){border-color:var(--fg);color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}:where(.sm-choices)>:where(label:has(input:focus-visible)){outline:2px solid var(--signal);outline-offset:2px}:where(.sm-choices) :where(img,video,canvas,.sm-swatch){width:100%;aspect-ratio:var(--sm-tile-ratio,1);object-fit:cover;border-radius:var(--r-2,4px);background:var(--bg-inset);display:block}:where(.sm-choices) :where(.sm-glyph){--sm-glyph-size:28px;margin:10px 0 4px}:where(.sm-choices[data-ratio="16:9"]){--sm-tile-ratio:16/9}:where(.sm-choices[data-ratio="9:16"]){--sm-tile-ratio:9/16}:where(.sm-choices[data-compact])>:where(label){min-height:var(--touch-target,44px);grid-auto-flow:column;place-content:center;align-items:center;padding:6px 12px}:where(.sm-choices[data-compact]) :where(.sm-glyph){--sm-glyph-size:18px;margin:0}:where(.sm-choices) :where(audio){z-index:1;width:100%;height:32px;position:relative}:where(.sm-shape){box-sizing:border-box;width:calc(var(--sm-shape-size,32px) * min(1,var(--r,1)));aspect-ratio:var(--r,1);border:2px solid;border-radius:3px;max-width:100%;margin:4px auto;display:block}:where(.sm-choices)>:where(label:has(.sm-shape)){grid-template-rows:1fr auto;align-content:stretch}:where(.sm-choices) :where(.sm-shape){--sm-shape-size:36px;align-self:center;margin:6px auto 2px}:where(.sm-choices[data-compact]) :where(.sm-shape){--sm-shape-size:20px;margin:0}:where(.sm-gallery){gap:var(--s-2,8px);grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--sm-tile,140px)),1fr));margin:0;padding:0;list-style:none;display:grid}:where(.sm-gallery)>:where(*){border-radius:var(--r-3,8px);background:var(--bg-inset);margin:0;position:relative;overflow:hidden}:where(.sm-gallery) :where(img,video,canvas){width:100%;aspect-ratio:var(--sm-tile-ratio,1);object-fit:cover;display:block}:where(.sm-gallery) :where(figcaption){font-size:var(--fs-caption,.8125rem);color:var(--fg-muted);padding:6px 8px}:where(.sm-gallery) :where([aria-selected=true],.is-selected){box-shadow:inset 0 0 0 2px var(--fg)}:where(.sm-status){align-items:center;gap:var(--s-2,8px);min-height:24px;font-size:var(--fs-body-s,.875rem);color:var(--fg-muted);display:inline-flex}:where(.sm-status):empty{display:none}:where(.sm-status[data-state]):before{content:"";background:currentColor;border-radius:50%;flex:none;width:14px;height:14px}:where(.sm-status[data-state=loading]):before{background:0 0;border:2px solid;border-right-color:#0000;animation:.8s linear infinite sm-spin}:where(.sm-status[data-state=success]){color:var(--attention-ok,var(--fg))}:where(.sm-status[data-state=success]):before{background:0 0;border:2px solid;border-width:0 2px 2px 0;border-radius:0;width:6px;height:11px;margin:0 4px 3px;transform:rotate(45deg)}:where(.sm-status[data-state=waiting]){color:var(--attention-warning,var(--signal))}:where(.sm-status[data-state=waiting]):before{width:8px;height:8px;margin:0 3px}:where(.sm-status[data-state=error]){color:var(--attention-error,var(--signal))}:where(.sm-status[data-state=error]):before{clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0}:where(.sm-progress){border-radius:var(--r-pill,999px);background:var(--bg-elev-2);width:100%;height:4px;accent-color:var(--fg);appearance:none;border:0;overflow:hidden}:where(.sm-progress)::-webkit-progress-bar{background:var(--bg-elev-2)}:where(.sm-progress)::-webkit-progress-value{background:var(--fg)}:where(.sm-progress)::-moz-progress-bar{background:var(--fg)}:where(.sm-more){border-top:1px solid var(--divider)}:where(.sm-more)>:where(summary){align-items:center;gap:var(--s-2,8px);min-height:var(--touch-target,44px);color:var(--fg-muted);font-size:var(--fs-body-s,.875rem);cursor:pointer;padding:0;list-style:none;display:flex}:where(.sm-more)>:where(summary)::-webkit-details-marker{display:none}:where(.sm-more)>:where(summary):after{content:"";width:7px;height:7px;transition:transform var(--dur-fast,.16s) var(--ease-out,ease);border:1.5px solid;border-width:0 1.5px 1.5px 0;margin-inline-start:2px;transform:translateY(-2px)rotate(45deg)}:where(.sm-more[open])>:where(summary):after{transform:translateY(2px)rotate(-135deg)}:where(.sm-more)>:where(summary):hover{color:var(--fg)}:where(.sm-more)>:where(:not(summary)){margin-top:var(--s-2,8px)}:where(.sm-more[open]){padding-bottom:var(--s-3,12px)}:where(.sm-label){position:relative}:where(.sm-hint){vertical-align:middle;display:inline-block}:where(:not(.sm-label))>:where(.sm-hint){position:relative}:where(.sm-hint)>:where(summary){width:var(--touch-target,44px);height:var(--touch-target,44px);min-height:0;color:var(--fg-subtle);cursor:pointer;border:0;place-items:center;margin:-8px;padding:0;list-style:none;display:inline-grid}:where(.sm-hint)>:where(summary)::-webkit-details-marker{display:none}:where(.sm-hint)>:where(summary):before{content:"i";width:15px;height:15px;font:600 10px/1 var(--font-body);border:1.5px solid;border-radius:50%;place-items:center;font-style:normal;display:grid}:where(.sm-hint)>:where(summary):hover,:where(.sm-hint[open])>:where(summary){color:var(--fg)}:where(.sm-hint)>:where(:not(summary)){z-index:5;inset-inline-start:0;border:1px solid var(--border-tok);border-radius:var(--r-3,8px);background:var(--bg-elev-2);width:max-content;max-width:min(280px,100%);color:var(--fg);font-size:var(--fs-body-s,.875rem);box-shadow:var(--shadow-1);margin:4px 0 0;padding:10px 12px;line-height:1.45;position:absolute;top:100%}:where(:not(.sm-label))>:where(.sm-hint[open]){display:block}:where(:not(.sm-label))>:where(.sm-hint)>:where(:not(summary)){width:auto;max-width:60ch;position:static}:where(.sm-glyph){--g:var(--sm-glyph-size,20px);width:var(--g);height:var(--g);color:inherit;vertical-align:middle;flex:none;display:inline-block;position:relative}:where(.sm-glyph):before,:where(.sm-glyph):after{content:"";box-sizing:border-box;position:absolute}:where(.sm-glyph[data-glyph=play]):before{clip-path:polygon(0 0,100% 50%,0 100%);background:currentColor;inset:15% 15% 15% 25%}:where(.sm-glyph[data-glyph=pause]):before{border:solid;border-width:0 calc(var(--g)*.14);inset:18% 25%}:where(.sm-glyph[data-glyph=plus]):before,:where(.sm-glyph[data-glyph=close]):before{background:linear-gradient(currentColor,currentColor) 50%/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 50%/2px 100% no-repeat;inset:15%}:where(.sm-glyph[data-glyph=close]):before{transform:rotate(45deg)}:where(.sm-glyph[data-glyph=check]):before{border:2px solid;border-width:0 2px 2px 0;width:30%;height:58%;top:12%;left:36%;transform:rotate(45deg)}:where(.sm-glyph[data-glyph=chevron]):before{border:2px solid;border-width:0 2px 2px 0;width:40%;height:40%;top:22%;left:30%;transform:rotate(45deg)}:where(.sm-glyph[data-glyph=upload]):before{border:2px solid;border-top:0;border-radius:0 0 3px 3px;height:35%;bottom:10%;left:10%;right:10%}:where(.sm-glyph[data-glyph=upload]):after{clip-path:polygon(50% 0,100% 45%,60% 45%,60% 100%,40% 100%,40% 45%,0 45%);background:currentColor;height:62%;top:4%;left:25%;right:25%}:where(.sm-glyph[data-glyph=image]):before{border:2px solid;border-radius:3px;inset:12%}:where(.sm-glyph[data-glyph=image]):after{clip-path:polygon(0 100%,35% 20%,60% 65%,75% 45%,100% 100%);background:currentColor;height:34%;bottom:24%;left:22%;right:22%}:where(.sm-glyph[data-glyph=video]):before{border:2px solid;border-radius:3px;inset:22% 28% 22% 8%}:where(.sm-glyph[data-glyph=video]):after{clip-path:polygon(0 35%,100% 0,100% 100%,0 65%);background:currentColor;width:20%;top:30%;bottom:30%;right:8%}:where(.sm-glyph[data-glyph=audio]):before{background:linear-gradient(currentColor,currentColor) 0 60%/2px 40% no-repeat,linear-gradient(currentColor,currentColor) 33%/2px 80% no-repeat,linear-gradient(currentColor,currentColor) 66%/2px 100% no-repeat,linear-gradient(currentColor,currentColor) 100% 60%/2px 50% no-repeat;inset:15% 12%}:where(.sm-glyph[data-glyph=text]):before{background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/60% 2px no-repeat;inset:20% 12%}:where(.sm-glyph[data-glyph=spark]):before{clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);background:currentColor;inset:8%}:where(.sm-glyph[data-glyph=info]):before{border:2px solid;border-radius:50%;inset:10%}:where(.sm-glyph[data-glyph=info]):after{background:linear-gradient(currentColor,currentColor) 0 0/2px 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/2px 60% no-repeat;width:2px;height:46%;margin-left:-1px;top:28%;left:50%}:where(.sm-glyph[data-glyph=warning]):before{clip-path:polygon(50% 0,100% 100%,0 100%);background:currentColor;inset:8% 4% 10%}:where(.sm-glyph[data-glyph=warning]):after{background:linear-gradient(var(--bg),var(--bg)) 0 0/2px 60% no-repeat,linear-gradient(var(--bg),var(--bg)) 0 100%/2px 2px no-repeat;width:2px;height:38%;margin-left:-1px;top:38%;left:50%}:where(.sm-glyph[data-glyph=spinner]):before{border:2px solid;border-right-color:#0000;border-radius:50%;animation:.8s linear infinite sm-spin;inset:12%}:where([class*=sm-][hidden]){display:none!important}:where(.sm-sr){clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes sm-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){:where(.sm-status[data-state=loading]):before,:where(.sm-glyph[data-glyph=spinner]):before{opacity:.6;border-right-color:currentColor;animation:none}:where(.sm-more)>:where(summary):after{transition:none}}.sm-quiet{border:1px solid var(--border-tok)}html,body{background:var(--bg);color:var(--fg);margin:0}.dh-page{min-height:100dvh;font-family:var(--font-body);flex-direction:column;display:flex}.dh-header{justify-content:space-between;align-items:flex-end;gap:var(--s-4,16px);padding:var(--s-5,20px) var(--s-6,24px) var(--s-4,16px);border-bottom:var(--bw-1,1px) solid var(--border-tok);flex-wrap:wrap;display:flex}.dh-title{gap:var(--s-1,4px);min-width:0;display:grid}.dh-wordmark{color:var(--fg-muted);font-size:13px}.dh-title h1{font-family:var(--font-display);letter-spacing:var(--tr-display);overflow-wrap:anywhere;margin:0;font-size:30px;font-style:italic;font-weight:200;line-height:1.1}.dh-meta{color:var(--fg-muted);overflow-wrap:anywhere;font-size:12px}.dh-controls{align-items:flex-end;gap:var(--s-3,12px);flex-wrap:wrap;display:flex}.dh-controls label{gap:var(--s-1,4px);color:var(--fg-muted);font-size:12px;display:grid}.dh-controls select{min-height:36px;padding:0 var(--s-3,12px);border:var(--bw-1,1px) solid var(--border-tok);border-radius:var(--r-2);background:var(--bg-elev-1);color:var(--fg);font:inherit;font-size:13px}.dh-controls select:focus-visible,.dh-input textarea:focus-visible,.dh-page .btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}.dh-problem{margin:var(--s-4,16px) var(--s-6,24px) 0;padding:var(--s-3,12px) var(--s-4,16px);border:var(--bw-1,1px) solid var(--border-strong);border-radius:var(--r-2);background:var(--bg-elev-1);white-space:pre-wrap;overflow-wrap:anywhere}.dh-main{gap:var(--s-6,24px);padding:var(--s-6,24px);flex:1;grid-template-columns:minmax(0,1fr) minmax(280px,380px);display:grid}.dh-stage{min-width:0}.dh-frame{min-width:0;margin:0 auto}.dh-noview{gap:var(--s-4,16px);padding:var(--s-6,24px);border:var(--bw-1,1px) solid var(--border-tok);border-radius:var(--r-3);justify-items:start;display:grid}.dh-noview p{color:var(--fg-muted);margin:0}.dh-panel{gap:var(--s-5,20px);flex-direction:column;min-width:0;display:flex}.dh-section-head{justify-content:space-between;align-items:center;gap:var(--s-2,8px);margin-bottom:var(--s-2,8px);display:flex}.dh-section-head h2{letter-spacing:var(--tr-body);margin:0;font-size:13px;font-weight:600}.dh-input textarea{box-sizing:border-box;width:100%;padding:var(--s-3,12px);border:var(--bw-1,1px) solid var(--border-tok);border-radius:var(--r-2);background:var(--bg-elev-1);color:var(--fg);font-family:var(--font-mono);resize:vertical;font-size:12px;line-height:1.5}.dh-input p,.dh-muted{margin:var(--s-2,8px) 0 0;color:var(--fg-muted);font-size:13px}.dh-json{max-height:240px;padding:var(--s-3,12px);border:var(--bw-1,1px) solid var(--border-tok);border-radius:var(--r-2);background:var(--bg-elev-1);font-family:var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font-size:12px;line-height:1.5;overflow:auto}.dh-console{flex-direction:column;min-height:0;display:flex}.dh-console ol{border-top:var(--bw-1,1px) solid var(--divider);max-height:360px;margin:0;padding:0;list-style:none;overflow:auto}.dh-entry{gap:var(--s-2,8px);padding:var(--s-2,8px) 0;border-bottom:var(--bw-1,1px) solid var(--divider);grid-template-columns:auto auto minmax(0,1fr);align-items:baseline;font-size:12px;display:grid}.dh-entry time{color:var(--fg-muted);font-variant-numeric:tabular-nums}.dh-kind{color:var(--fg-muted);font-size:11px}.dh-entry pre{font-family:var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.dh-error .dh-kind,.dh-error pre{color:var(--fg);font-weight:600}.dh-stand-in .dh-kind{color:var(--signal)}@media (width<=900px){.dh-main{padding:var(--s-4,16px);grid-template-columns:minmax(0,1fr)}.dh-header{padding:var(--s-4,16px)}}
+@font-face{font-family:Hanken Grotesk;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/HankenGrotesk-Variable.ttf)format("truetype")}@font-face{font-family:Hanken Grotesk;font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/HankenGrotesk-Italic-Variable.ttf)format("truetype")}:root{--cream-50:#fdfaf1;--cream-100:#f7f0db;--cream-200:#ece3c9;--cream-300:#dcd2b5;--cream-600:#4e483a;--ink-50:#f2f0ec;--ink-100:#c9c6be;--ink-300:#4a4843;--ink-400:#26241f;--ink-500:#16140f;--ink-600:#0a0a0a;--signal:#e8b23a;--signal-dim:#e8b23a26;--signal-glow:#e8b23a4d;--font-display:"Balgin", "Hanken Grotesk", ui-sans-serif, sans-serif;--font-body:"Hanken Grotesk", ui-sans-serif, sans-serif;--font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--font:var(--font-body);--fs-display-xl:clamp(72px, 14vw, 220px);--fs-display-l:clamp(56px, 9vw, 144px);--fs-display-m:clamp(40px, 6vw, 96px);--fs-h4:1.25rem;--fs-body:1rem;--fs-body-s:.875rem;--fs-caption:.8125rem;--fs-micro:.75rem;--tr-display:-.02em;--tr-body:-.005em;--tr-micro:.08em;--lh-display:.92;--lh-tight:1.05;--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;--s-11:192px;--page-gutter:clamp(20px, 3vw, 48px);--page-gutter-compact:clamp(16px, 5vw, 24px);--page-section-gap:clamp(32px, 5vw, 64px);--content-readable:720px;--content-wide:1440px;--control-height:40px;--touch-target:44px;--mobile-dock-height:66px;--z-nav:30;--hover:var(--hover-wash);--r-0:0;--r-1:2px;--r-2:4px;--r-3:8px;--r-pill:999px;--radius-sm:var(--r-2);--radius:var(--r-3);--radius-lg:var(--r-3);--bw-hair:.5px;--bw-1:1px;--bw-2:2px;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--dur-instant:80ms;--dur-fast:.16s;--dur-base:.24s;--dur-slow:.48s;--dur-reveal:.72s}:root,[data-mode=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#101010;--bg-elev-1:#232221;--bg-elev-2:#33312f;--bg-inset:#171716;--fg:#f3eee5;--fg-muted:#bbb2a7;--fg-subtle:#f3eee594;--fg-on-accent:#191716;--border-tok:#58534d;--border-strong:#8b7e6f;--divider:#393735;--signal:#d0ae77;--signal-dim:#d0ae7726;--signal-glow:#d0ae774d;--hover-wash:#f7f0db0f;--press-wash:#f7f0db1f;--selection-bg:var(--cream-100);--selection-fg:var(--ink-600);--shadow-1:0 1px 0 #f7f0db0a inset, 0 4px 12px #00000080;--shadow-2:0 1px 0 #f7f0db0f inset, 0 16px 48px #0009;--scrim-top:linear-gradient(to bottom, #0a0a0ad9, #0a0a0a00);--scrim-bottom:linear-gradient(to top, #0a0a0ad9, #0a0a0a00);--bg-primary:var(--bg);--bg-secondary:var(--bg-elev-1);--bg-tertiary:var(--bg-elev-2);--bg-elevated:var(--bg-elev-1);--bg-hover:#403d3a;--border:var(--border-tok);--border-light:var(--border-strong);--accent:var(--fg);--accent-hover:var(--cream-50);--accent-dim:var(--hover-wash);--accent-glow:#f7f0db38;--accent-contrast:var(--bg);--editor-standout-bg:var(--fg);--editor-standout-fg:var(--bg);--text-primary:var(--fg);--text-secondary:var(--fg-muted);--text-muted:var(--fg-subtle);--success:var(--fg);--warning:var(--signal);--danger:var(--signal);--attention-warning:#e0b24f;--attention-error:#e26a5f;--attention-ok:#6bc38e;--attention-info:#7da7e8;--shadow:var(--shadow-1);--shadow-lg:var(--shadow-2)}[data-mode=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--signal:#e8b23a;--signal-dim:#e8b23a26;--signal-glow:#e8b23a4d;--bg:var(--cream-100);--bg-elev-1:var(--cream-50);--bg-elev-2:var(--cream-200);--bg-inset:var(--cream-200);--fg:var(--ink-600);--fg-muted:var(--cream-600);--fg-subtle:#0a0a0a61;--fg-on-accent:var(--cream-100);--border-tok:#0a0a0a1a;--border-strong:#0a0a0a38;--divider:#0a0a0a0f;--hover-wash:#0a0a0a0d;--press-wash:#0a0a0a1a;--selection-bg:var(--ink-600);--selection-fg:var(--cream-100);--shadow-1:0 1px 0 #ffffff80 inset, 0 4px 12px #0a0a0a0f;--shadow-2:0 1px 0 #fff9 inset, 0 16px 48px #0a0a0a1a;--scrim-top:linear-gradient(to bottom, #f7f0dbe6, #f7f0db00);--scrim-bottom:linear-gradient(to top, #f7f0dbe6, #f7f0db00);--bg-primary:var(--bg);--bg-secondary:var(--bg-elev-1);--bg-tertiary:var(--bg-elev-2);--bg-elevated:var(--bg-elev-2);--bg-hover:var(--cream-300);--border:var(--border-tok);--border-light:var(--border-strong);--accent:var(--fg);--accent-hover:var(--ink-500);--accent-dim:var(--hover-wash);--accent-glow:#0a0a0a38;--accent-contrast:var(--bg);--editor-standout-bg:var(--ink-300);--editor-standout-fg:var(--cream-100);--text-primary:var(--fg);--text-secondary:var(--fg-muted);--text-muted:var(--fg-subtle);--success:var(--fg);--warning:var(--signal);--danger:var(--signal);--attention-warning:#b98200;--attention-error:#c2453d;--attention-ok:#2e7d4f;--attention-info:#2f67b8;--shadow:var(--shadow-1);--shadow-lg:var(--shadow-2)}[data-mode=white]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#e9e8e6;--bg-elev-1:#fff;--bg-elev-2:#ebe9e6;--bg-inset:#f7f6f4;--fg:#1a1917;--fg-muted:#615c56;--fg-subtle:#77716b;--fg-on-accent:#fff;--border-tok:#bcb8b2;--border-strong:#978b7d;--divider:#cdc8c2;--hover-wash:#00000014;--press-wash:#00000021;--selection-bg:#1a1917;--selection-fg:#fff;--signal:#8e6b46;--signal-dim:#8e6b461a;--signal-glow:#8e6b4638;--shadow-1:0 1px 3px #0000000a;--shadow-2:0 12px 40px #0000001a;--scrim-top:linear-gradient(to bottom,#e9e8e6e6,#e9e8e600);--scrim-bottom:linear-gradient(to top,#e9e8e6e6,#e9e8e600);--bg-primary:var(--bg);--bg-secondary:var(--bg-elev-1);--bg-tertiary:var(--bg-elev-2);--bg-elevated:var(--bg-elev-1);--bg-hover:#e0ddd8;--border:var(--border-tok);--border-light:var(--border-strong);--accent:var(--fg);--accent-hover:#33302c;--accent-dim:var(--hover-wash);--accent-glow:#0000001f;--accent-contrast:var(--bg);--editor-standout-bg:#24211d;--editor-standout-fg:#fff;--text-primary:var(--fg);--text-secondary:var(--fg-muted);--text-muted:var(--fg-subtle);--success:var(--fg);--warning:var(--signal);--danger:var(--signal);--attention-warning:#b98200;--attention-error:#c2453d;--attention-ok:#2e7d4f;--attention-info:#2f67b8;--shadow:var(--shadow-1);--shadow-lg:var(--shadow-2)}button[data-icon-action=true]{cursor:pointer;flex-shrink:0;line-height:1;min-width:36px!important;min-height:36px!important;box-shadow:none!important;color:var(--text-secondary,var(--fg))!important;background:0 0!important;border:0!important;border-radius:0!important;justify-content:center!important;align-items:center!important;padding:8px!important;display:inline-flex!important}button[data-icon-action=true]:hover:not(:disabled){color:var(--text-primary,var(--fg))!important}button[data-icon-action=true]:focus-visible{outline-offset:2px;outline:2px solid var(--signal)!important}button[data-icon-action=true]:disabled{cursor:not-allowed;opacity:.4!important}button[data-icon-action=true][aria-pressed=true]{text-underline-offset:5px;text-decoration:underline;color:var(--text-primary,var(--fg))!important}@media (pointer:coarse){button[data-icon-action=true]{min-width:44px!important;min-height:44px!important}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root[data-anim-theme="1"]:not([data-mode=white]){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0a0d13;--bg-elev-1:#0f141c;--bg-elev-2:#1a2230;--bg-inset:#0f141c;--fg:#d8dee8;--fg-muted:#8b98ac;--fg-subtle:#64748b;--fg-on-accent:#0a0d13;--border-tok:#232d3d;--border-strong:#303d50;--divider:#1a2230;--hover-wash:#8b98ac14;--press-wash:#8b98ac29;--selection-bg:#303d50;--selection-fg:#d8dee8;--bg-primary:#0a0d13;--bg-secondary:#0f141c;--bg-tertiary:#1a2230;--bg-elevated:#1a2230;--bg-hover:#232d3d;--border:#232d3d;--border-light:#303d50;--accent:#8b98ac;--accent-hover:#b6c0ce;--accent-dim:#8b98ac1f;--accent-glow:#8b98ac40;--accent-contrast:#0a0d13;--editor-standout-bg:#d8dee8;--editor-standout-fg:#0a0d13;--text-primary:#d8dee8;--text-secondary:#8b98ac;--text-muted:#64748b;--success:#8b98ac;--warning:#b6c0ce;--danger:#b6c0ce}html,body{background:var(--bg);width:100%;height:100%;color:var(--fg);font-family:var(--font-body);letter-spacing:var(--tr-body);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-size:14px;line-height:1.6;overflow:hidden}#root{width:100%;height:100%;overflow:hidden}.sm-app-shell{height:100dvh}@keyframes sm-navmenu-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.mobile-nav-menu{animation:.2s cubic-bezier(.22,1,.36,1) sm-navmenu-in}::selection{background:var(--selection-bg);color:var(--selection-fg)}.display,h1,h2{font-family:var(--font-display);font-style:italic;font-weight:200;line-height:var(--lh-tight);letter-spacing:var(--tr-display);margin:0}.display{line-height:var(--lh-display)}h3,h4{font-family:var(--font-body);font-weight:500;line-height:var(--lh-tight);letter-spacing:-.01em;margin:0}.eyebrow{color:var(--fg-muted);font-size:11px;font-weight:500}code,pre,.mono{font-family:var(--font-mono);font-size:.92em}.listing-identity code{font-family:inherit;font-size:inherit}button{font-family:var(--font-body);cursor:pointer;letter-spacing:var(--tr-body);border:none;outline:none}textarea,input,select{font-family:var(--font-body);outline:none}select{background-color:var(--bg-elev-1);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--r-2)}select option,select optgroup{background-color:var(--bg-elevated);color:var(--text-primary)}select option:checked{font-weight:600}.tsel-trigger{background-color:var(--bg-elev-1);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--r-2);font-family:var(--font-body);font-size:inherit;cursor:pointer;text-align:left;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;display:inline-flex}.tsel-trigger:hover{border-color:var(--border-strong)}.tsel-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.tsel-trigger:disabled{opacity:.5;cursor:default}.tsel-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tsel-caret{opacity:.7;flex:none;font-size:10px}.tsel-pop{z-index:100100;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-2);max-height:260px;padding:4px;overflow-y:auto;box-shadow:0 8px 28px #00000047}.tsel-opt{color:var(--text-primary);cursor:pointer;white-space:nowrap;border-radius:6px;align-items:center;gap:6px;padding:6px 8px;font-size:13px;display:flex}.tsel-opt[data-active=true]{background:var(--bg-elev-1)}.tsel-opt[aria-selected=true]{font-weight:600}.tsel-opt[aria-disabled=true]{color:var(--text-muted);cursor:default}.tsel-opt[aria-disabled=true][data-active=true]{background:0 0}.tsel-check{opacity:.8;flex:none;width:12px;font-size:11px}.tsel-opt-label{text-overflow:ellipsis;flex:auto;overflow:hidden}.tsel-note{cursor:help;width:16px;height:16px;color:var(--text-muted);border:1px solid var(--border);border-radius:999px;flex:none;justify-content:center;align-items:center;font-size:11px;display:inline-flex;position:relative}.tsel-note:hover{color:var(--text-primary);border-color:var(--border-strong)}.tsel-tip{z-index:100110;background:var(--text-primary);color:var(--bg-elevated);box-sizing:border-box;white-space:normal;pointer-events:none;border-radius:5px;max-width:min(260px,100vw - 16px);padding:4px 8px;font-size:11px;font-weight:600;box-shadow:0 2px 10px #0000004d}@media (width<=767.98px),(height<=480px) and (pointer:coarse){.tsel-opt{box-sizing:border-box;min-height:44px;font-size:14px}.tsel-note{flex:0 0 44px;width:44px;height:44px;font-size:14px}}.video-editor input,.video-editor select,.video-editor textarea{background:var(--bg-inset);width:100%;min-width:0;color:var(--fg);border:var(--bw-1) solid var(--border-strong);border-radius:var(--r-2);font-family:var(--font-body);accent-color:var(--signal);padding:7px 8px;font-size:12px}.video-editor,.mobile-editor-root{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.video-editor input,.video-editor select,.video-editor textarea,.video-editor [contenteditable=true],.mobile-editor-root input,.mobile-editor-root select,.mobile-editor-root textarea,.mobile-editor-root [contenteditable=true]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}.video-editor input[type=range]{background:0 0;border:0;padding:0}.video-editor input[type=checkbox]{width:auto;min-width:auto}.video-editor select:focus,.video-editor input:focus,.video-editor textarea:focus{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal-dim)}:focus-visible{outline:2px solid var(--signal);outline-offset:2px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-pill)}::-webkit-scrollbar-thumb:hover{background:var(--fg-subtle)}.sm-hide-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.sm-hide-scrollbar::-webkit-scrollbar{width:0;height:0;display:none}.btn{align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-4);border-radius:var(--r-pill);letter-spacing:var(--tr-body);transition:transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);font-size:13px;font-weight:500;display:inline-flex}.btn:active{transform:scale(.98)}.btn-primary{background:var(--fg);color:var(--bg)}.btn-primary:hover{background:var(--fg);opacity:.86}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-secondary{color:var(--fg);border:var(--bw-1) solid var(--border-strong);background:0 0}.btn-secondary:hover{background:var(--hover-wash);border-color:var(--fg)}.btn-ghost{color:var(--fg-muted);background:0 0;padding:6px 10px}.btn-ghost:hover{background:var(--hover-wash);color:var(--fg)}.btn-icon{color:var(--fg-muted);border-radius:var(--r-2);transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);background:0 0;justify-content:center;align-items:center;padding:5px;display:inline-flex}.btn-icon:hover{background:var(--hover-wash);color:var(--fg)}.btn-icon:active{transform:scale(.98)}.btn-icon:disabled{opacity:.4;cursor:not-allowed}.typing-indicator{align-items:center;gap:4px;padding:4px 0;display:flex}.typing-indicator span{border-radius:var(--r-pill);background:var(--fg-subtle);width:6px;height:6px;animation:1.2s infinite bounce}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,60%,to{opacity:.4;transform:translateY(0)}30%{opacity:1;transform:translateY(-5px)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}@keyframes toastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}button:focus-visible,[role=button]:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):is(:focus,:focus-visible),textarea:is(:focus,:focus-visible),select:is(:focus,:focus-visible),[contenteditable]:not([contenteditable=false]):is(:focus,:focus-visible){outline:none!important}@keyframes skeletonShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg,#ffffff08 0%,#ffffff1a 50%,#ffffff08 100%) 0 0/200% 100%;border-radius:6px;animation:1.4s ease-in-out infinite skeletonShimmer}.node-state-empty{border-style:dashed!important}.node-state-generating{box-shadow:0 0 0 2px var(--accent);position:relative}.node-state-generating:after{content:"";border-radius:inherit;pointer-events:none;will-change:opacity;animation:1.6s ease-in-out infinite nodePulse;position:absolute;inset:-2px;box-shadow:0 0 18px #f7c8328c}@keyframes nodePulse{0%,to{opacity:.36}50%{opacity:1}}.node-state-warning{position:relative;border-color:var(--attention-warning)!important}.node-state-warning:after{content:"";border-radius:inherit;pointer-events:none;box-shadow:0 0 0 1px var(--attention-warning), 0 0 14px color-mix(in srgb, var(--attention-warning) 40%, transparent);position:absolute;inset:-2px}.node-state-failed{border-top:4px solid #d04848!important}.node-state-failed:before{content:"⚠ ";color:#d04848;z-index:2;pointer-events:none;font-size:12px;font-weight:800;position:absolute;top:6px;left:8px}.react-flow__node{cursor:default}.react-flow__node.dragging,.react-flow__pane.dragging .react-flow__viewport{will-change:transform}.react-flow__node:not(.react-flow__node-sceneGroupNode):not(.react-flow__node-shotLabelNode):not(.react-flow__node-stickyNoteNode):not(.react-flow__node-transitionNode){box-shadow:1px 1px 0 var(--node-side,#d8cfb3), 2px 2px 0 var(--node-side,#d8cfb3), 3px 3px 0 var(--node-side,#d8cfb3), 4px 4px 0 var(--node-side,#d8cfb3), 5px 5px 0 var(--node-side,#d8cfb3), 6px 6px 0 var(--node-side,#d8cfb3), 7px 7px 0 var(--node-edge,#0a0a0a2e), 14px 16px 18px -4px #0a0a0a2e;border-radius:10px}[data-mode=dark] .react-flow__node:not(.react-flow__node-sceneGroupNode):not(.react-flow__node-shotLabelNode):not(.react-flow__node-stickyNoteNode):not(.react-flow__node-transitionNode){--node-side:#1f1d18;--node-edge:#f7f0db2e}.react-flow__controls{grid-template-columns:repeat(2,1fr)!important;display:grid!important}.react-flow__controls button{background:var(--bg-elev-2)!important;border-color:var(--border-tok)!important;color:var(--fg-muted)!important;fill:var(--fg-muted)!important}.react-flow__controls button:hover{background:var(--ink-300)!important}.react-flow__edge-path{stroke:var(--border-strong)}.react-flow.rf-edges-panning .react-flow__edges{display:none}.react-flow__node.node-controls-locked input,.react-flow__node.node-controls-locked textarea,.react-flow__node.node-controls-locked select,.react-flow__node.node-controls-locked button,.react-flow__node.node-controls-locked [role=button]{pointer-events:none!important}.react-flow__node.node-controls-locked{cursor:grab}.react-flow__node.node-controls-locked:active{cursor:grabbing}.react-flow__node.scene-add-available-node{filter:drop-shadow(0 0 10px #f7f0db38)}.react-flow__node.scene-add-available-node>div{outline:1px solid var(--border-strong);outline-offset:4px;border-radius:var(--r-3)}.react-flow__node.scene-add-available-node:after{content:"";border:1px dashed var(--border-strong);border-radius:var(--r-3);pointer-events:none;position:absolute;inset:-8px}.react-flow__node.node-replace-available{filter:drop-shadow(0 0 10px #f7f0db38)}.react-flow__node.node-replace-available>div{outline:1px solid var(--border-strong);outline-offset:4px;border-radius:var(--r-3)}.react-flow__node.node-replace-available:after{content:"";border:1px dashed var(--border-strong);border-radius:var(--r-3);pointer-events:none;position:absolute;inset:-8px}select option{background:var(--bg-elev-2);color:var(--fg)}.spinner{border:2px solid var(--border-tok);border-top-color:var(--fg);border-radius:var(--r-pill);width:16px;height:16px;animation:.7s linear infinite spin}.media-upload-preview:hover .media-upload-overlay{opacity:1!important}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important}}.assets-card .assets-card-overlay{opacity:0;transition:opacity .15s}.assets-card:hover .assets-card-overlay{opacity:1}.yt-video-row{transition:background .12s,box-shadow .12s,color .12s}.yt-video-row:hover{box-shadow:inset 2px 0 0 var(--accent), inset 0 0 14px var(--accent-glow);color:var(--text-primary);background:var(--hover-wash)!important}.chat-bubble ::selection{background:var(--signal);color:#0a0a0a}.chat-bubble ::selection{background:var(--signal);color:#0a0a0a}.chat-bubble:hover .chat-bubble-copy,.chat-bubble:focus-within .chat-bubble-copy,.chat-bubble-copy:hover,.chat-bubble-copy:focus{opacity:1!important}.chat-bubble-copy:hover{background:var(--bg-elevated-2,var(--bg-elevated));color:var(--text-primary)!important}.chat-bubble-copy:active{transform:scale(.94)}.sm-brand .sm-brandmark{transform-origin:50%;transition:transform .76s cubic-bezier(.2,.8,.2,1),filter .28s}.sm-brand:hover .sm-brandmark{filter:drop-shadow(0 0 7px color-mix(in srgb, currentColor 45%, transparent));will-change:transform, filter;transform:perspective(340px)rotateY(360deg)scale(1.06)}.sm-brand .sm-word{transition:transform .3s cubic-bezier(.2,.8,.2,1);transform:translate(-4px)}.sm-brand:hover .sm-word{will-change:transform;transform:translate(-4px,-1px)}@media (prefers-reduced-motion:reduce){.sm-brand .sm-brandmark{transition:transform .24s,filter .24s}.sm-brand:hover .sm-brandmark{transform:scale(1.06)}.sm-brand:hover .sm-word{transform:translate(-4px)}}body.sm-mobile-ui input,body.sm-mobile-ui textarea,body.sm-mobile-ui select{font-size:16px!important}body.sm-mobile-ui button,body.sm-mobile-ui select,body.sm-mobile-ui [role=button]{min-height:44px}body.sm-mobile-ui select:not([multiple]):not([size]){height:max(44px,2.75em)}body.sm-mobile-ui button.btn-icon,body.sm-mobile-ui button[data-compact],body.sm-mobile-ui .no-min-tap{min-height:0}body.sm-mobile-ui .yt-video-row{min-width:560px}:where(html:has(.sm-block)){container-type:inline-size}:where(.sm-block){gap:var(--s-5,24px);min-width:0;display:grid}:where(.sm-block,.sm-block *){box-sizing:border-box}:where(.sm-block)>:where(*){min-width:0}@container (width>=720px){:where(.sm-block[data-layout=split]){grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);align-items:start}:where(.sm-block[data-layout=split])>:where(.sm-stage){grid-row:span 6}}@container (width>=860px){:where(.sm-block:not([data-layout]):has(>.sm-stage)){align-items:start;column-gap:var(--s-5,24px);row-gap:var(--s-4,16px);grid-template-columns:minmax(300px,380px) minmax(0,1fr)}:where(.sm-block:not([data-layout]):has(>.sm-stage))>:where(*){grid-column:1}:where(.sm-block:not([data-layout]):has(>.sm-stage))>:where(.sm-stage){grid-area:1/2/span 12;align-self:stretch;min-height:min(70vh,640px)}:where(.sm-block:not([data-layout]):has(>.sm-stage))>:where(.sm-stage[data-ratio]){align-self:start;min-height:0}}:where(.sm-row){align-items:center;gap:var(--s-2,8px);flex-wrap:wrap;display:flex}@container (width<=519px){:where(.sm-clamp:not([data-open])){-webkit-line-clamp:var(--sm-lines,5);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}}:where(.sm-stage){min-height:220px;padding:var(--s-3,12px);border-radius:var(--r-3,8px);background:var(--bg-inset);place-items:center;display:grid;position:relative;overflow:hidden}:where(.sm-stage[data-ratio="16:9"]){aspect-ratio:16/9;min-height:0}:where(.sm-stage[data-ratio="9:16"]){aspect-ratio:9/16;justify-self:center;width:auto;height:min(70vh,640px);min-height:0;max-height:70vh}:where(.sm-stage[data-ratio="1:1"]){aspect-ratio:1;min-height:0}:where(.sm-stage)>:where(img,video,canvas){object-fit:contain;border-radius:var(--r-2,4px);max-width:100%;max-height:100%;display:block}:where(.sm-stage[data-fill])>:where(img,video,canvas){object-fit:cover;width:100%;height:100%}:where(.sm-empty){justify-items:center;gap:var(--s-3,12px);padding:var(--s-5,24px) var(--s-4,16px);text-align:center;color:var(--fg-muted);display:grid}:where(.sm-empty)>:where(.sm-glyph){--sm-glyph-size:40px;color:var(--fg-subtle)}:where(.sm-empty)>:where(p){max-width:24ch;font-size:var(--fs-body,1rem);margin:0}:where(.sm-drop){outline:1px dashed var(--border-tok);outline-offset:-8px}:where(.sm-drop[data-over]){outline-color:var(--fg);background:var(--hover-wash)}:where(.sm-actions){align-items:center;gap:var(--s-2,8px);flex-wrap:wrap;display:flex}:where(.sm-actions)>:where(.sm-status){margin-inline-start:var(--s-2,8px)}:where(.sm-primary,.sm-quiet){justify-content:center;align-items:center;gap:var(--s-2,8px);min-height:var(--touch-target,44px);border-radius:var(--r-pill,999px);font:inherit;cursor:pointer;text-align:center;overflow-wrap:anywhere;max-width:100%;padding:10px 20px;font-weight:500;display:inline-flex}:where(.sm-primary){border:1px solid var(--fg);background:var(--fg);color:var(--bg)}:where(.sm-quiet){border:1px solid var(--border-tok);color:var(--fg);background:0 0}:where(.sm-quiet):hover{background:var(--hover-wash)}:where(.sm-icon){min-width:var(--touch-target,44px);min-height:var(--touch-target,44px);border-radius:var(--r-2,4px);color:var(--fg-muted);cursor:pointer;background:0 0;border:0;place-items:center;padding:0;display:inline-grid}:where(.sm-icon):hover{color:var(--fg);background:var(--hover-wash)}:where(.sm-icon[aria-pressed=true]){color:var(--fg);background:var(--press-wash)}:where(.sm-primary,.sm-quiet,.sm-icon):disabled{opacity:.45;cursor:default}:where(.sm-primary,.sm-quiet,.sm-icon):focus-visible{outline:2px solid var(--signal);outline-offset:3px}@container (width<=420px){:where(.sm-actions)>:where(.sm-primary){flex:100%}}:where(.sm-field){gap:6px;min-width:0;display:grid}:where(.sm-field)>:where(label,.sm-label){align-items:center;gap:var(--s-1,4px);font-size:var(--fs-body-s,.875rem);color:var(--fg-muted);min-height:24px;display:flex}:where(.sm-field) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){width:100%;min-height:var(--touch-target,44px);border:1px solid var(--border-tok);border-radius:var(--r-3,8px);background:var(--bg-elev-1);color:var(--fg);font:inherit;padding:10px 12px}:where(.sm-field) :where(textarea){resize:vertical;min-height:96px}:where(.sm-fields){gap:var(--s-4,16px);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));display:grid}@container (width>=520px){:where(.sm-field:not(:has(textarea,.sm-choices,.sm-gallery,.sm-list))){align-items:center;gap:var(--s-2,8px);grid-template-columns:minmax(5rem,9rem) minmax(0,1fr)}:where(.sm-field) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]),select){min-height:36px;padding:6px 10px}:where(.sm-fields){gap:var(--s-2,8px) var(--s-4,16px)}}:where(.sm-choices){gap:var(--s-2,8px);grid-template-columns:repeat(auto-fill,minmax(var(--sm-tile,96px),1fr));border:0;min-width:0;margin:0;padding:0;display:grid}:where(.sm-choices[data-size=wide]){--sm-tile:160px}:where(.sm-choices)>:where(legend){font-size:var(--fs-body-s,.875rem);color:var(--fg-muted);margin-bottom:6px;padding:0}:where(.sm-choices)>:where(label){padding:var(--s-2,8px);border:1px solid var(--border-tok);border-radius:var(--r-3,8px);background:var(--bg-elev-1);color:var(--fg-muted);font-size:var(--fs-caption,.8125rem);text-align:center;cursor:pointer;align-content:start;justify-items:center;gap:6px;display:grid;position:relative}:where(.sm-choices)>:where(label):hover{border-color:var(--border-strong);color:var(--fg)}:where(.sm-choices) :where(input[type=radio],input[type=checkbox]){opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}:where(.sm-choices)>:where(label:has(input:checked)){border-color:var(--fg);color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}:where(.sm-choices)>:where(label:has(input:focus-visible)){outline:2px solid var(--signal);outline-offset:2px}:where(.sm-choices) :where(img,video,canvas,.sm-swatch){width:100%;aspect-ratio:var(--sm-tile-ratio,1);object-fit:cover;border-radius:var(--r-2,4px);background:var(--bg-inset);display:block}:where(.sm-choices) :where(.sm-glyph){--sm-glyph-size:28px;margin:10px 0 4px}:where(.sm-choices[data-ratio="16:9"]){--sm-tile-ratio:16/9}:where(.sm-choices[data-ratio="9:16"]){--sm-tile-ratio:9/16}:where(.sm-choices[data-compact])>:where(label){min-height:var(--touch-target,44px);grid-auto-flow:column;place-content:center;align-items:center;padding:6px 12px}:where(.sm-choices[data-compact]) :where(.sm-glyph){--sm-glyph-size:18px;margin:0}:where(.sm-choices) :where(audio){z-index:1;width:100%;height:32px;position:relative}:where(.sm-shape){box-sizing:border-box;width:calc(var(--sm-shape-size,32px) * min(1,var(--r,1)));aspect-ratio:var(--r,1);border:2px solid;border-radius:3px;max-width:100%;margin:4px auto;display:block}:where(.sm-choices)>:where(label:has(.sm-shape)){grid-template-rows:1fr auto;align-content:stretch}:where(.sm-choices) :where(.sm-shape){--sm-shape-size:36px;align-self:center;margin:6px auto 2px}:where(.sm-choices[data-compact]) :where(.sm-shape){--sm-shape-size:20px;margin:0}:where(.sm-choices[data-segmented]){gap:0;width:fit-content;max-width:100%;display:flex}:where(.sm-choices[data-segmented])>:where(label){min-height:36px;font-size:var(--fs-body-s,.875rem);white-space:nowrap;border-radius:0;justify-content:center;align-items:center;gap:6px;padding:4px 12px;display:inline-flex}:where(.sm-choices[data-segmented])>:where(label+label){margin-inline-start:-1px}:where(.sm-choices[data-segmented])>:where(label:first-of-type){border-start-start-radius:var(--r-pill,999px);border-end-start-radius:var(--r-pill,999px)}:where(.sm-choices[data-segmented])>:where(label:last-of-type){border-start-end-radius:var(--r-pill,999px);border-end-end-radius:var(--r-pill,999px)}:where(.sm-choices[data-segmented])>:where(label:has(input:checked)){z-index:1;background:var(--bg-elev-2);position:relative}:where(.sm-choices[data-segmented]) :where(.sm-glyph){--sm-glyph-size:16px;margin:0}:where(.sm-settings){gap:var(--s-3,12px) var(--s-4,16px);grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr));align-items:start;min-width:0;display:grid}:where(.sm-settings)>:where(.sm-field){grid-template-columns:minmax(0,1fr);gap:4px}:where(.sm-settings)>:where(.sm-choices)>:where(legend),:where(.sm-settings) :where(.sm-label){font-size:var(--fs-caption,.8125rem)}@container (width<=519px){:where(.sm-choices[data-compact],.sm-choices[data-segmented]){scrollbar-width:none;flex-wrap:nowrap;width:auto;display:flex;overflow-x:auto}:where(.sm-choices[data-compact])>:where(label),:where(.sm-choices[data-segmented])>:where(label){flex:none}}:where(.sm-list){border:1px solid var(--border-tok);border-radius:var(--r-3,8px);background:var(--bg-elev-1);min-width:0;margin:0;padding:0;list-style:none;display:grid;overflow:hidden}:where(.sm-list)>:where(li){align-items:center;gap:var(--s-2,8px);min-width:0;min-height:40px;padding:4px var(--s-2,8px);border-bottom:1px solid var(--divider);display:flex}:where(.sm-list)>:where(li:last-child){border-bottom:0}:where(.sm-list)>:where(li:has(>details)){padding:0;display:block}:where(.sm-list)>:where(li)>:where(details)>:where(summary){align-items:center;gap:var(--s-2,8px);min-height:40px;padding:4px var(--s-2,8px);cursor:pointer;list-style:none;display:flex}:where(.sm-list)>:where(li)>:where(details)>:where(summary)::-webkit-details-marker{display:none}:where(.sm-list)>:where(li)>:where(details[open]){background:var(--bg-inset)}:where(.sm-list)>:where(li)>:where(details)>:where(:not(summary)){padding:var(--s-2,8px) var(--s-3,12px) var(--s-3,12px)}:where(.sm-list) :where(img,video,canvas,.sm-swatch){object-fit:cover;border-radius:var(--r-2,4px);background:var(--bg-inset);flex:none;width:40px;height:26px}:where(.sm-list) :where(.sm-line){white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}:where(.sm-list) :where(small){color:var(--fg-subtle);font-size:var(--fs-caption,.8125rem);white-space:nowrap;font-variant-numeric:tabular-nums;flex:none}:where(.sm-list)>:where(.sm-list-more){display:none}@container (width<=519px){:where(.sm-list[data-peek]:not([data-open]))>:where(li:nth-child(n+4):not(.sm-list-more)){display:none}:where(.sm-list[data-peek]:not([data-open]))>:where(.sm-list-more){color:var(--fg-muted);display:flex}}:where(.sm-gallery){gap:var(--s-2,8px);grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--sm-tile,140px)),1fr));margin:0;padding:0;list-style:none;display:grid}:where(.sm-gallery)>:where(*){border-radius:var(--r-3,8px);background:var(--bg-inset);margin:0;position:relative;overflow:hidden}:where(.sm-gallery) :where(img,video,canvas){width:100%;aspect-ratio:var(--sm-tile-ratio,1);object-fit:cover;display:block}:where(.sm-gallery) :where(figcaption){font-size:var(--fs-caption,.8125rem);color:var(--fg-muted);padding:6px 8px}:where(.sm-gallery) :where([aria-selected=true],.is-selected){box-shadow:inset 0 0 0 2px var(--fg)}:where(.sm-gallery[data-size=small]){--sm-tile:92px;--sm-tile-ratio:3/2}:where(.sm-status){align-items:center;gap:var(--s-2,8px);min-height:24px;font-size:var(--fs-body-s,.875rem);color:var(--fg-muted);display:inline-flex}:where(.sm-status):empty{display:none}:where(.sm-status[data-state]):before{content:"";background:currentColor;border-radius:50%;flex:none;width:14px;height:14px}:where(.sm-status[data-state=loading]):before{background:0 0;border:2px solid;border-right-color:#0000;animation:.8s linear infinite sm-spin}:where(.sm-status[data-state=success]){color:var(--attention-ok,var(--fg))}:where(.sm-status[data-state=success]):before{background:0 0;border:2px solid;border-width:0 2px 2px 0;border-radius:0;width:6px;height:11px;margin:0 4px 3px;transform:rotate(45deg)}:where(.sm-status[data-state=waiting]){color:var(--attention-warning,var(--signal))}:where(.sm-status[data-state=waiting]):before{width:8px;height:8px;margin:0 3px}:where(.sm-status[data-state=error]){color:var(--attention-error,var(--signal))}:where(.sm-status[data-state=error]):before{clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0}:where(.sm-progress){border-radius:var(--r-pill,999px);background:var(--bg-elev-2);width:100%;height:4px;accent-color:var(--fg);appearance:none;border:0;overflow:hidden}:where(.sm-progress)::-webkit-progress-bar{background:var(--bg-elev-2)}:where(.sm-progress)::-webkit-progress-value{background:var(--fg)}:where(.sm-progress)::-moz-progress-bar{background:var(--fg)}:where(.sm-more){border-top:1px solid var(--divider)}:where(.sm-more)>:where(summary){align-items:center;gap:var(--s-2,8px);min-height:var(--touch-target,44px);color:var(--fg-muted);font-size:var(--fs-body-s,.875rem);cursor:pointer;padding:0;list-style:none;display:flex}:where(.sm-more)>:where(summary)::-webkit-details-marker{display:none}:where(.sm-more)>:where(summary):after{content:"";width:7px;height:7px;transition:transform var(--dur-fast,.16s) var(--ease-out,ease);border:1.5px solid;border-width:0 1.5px 1.5px 0;margin-inline-start:2px;transform:translateY(-2px)rotate(45deg)}:where(.sm-more[open])>:where(summary):after{transform:translateY(2px)rotate(-135deg)}:where(.sm-more)>:where(summary):hover{color:var(--fg)}:where(.sm-more)>:where(:not(summary)){margin-top:var(--s-2,8px)}:where(.sm-more[open]){padding-bottom:var(--s-3,12px)}:where(.sm-label){position:relative}:where(.sm-hint){vertical-align:middle;display:inline-block}:where(:not(.sm-label))>:where(.sm-hint){position:relative}:where(.sm-hint)>:where(summary){width:var(--touch-target,44px);height:var(--touch-target,44px);min-height:0;color:var(--fg-subtle);cursor:pointer;border:0;place-items:center;margin:-8px;padding:0;list-style:none;display:inline-grid}:where(.sm-hint)>:where(summary)::-webkit-details-marker{display:none}:where(.sm-hint)>:where(summary):before{content:"i";width:15px;height:15px;font:600 10px/1 var(--font-body);border:1.5px solid;border-radius:50%;place-items:center;font-style:normal;display:grid}:where(.sm-hint)>:where(summary):hover,:where(.sm-hint[open])>:where(summary){color:var(--fg)}:where(.sm-hint)>:where(:not(summary)){z-index:5;inset-inline-start:0;border:1px solid var(--border-tok);border-radius:var(--r-3,8px);background:var(--bg-elev-2);width:max-content;max-width:min(280px,100%);color:var(--fg);font-size:var(--fs-body-s,.875rem);box-shadow:var(--shadow-1);margin:4px 0 0;padding:10px 12px;line-height:1.45;position:absolute;top:100%}:where(:not(.sm-label))>:where(.sm-hint[open]){display:block}:where(:not(.sm-label))>:where(.sm-hint)>:where(:not(summary)){width:auto;max-width:60ch;position:static}:where(.sm-glyph){--g:var(--sm-glyph-size,20px);width:var(--g);height:var(--g);color:inherit;vertical-align:middle;flex:none;display:inline-block;position:relative}:where(.sm-glyph):before,:where(.sm-glyph):after{content:"";box-sizing:border-box;position:absolute}:where(.sm-glyph[data-glyph=play]):before{clip-path:polygon(0 0,100% 50%,0 100%);background:currentColor;inset:15% 15% 15% 25%}:where(.sm-glyph[data-glyph=pause]):before{border:solid;border-width:0 calc(var(--g)*.14);inset:18% 25%}:where(.sm-glyph[data-glyph=plus]):before,:where(.sm-glyph[data-glyph=close]):before{background:linear-gradient(currentColor,currentColor) 50%/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 50%/2px 100% no-repeat;inset:15%}:where(.sm-glyph[data-glyph=close]):before{transform:rotate(45deg)}:where(.sm-glyph[data-glyph=check]):before{border:2px solid;border-width:0 2px 2px 0;width:30%;height:58%;top:12%;left:36%;transform:rotate(45deg)}:where(.sm-glyph[data-glyph=chevron]):before{border:2px solid;border-width:0 2px 2px 0;width:40%;height:40%;top:22%;left:30%;transform:rotate(45deg)}:where(.sm-glyph[data-glyph=upload]):before{border:2px solid;border-top:0;border-radius:0 0 3px 3px;height:35%;bottom:10%;left:10%;right:10%}:where(.sm-glyph[data-glyph=upload]):after{clip-path:polygon(50% 0,100% 45%,60% 45%,60% 100%,40% 100%,40% 45%,0 45%);background:currentColor;height:62%;top:4%;left:25%;right:25%}:where(.sm-glyph[data-glyph=image]):before{border:2px solid;border-radius:3px;inset:12%}:where(.sm-glyph[data-glyph=image]):after{clip-path:polygon(0 100%,35% 20%,60% 65%,75% 45%,100% 100%);background:currentColor;height:34%;bottom:24%;left:22%;right:22%}:where(.sm-glyph[data-glyph=video]):before{border:2px solid;border-radius:3px;inset:22% 28% 22% 8%}:where(.sm-glyph[data-glyph=video]):after{clip-path:polygon(0 35%,100% 0,100% 100%,0 65%);background:currentColor;width:20%;top:30%;bottom:30%;right:8%}:where(.sm-glyph[data-glyph=audio]):before{background:linear-gradient(currentColor,currentColor) 0 60%/2px 40% no-repeat,linear-gradient(currentColor,currentColor) 33%/2px 80% no-repeat,linear-gradient(currentColor,currentColor) 66%/2px 100% no-repeat,linear-gradient(currentColor,currentColor) 100% 60%/2px 50% no-repeat;inset:15% 12%}:where(.sm-glyph[data-glyph=text]):before{background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/60% 2px no-repeat;inset:20% 12%}:where(.sm-glyph[data-glyph=spark]):before{clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);background:currentColor;inset:8%}:where(.sm-glyph[data-glyph=info]):before{border:2px solid;border-radius:50%;inset:10%}:where(.sm-glyph[data-glyph=info]):after{background:linear-gradient(currentColor,currentColor) 0 0/2px 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/2px 60% no-repeat;width:2px;height:46%;margin-left:-1px;top:28%;left:50%}:where(.sm-glyph[data-glyph=warning]):before{clip-path:polygon(50% 0,100% 100%,0 100%);background:currentColor;inset:8% 4% 10%}:where(.sm-glyph[data-glyph=warning]):after{background:linear-gradient(var(--bg),var(--bg)) 0 0/2px 60% no-repeat,linear-gradient(var(--bg),var(--bg)) 0 100%/2px 2px no-repeat;width:2px;height:38%;margin-left:-1px;top:38%;left:50%}:where(.sm-glyph[data-glyph=spinner]):before{border:2px solid;border-right-color:#0000;border-radius:50%;animation:.8s linear infinite sm-spin;inset:12%}:where([class*=sm-][hidden]){display:none!important}:where(.sm-sr){clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes sm-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){:where(.sm-status[data-state=loading]):before,:where(.sm-glyph[data-glyph=spinner]):before{opacity:.6;border-right-color:currentColor;animation:none}:where(.sm-more)>:where(summary):after{transition:none}}.sm-quiet{border:1px solid var(--border-tok)}html,body{background:var(--bg);color:var(--fg);margin:0}.dh-page{min-height:100dvh;font-family:var(--font-body);flex-direction:column;display:flex}.dh-header{justify-content:space-between;align-items:flex-end;gap:var(--s-4,16px);padding:var(--s-5,20px) var(--s-6,24px) var(--s-4,16px);border-bottom:var(--bw-1,1px) solid var(--border-tok);flex-wrap:wrap;display:flex}.dh-title{gap:var(--s-1,4px);min-width:0;display:grid}.dh-wordmark{color:var(--fg-muted);font-size:13px}.dh-title h1{font-family:var(--font-display);letter-spacing:var(--tr-display);overflow-wrap:anywhere;margin:0;font-size:30px;font-style:italic;font-weight:200;line-height:1.1}.dh-meta{color:var(--fg-muted);overflow-wrap:anywhere;font-size:12px}.dh-controls{align-items:flex-end;gap:var(--s-3,12px);flex-wrap:wrap;display:flex}.dh-controls label{gap:var(--s-1,4px);color:var(--fg-muted);font-size:12px;display:grid}.dh-controls select{min-height:36px;padding:0 var(--s-3,12px);border:var(--bw-1,1px) solid var(--border-tok);border-radius:var(--r-2);background:var(--bg-elev-1);color:var(--fg);font:inherit;font-size:13px}.dh-controls select:focus-visible,.dh-input textarea:focus-visible,.dh-page .btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}.dh-problem{margin:var(--s-4,16px) var(--s-6,24px) 0;padding:var(--s-3,12px) var(--s-4,16px);border:var(--bw-1,1px) solid var(--border-strong);border-radius:var(--r-2);background:var(--bg-elev-1);white-space:pre-wrap;overflow-wrap:anywhere}.dh-main{gap:var(--s-6,24px);padding:var(--s-6,24px);flex:1;grid-template-columns:minmax(0,1fr) minmax(280px,380px);display:grid}.dh-stage{min-width:0}.dh-frame{min-width:0;margin:0 auto}.dh-noview{gap:var(--s-4,16px);padding:var(--s-6,24px);border:var(--bw-1,1px) solid var(--border-tok);border-radius:var(--r-3);justify-items:start;display:grid}.dh-noview p{color:var(--fg-muted);margin:0}.dh-panel{gap:var(--s-5,20px);flex-direction:column;min-width:0;display:flex}.dh-section-head{justify-content:space-between;align-items:center;gap:var(--s-2,8px);margin-bottom:var(--s-2,8px);display:flex}.dh-section-head h2{letter-spacing:var(--tr-body);margin:0;font-size:13px;font-weight:600}.dh-input textarea{box-sizing:border-box;width:100%;padding:var(--s-3,12px);border:var(--bw-1,1px) solid var(--border-tok);border-radius:var(--r-2);background:var(--bg-elev-1);color:var(--fg);font-family:var(--font-mono);resize:vertical;font-size:12px;line-height:1.5}.dh-input p,.dh-muted{margin:var(--s-2,8px) 0 0;color:var(--fg-muted);font-size:13px}.dh-json{max-height:240px;padding:var(--s-3,12px);border:var(--bw-1,1px) solid var(--border-tok);border-radius:var(--r-2);background:var(--bg-elev-1);font-family:var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font-size:12px;line-height:1.5;overflow:auto}.dh-console{flex-direction:column;min-height:0;display:flex}.dh-console ol{border-top:var(--bw-1,1px) solid var(--divider);max-height:360px;margin:0;padding:0;list-style:none;overflow:auto}.dh-entry{gap:var(--s-2,8px);padding:var(--s-2,8px) 0;border-bottom:var(--bw-1,1px) solid var(--divider);grid-template-columns:auto auto minmax(0,1fr);align-items:baseline;font-size:12px;display:grid}.dh-entry time{color:var(--fg-muted);font-variant-numeric:tabular-nums}.dh-kind{color:var(--fg-muted);font-size:11px}.dh-entry pre{font-family:var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.dh-error .dh-kind,.dh-error pre{color:var(--fg);font-weight:600}.dh-stand-in .dh-kind{color:var(--signal)}@media (width<=900px){.dh-main{padding:var(--s-4,16px);grid-template-columns:minmax(0,1fr)}.dh-header{padding:var(--s-4,16px)}}

package/packages/block-platform/segment-runner.js

@@ -114,7 +114,9 @@ export async function planSegment(projectType,canvas,startStepId,{interactive=fa
    const outputContract=pin?{...currentOutputContract,...pin.outputContract}:currentOutputContract;
    return {...edge,outputContract:structuredClone(outputContract),...(savedSource?{savedSource}:{})};
   }));
-  if(!includeIndependent && steps.length && !automationRoot && !incoming.some(edge=>selected.has(edge.from.stage))){nextStageId=placement.id;stopReason='unconnected-step';break;}
+  // A part of the job being run belongs to it even when no wire joins it to the
+  // part before (Export video reads the shot plan Shots keeps in the project).
+  if(!includeIndependent && steps.length && !automationRoot && !jobParts.length && !incoming.some(edge=>selected.has(edge.from.stage))){nextStageId=placement.id;stopReason='unconnected-step';break;}
   assert(incoming.every(edge=>reuseCurrentSources?!!edge.savedSource || active.findIndex(step=>step.id===edge.from.stage)<active.indexOf(placement):includeIndependent?selected.has(edge.from.stage) || active.findIndex(step=>step.id===edge.from.stage)<start:active.findIndex(step=>step.id===edge.from.stage)<active.indexOf(placement)),'SEGMENT_ORDER',includeIndependent?'A required source is outside this local run. Start from that source or review the workflow boundary.':'A production Step depends on a later Step. Reorder the workflow first');
   const candidates=graph.nodes.filter(node=>node.id===stageNodeId(placement)),node=candidates[0];
   assert(candidates.length===1 && node.type==='programmableBlockNode','SEGMENT_PIN','The compiled Step is missing or duplicated');
@@ -133,7 +135,8 @@ export async function planSegment(projectType,canvas,startStepId,{interactive=fa
  assert(steps.length,'SEGMENT_RUNTIME','Choose a recipe or JavaScript Step to run a connected segment');
  if(endStepId!==undefined && stopReason==='complete' && active[end+1]){nextStageId=active[end+1].id;stopReason='selection-boundary';}
  const semanticManifests=active.map(stage=>packageForStage(type,stage,BUILTIN_BLOCKS)?.manifest).filter(manifest=>manifest?.semantics?.length).map(manifest=>({id:manifest.id,version:manifest.version,semantics:structuredClone(manifest.semantics)}));
- const plan={schemaVersion:1,workflowDigest:compiled.digest,startStepId,steps,nextStageId,stopReason,...(includeIndependent?{includeIndependent:true}:{}),...(unattended?{unattended:true}:{}),...(unattendedText?{unattendedText:true}:{}),...(unattendedImage?{unattendedImage:true}:{}),...(background&&steps.some(step=>step.package.manifest.state)?{background:true}:{}),...(interactive&&(includeIndependent||steps.some(step=>isBrowserApplication(step.package)||requiresDesktopExecution(step.package)||remoteRuntime(step.package.manifest.runtime)||step.package.manifest.state||hasInteractiveRequirements(step.package)||hasInteractiveRequirements(step.fallbackPackage)))?{interactive:true}:{})};
+ // A whole-job run keeps `interactive`, so re-planning it before each part covers the same job.
+ const plan={schemaVersion:1,workflowDigest:compiled.digest,startStepId,steps,nextStageId,stopReason,...(includeIndependent?{includeIndependent:true}:{}),...(unattended?{unattended:true}:{}),...(unattendedText?{unattendedText:true}:{}),...(unattendedImage?{unattendedImage:true}:{}),...(background&&steps.some(step=>step.package.manifest.state)?{background:true}:{}),...(interactive&&(jobParts.length||includeIndependent||steps.some(step=>isBrowserApplication(step.package)||requiresDesktopExecution(step.package)||remoteRuntime(step.package.manifest.runtime)||step.package.manifest.state||hasInteractiveRequirements(step.package)||hasInteractiveRequirements(step.fallbackPackage)))?{interactive:true}:{})};
  if(semanticManifests.length)plan.semanticManifests=semanticManifests;
  if(type.projectInputs?.length){plan.projectInputs=structuredClone(type.projectInputs);plan.projectTypeIdentity={id:type.id,version:type.version};}
  if(reuseCurrentSources){plan.reuseCurrentSources=true;plan.interactive=true;}

package/packages/block-sdk/builder-contract.js

@@ -9,7 +9,7 @@
 import {HOSTED_OPERATION_NAMES} from './contracts.js';
 
 export const BUILDER_CONTRACT_ID='stillmade.block-builder';
-export const BUILDER_CONTRACT_VERSION='1.5.2';
+export const BUILDER_CONTRACT_VERSION='1.5.4';
 export const BUILDER_CONTRACT_STAMP=`${BUILDER_CONTRACT_ID}@${BUILDER_CONTRACT_VERSION}`;
 export const BUILDER_CONTRACT_DOCS_PATH='/docs/build/block-builder-contract';
 // Block names appear in step bars, cards and pickers; new releases keep them short.
@@ -57,7 +57,7 @@ const SECTIONS=Object.freeze([
   `Give the Block a short, plain name of ${BLOCK_NAME_MAX_LENGTH} characters or fewer that says what it does ("Captioned Clip", not "Captioned Business Clip Generator With Review"). The name appears in step bars, Project Type cards and pickers, so put the detail in the description instead. New releases with a longer name do not pass readiness.`),
  rule('ui','block',
   'Prefer `manifest.ui`; custom views use the Block kit (`sm-*` classes) unless a look is named. Pictures over words: preview each option before choosing; cut needless words, fold the rest; the start button names the action (never "Run") and shows no price (StillMade adds it); fit one screen unscrolled and a 320px phone.',
-  'If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction genuinely needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (Write, Generate; never "Run") and no price (StillMade\'s run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Expose the capability, not the implementation: meaningful controls, sensible defaults, preview, direct manipulation, progress, clear errors and visible outputs. Do not show raw JSON, internal IDs, filesystem details, provider terminology or developer settings unless the Block is itself a developer tool. When a person chooses among options they need to hear or see (voices, music, sounds, fonts, looks, colors, templates or images), let them preview each option before choosing: a sample to play or a thumbnail, from the Block\'s own files or the host\'s free samples, never a paid generation. Leave previews out only when the builder states there is nothing to preview. Choices StillMade owns, such as voices and models in the run review, already show their samples. Follow the host appearance (Light, Dark and White) and the mobile layout contract: one interface for every screen size that fits a 320 CSS-pixel phone without horizontal scrolling.'),
+  'If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction genuinely needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (Write, Generate; never "Run") and no price (StillMade\'s run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Expose the capability, not the implementation: sensible defaults, previews, progress, clear errors, visible outputs. Do not show raw JSON, internal IDs, filesystem details, provider terminology or developer settings unless the Block is itself a developer tool. When a person chooses among options they need to hear or see (voices, music, sounds, fonts, looks, colors, templates or images), let them preview each option before choosing: a sample to play or a thumbnail, from the Block\'s own files or the host\'s free samples, never a paid generation. Leave previews out only when the builder states there is nothing to preview. Choices StillMade owns, such as voices and models in the run review, already show their samples. Follow the host appearance (Light, Dark and White) and one elastic layout: stacked on a 320px phone with no sideways scroll (result first, action pinned), and from 860px the controls left (≤380px), the result filling the right. Short settings sit side by side (`sm-settings`; three or four short options as one `data-segmented` row); many items are one line each (`sm-list`) that open in place; input files are small tiles (`sm-gallery data-size="small"`); on a phone chip rows scroll sideways and long lists show three. Compacting moves controls, never deletes them.'),
  rule('multiplayer','block',
   'Custom views share edits: `StillMade.onShared`, publish every editable field (`data-stillmade-share`, `bindShared`, `updateShared`), respect `canEdit`, never re-run on remote updates.',
   'Projects are multiplayer. A custom view subscribes through `StillMade.onShared(callback)` and publishes every editable field: give static controls a unique `id` and `data-stillmade-share="field"` (the host owns their synchronization), use `StillMade.bindShared(field, elementId)` for controls created dynamically, and `StillMade.updateShared(values, before, options)` for structured values; private variables and DOM values are not shared. Mark a truly device-only control (playback, hover, device selection) with `data-stillmade-local`. Observe shared outputs as well as state, honor `canEdit` in every mutating callback (read-only participants cannot write), never run, click or call a paid integration in response to a remote update, and preserve conflicting drafts. Shared background work uses `sharedWork` with the `work.shared` permission.'),

package/packages/block-sdk/view-design.js

@@ -8,16 +8,19 @@
 export const BLOCK_KIT_CSS_PATH='packages/design-system/block-kit.css';
 export const BLOCK_KIT_REFERENCE_PATH='packages/design-system/block-kit.html';
 export const BLOCK_KIT_CLASSES=Object.freeze({
- 'sm-block':'The one workspace. data-layout="split" puts the stage beside the controls on wide screens.',
+ 'sm-block':'The one workspace. From 860px wide, a direct sm-stage child moves to the right and the controls keep a 300–380px column on the left; data-layout="stack" keeps one column, "split" puts the stage first at 1.6:1.',
  'sm-stage':'The thing being made: preview, media or result. The biggest area; data-ratio="16:9|9:16|1:1".',
  'sm-empty':'What an empty stage shows: an .sm-glyph, at most five words and one action.',
- 'sm-choices':'A fieldset of radio labels shown as pictures (img, .sm-swatch or .sm-glyph) and one or two words; replaces word dropdowns. data-compact for short text chips.',
+ 'sm-choices':'A fieldset of radio labels shown as pictures (img, .sm-swatch or .sm-glyph) and one or two words; replaces word dropdowns. data-compact for short text chips, data-segmented for one connected row (Low / Med / High). On a phone chips and segments scroll sideways.',
  'sm-field':'A short label above one control. Group several in .sm-fields.',
+ 'sm-settings':'Short settings side by side, each label above its control; .sm-choices[data-segmented] inside for three or four short options.',
+ 'sm-list':'Many items one line each (thumbnail, one line of text, a short fact); an item opens in place with <details>. data-peek shows three on a phone.',
+ 'sm-clamp':'Long text that shows five lines on a phone until opened (data-open).',
  'sm-actions':'The action row: one .sm-primary, optional .sm-quiet buttons and .sm-icon buttons (aria-label and title required).',
  'sm-status':'Live state beside the action: data-state="loading|success|waiting|error" and a few words.',
  'sm-more':'A <details> for secondary settings; starts closed.',
  'sm-hint':'A <details> info toggle for an explanation that might help; starts closed.',
- 'sm-gallery':'A grid of results or media.',
+ 'sm-gallery':'A grid of results or media. data-size="small" for input files: more tiles per row as the screen widens, never bigger tiles.',
  'sm-glyph':'A small icon drawn in currentColor: data-glyph="play|pause|plus|close|check|chevron|upload|image|video|audio|text|spark|info|warning|spinner".',
 });
 
@@ -38,6 +41,11 @@ export const BLOCK_INTERFACE_PRINCIPLES=Object.freeze([
  'One workspace: no cards inside cards, no second title, step counter or Back/Next bar; the host owns navigation.',
  'Status sits beside the action it describes (`sm-status`), in a few words.',
  'Keep the page in normal scroll flow; no sticky media or control strips unless the editing task needs them.',
+ 'Use the width: from 860px wide the kit puts the controls on the left at a reading width (300–380px) and the result (`sm-stage`) fills the right, in its real shape; under that everything stacks with the result first and the action within reach. Extra width goes to the result, never to wider text fields. Before there is a result, the stage previews what will be made from the inputs. `data-layout="stack"` opts out.',
+ 'Settings sit side by side (`sm-settings`), next to what they change. Three or four short options are one segmented row (`data-segmented`), not a row of big tiles.',
+ 'Lists fill the width at a small size: input files are small tiles (`sm-gallery data-size="small"`), many items are one line each (`sm-list`): a thumbnail, one line of text, a short fact. Tapping an item opens all of its fields in place. Extra width means more items per row, never bigger cards.',
+ 'On a phone chip and segment rows scroll sideways instead of wrapping; long lists show their first three with "N more" (`data-peek`) and long text five lines until tapped (`sm-clamp`).',
+ 'Nothing is lost when a Block gets smaller: every control stays on the screen, behind an (i), in `sm-more`, or inside the item it belongs to. Compacting moves controls; it never deletes them.',
  'Text scene descriptions are planning notes, never a storyboard or an approved frame.',
 ]);
 // Compatibility names for existing consumers.

package/packages/design-system/block-kit.css

@@ -7,6 +7,8 @@
    The shape of a Block page, top to bottom:
      .sm-block      one workspace, no cards inside cards
        .sm-stage    the thing being made (preview, media, result); biggest area
+       .sm-settings settings side by side; .sm-choices[data-segmented] for short ones
+       .sm-list     many items, one line each; an item opens in place
        .sm-choices  picks shown as pictures or icons, not word lists
        .sm-shape    a frame shape at its real ratio (style="--r:9/16")
        .sm-field    the few inputs a person actually needs
@@ -30,7 +32,21 @@
  :where(.sm-block[data-layout="split"]){grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);align-items:start}
  :where(.sm-block[data-layout="split"]) > :where(.sm-stage){grid-row:span 6}
 }
+/* Wide views (October 19, 2026): the controls keep a reading width on the left and
+   the result fills the rest on the right. Under 860px everything stacks with the
+   result first. data-layout="stack" opts out; "split" keeps its older layout. */
+@container (min-width:860px){
+ :where(.sm-block:not([data-layout]):has(> .sm-stage)){grid-template-columns:minmax(300px,380px) minmax(0,1fr);align-items:start;column-gap:var(--s-5,24px);row-gap:var(--s-4,16px)}
+ :where(.sm-block:not([data-layout]):has(> .sm-stage)) > :where(*){grid-column:1}
+ :where(.sm-block:not([data-layout]):has(> .sm-stage)) > :where(.sm-stage){grid-column:2;grid-row:1 / span 12;align-self:stretch;min-height:min(70vh,640px)}
+ /* A stage with a real shape keeps it: a min-height would widen a 16:9 stage past its column. */
+ :where(.sm-block:not([data-layout]):has(> .sm-stage)) > :where(.sm-stage[data-ratio]){align-self:start;min-height:0}
+}
 :where(.sm-row){display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2,8px)}
+/* Long text shows five lines on a phone until someone opens it (data-open). */
+@container (max-width:519px){
+ :where(.sm-clamp:not([data-open])){display:-webkit-box;-webkit-line-clamp:var(--sm-lines,5);-webkit-box-orient:vertical;overflow:hidden}
+}
 
 /* ---------- The stage: the object being made gets the main surface ---------- */
 :where(.sm-stage){position:relative;display:grid;place-items:center;min-height:220px;padding:var(--s-3,12px);border-radius:var(--r-3,8px);background:var(--bg-inset);overflow:hidden}
@@ -71,8 +87,8 @@
 :where(.sm-fields){display:grid;gap:var(--s-4,16px);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
 /* Compact: on a view wider than a phone a short field is one row, its label beside the control. */
 @container (min-width:520px){
- /* Picture choices keep the full width: their legend is their label, and the tiles need the row. */
- :where(.sm-field:not(:has(textarea,.sm-choices))){grid-template-columns:minmax(5rem,9rem) minmax(0,1fr);align-items:center;gap:var(--s-2,8px)}
+ /* Picture choices, file tiles and lists keep the full width: their label sits above, and they need the row. */
+ :where(.sm-field:not(:has(textarea,.sm-choices,.sm-gallery,.sm-list))){grid-template-columns:minmax(5rem,9rem) minmax(0,1fr);align-items:center;gap:var(--s-2,8px)}
  :where(.sm-field) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select){min-height:36px;padding:6px 10px}
  :where(.sm-fields){gap:var(--s-2,8px) var(--s-4,16px)}
 }
@@ -99,12 +115,54 @@
 :where(.sm-choices) :where(.sm-shape){--sm-shape-size:36px;align-self:center;margin:6px auto 2px}
 :where(.sm-choices[data-compact]) :where(.sm-shape){--sm-shape-size:20px;margin:0}
 
+/* Segmented: three or four short words or numbers in one connected row (Low / Med / High). */
+:where(.sm-choices[data-segmented]){display:flex;gap:0;width:fit-content;max-width:100%}
+:where(.sm-choices[data-segmented]) > :where(label){display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:4px 12px;border-radius:0;font-size:var(--fs-body-s,.875rem);white-space:nowrap}
+:where(.sm-choices[data-segmented]) > :where(label + label){margin-inline-start:-1px}
+:where(.sm-choices[data-segmented]) > :where(label:first-of-type){border-start-start-radius:var(--r-pill,999px);border-end-start-radius:var(--r-pill,999px)}
+:where(.sm-choices[data-segmented]) > :where(label:last-of-type){border-start-end-radius:var(--r-pill,999px);border-end-end-radius:var(--r-pill,999px)}
+:where(.sm-choices[data-segmented]) > :where(label:has(input:checked)){position:relative;z-index:1;background:var(--bg-elev-2)}
+:where(.sm-choices[data-segmented]) :where(.sm-glyph){--sm-glyph-size:16px;margin:0}
+/* Settings side by side: a grid of short settings, each label above its control. */
+:where(.sm-settings){display:grid;gap:var(--s-3,12px) var(--s-4,16px);grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr));align-items:start;min-width:0}
+:where(.sm-settings) > :where(.sm-field){grid-template-columns:minmax(0,1fr);gap:4px}
+:where(.sm-settings) > :where(.sm-choices) > :where(legend),:where(.sm-settings) :where(.sm-label){font-size:var(--fs-caption,.8125rem)}
+/* On a phone, a row of chips or segments scrolls sideways instead of wrapping. */
+@container (max-width:519px){
+ :where(.sm-choices[data-compact],.sm-choices[data-segmented]){display:flex;flex-wrap:nowrap;width:auto;overflow-x:auto;scrollbar-width:none}
+ :where(.sm-choices[data-compact]) > :where(label){flex:none}
+ :where(.sm-choices[data-segmented]) > :where(label){flex:none}
+}
+
+/* ---------- One-line list: many items, one short row each ----------
+   <ol class="sm-list"><li><img alt=""><span class="sm-line">Text</span><small>Wide</small></li></ol>
+   An item that opens in place is <li><details><summary>…the row…</summary>…its fields…</details></li>.
+   data-peek shows the first three on a phone, with a last <li class="sm-list-more"> button to open the rest. */
+:where(.sm-list){display:grid;margin:0;padding:0;list-style:none;border:1px solid var(--border-tok);border-radius:var(--r-3,8px);background:var(--bg-elev-1);min-width:0;overflow:hidden}
+:where(.sm-list) > :where(li){display:flex;align-items:center;gap:var(--s-2,8px);min-width:0;min-height:40px;padding:4px var(--s-2,8px);border-bottom:1px solid var(--divider)}
+:where(.sm-list) > :where(li:last-child){border-bottom:0}
+:where(.sm-list) > :where(li:has(> details)){display:block;padding:0}
+:where(.sm-list) > :where(li) > :where(details) > :where(summary){display:flex;align-items:center;gap:var(--s-2,8px);min-height:40px;padding:4px var(--s-2,8px);list-style:none;cursor:pointer}
+:where(.sm-list) > :where(li) > :where(details) > :where(summary)::-webkit-details-marker{display:none}
+:where(.sm-list) > :where(li) > :where(details[open]){background:var(--bg-inset)}
+:where(.sm-list) > :where(li) > :where(details) > :where(:not(summary)){padding:var(--s-2,8px) var(--s-3,12px) var(--s-3,12px)}
+:where(.sm-list) :where(img,video,canvas,.sm-swatch){flex:none;width:40px;height:26px;object-fit:cover;border-radius:var(--r-2,4px);background:var(--bg-inset)}
+:where(.sm-list) :where(.sm-line){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+:where(.sm-list) :where(small){flex:none;color:var(--fg-subtle);font-size:var(--fs-caption,.8125rem);white-space:nowrap;font-variant-numeric:tabular-nums}
+:where(.sm-list) > :where(.sm-list-more){display:none}
+@container (max-width:519px){
+ :where(.sm-list[data-peek]:not([data-open])) > :where(li:nth-child(n+4):not(.sm-list-more)){display:none}
+ :where(.sm-list[data-peek]:not([data-open])) > :where(.sm-list-more){display:flex;color:var(--fg-muted)}
+}
+
 /* ---------- Media gallery ---------- */
 :where(.sm-gallery){display:grid;gap:var(--s-2,8px);grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--sm-tile,140px)),1fr));margin:0;padding:0;list-style:none}
 :where(.sm-gallery) > :where(*){position:relative;margin:0;border-radius:var(--r-3,8px);overflow:hidden;background:var(--bg-inset)}
 :where(.sm-gallery) :where(img,video,canvas){display:block;width:100%;aspect-ratio:var(--sm-tile-ratio,1);object-fit:cover}
 :where(.sm-gallery) :where(figcaption){padding:6px 8px;font-size:var(--fs-caption,.8125rem);color:var(--fg-muted)}
 :where(.sm-gallery) :where([aria-selected="true"],.is-selected){box-shadow:inset 0 0 0 2px var(--fg)}
+/* Small tiles: more per row as the screen widens, never bigger tiles. */
+:where(.sm-gallery[data-size="small"]){--sm-tile:92px;--sm-tile-ratio:3/2}
 
 /* ---------- Status: a glyph and a few words, next to the action ---------- */
 :where(.sm-status){display:inline-flex;align-items:center;gap:var(--s-2,8px);min-height:24px;font-size:var(--fs-body-s,.875rem);color:var(--fg-muted)}

package/packages/design-system/block-kit.html

@@ -99,6 +99,44 @@
     </div>
   </section>
 
+  <!-- ===== Many inputs: files as small tiles, items one line each, settings side by side. ===== -->
+  <section>
+    <h2>Many inputs: small tiles, one-line items, settings side by side</h2>
+    <div class="ref-frame">
+      <main class="sm-block">
+        <div class="sm-stage" data-ratio="16:9" data-fill><span class="sm-swatch swatch-b" style="width:100%;height:100%"></span></div>
+        <div class="sm-field">
+          <div class="sm-label"><span>Photos</span><details class="sm-hint"><summary aria-label="About photos" title="About photos"></summary><p>Shown in this order, one per shot.</p></details></div>
+          <ul class="sm-gallery" data-size="small">
+            <li><span class="sm-swatch swatch-a" style="display:block;aspect-ratio:3/2"></span></li>
+            <li><span class="sm-swatch swatch-b" style="display:block;aspect-ratio:3/2"></span></li>
+            <li><span class="sm-swatch swatch-c" style="display:block;aspect-ratio:3/2"></span></li>
+            <li><label class="sm-empty" style="padding:8px;aspect-ratio:3/2" aria-label="Add photos" title="Add photos"><span class="sm-glyph" data-glyph="plus" aria-hidden="true"></span><input type="file" hidden multiple></label></li>
+          </ul>
+        </div>
+        <ol class="sm-list" data-peek>
+          <li><span class="sm-swatch swatch-a"></span><span class="sm-line">Looking for an SUV that does it all?</span><small>Wide · 3.2 s</small></li>
+          <li><details><summary><span class="sm-swatch swatch-b"></span><span class="sm-line">Check out this 2021 Toyota RAV4 XLE.</span><small>Medium · 2.8 s</small></summary>
+            <div class="sm-settings">
+              <div class="sm-field"><label for="framing">Framing</label><select id="framing"><option>Wide</option><option selected>Medium</option><option>Close</option></select></div>
+              <div class="sm-field"><label for="time">Screen time</label><input id="time" type="number" value="2.8" step="0.1"></div>
+            </div></details></li>
+          <li><span class="sm-swatch swatch-c"></span><span class="sm-line">It has just 31,200 miles and one careful owner.</span><small>Close · 3.6 s</small></li>
+          <li><span class="sm-swatch swatch-d"></span><span class="sm-line">All-wheel drive keeps you sure-footed in rain or snow.</span><small>Wide · 6.4 s</small></li>
+          <li><span class="sm-swatch swatch-a"></span><span class="sm-line">Come see it today.</span><small>Medium · 4.4 s</small></li>
+          <li class="sm-list-more"><button type="button" class="sm-quiet" onclick="this.closest('.sm-list').toggleAttribute('data-open')">2 more</button></li>
+        </ol>
+        <div class="sm-settings">
+          <fieldset class="sm-choices" data-segmented><legend>Shape</legend>
+            <label><input type="radio" name="shape" checked><span>16:9</span></label><label><input type="radio" name="shape"><span>9:16</span></label><label><input type="radio" name="shape"><span>1:1</span></label></fieldset>
+          <fieldset class="sm-choices" data-segmented><legend>Quality</legend>
+            <label><input type="radio" name="q"><span>Low</span></label><label><input type="radio" name="q"><span>Med</span></label><label><input type="radio" name="q" checked><span>High</span></label></fieldset>
+        </div>
+        <div class="sm-actions"><button type="button" class="sm-primary">Make video</button></div>
+      </main>
+    </div>
+  </section>
+
   <!-- ===== 2. Status: a glyph and a few words, beside the action. ===== -->
   <section>
     <h2>Status</h2>