stillmade-sdk 0.1.9 → 0.1.11

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}: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}}: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)}}

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

@@ -23,7 +23,7 @@ import {pinCurrentSemanticSource,pinExplicitFlowSource,assertCurrentSemanticSour
 import {workflowDependencyOrder} from './workflow-dependency-order.js';
 import {USER_REQUEST_LIMIT,userRequestRequirement,chatRequestRequirement,checkedUserRequestAnswer} from '../block-sdk/interactive-requirements.js';
 import {validateWorkflowApproval} from '../block-sdk/workflow-approvals.js';
-import {groupOf} from './step-groups.js';
+import {groupOf,withoutGroups} from './step-groups.js';
 import {UNATTENDED_HOSTED_OPERATIONS} from './unattended.js';
 export {UNATTENDED_HOSTED_OPERATIONS};
 
@@ -66,7 +66,9 @@ export async function planSegment(projectType,canvas,startStepId,{interactive=fa
  const type=structuredClone(projectType),graph=structuredClone(canvas),operations=structuredClone(applicationOperations);
  safeDocument(operations);assert(plain(operations),'BROWSER_APPLICATION_OPERATION','Select application operations by Step ID.');
  safeDocument(type);assert(plain(graph) && Array.isArray(graph.nodes) && Array.isArray(graph.edges),'SEGMENT_CANVAS','A saved production Canvas is required');
- if(graph.projectType)assert(stableStringify(graph.projectType)===stableStringify(type),'SEGMENT_CHANGED','The workflow and Canvas definitions differ');
+ // Step groups only change what people see and which job one button runs, so a
+ // Canvas saved before its Step was condensed still matches (Block in block).
+ if(graph.projectType)assert(stableStringify(withoutGroups(graph.projectType))===stableStringify(withoutGroups(type)),'SEGMENT_CHANGED','The workflow and Canvas definitions differ');
  const compiled=await compileTypeWorkspace(type,{experimentalBrowser:experimentalBrowser ?? experimentalBrowserValidation}),active=type.stages.filter(step=>step.enabled!==false);
  // One Step per job: with no explicit range, an interactive run from any part
  // of a Step group runs that whole job, from its first enabled part to its last.

package/packages/block-platform/step-groups.js

@@ -47,6 +47,8 @@ export function normalizeGroups(type){
  return {...type,groups};
 }
 
+/** The type without its Step groups: the same workflow, whatever people see. */
+export function withoutGroups(type){if(!type||!Object.hasOwn(type,'groups'))return type;const {groups:_groups,...rest}=type;return rest;}
 /** The group a Step belongs to, if any. */
 export const groupOf=(type,stageId)=>(type.groups||[]).find(group=>group.stages.includes(stageId))||null;
 

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.1';
+export const BUILDER_CONTRACT_VERSION='1.5.2';
 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. 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: 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.'),
  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

@@ -34,6 +34,7 @@ export const BLOCK_INTERFACE_PRINCIPLES=Object.freeze([
  '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.',

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

@@ -71,7 +71,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){
- :where(.sm-field:not(:has(textarea))){grid-template-columns:minmax(5rem,9rem) minmax(0,1fr);align-items:center;gap:var(--s-2,8px)}
+ /* 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)}
  :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)}
 }