synabun 2.2.0 → 2.2.1

package/neural-interface/public/shared/assistant/asst-motion-gate.js

@@ -0,0 +1,80 @@
+// ═══════════════════════════════════════════
+// SynaBun Assistant — loops run only on screen
+// ═══════════════════════════════════════════
+// The transcript's decorative loops (a run card's cameo, its stage's scene and
+// sweep; a live rack's sweep, ticks and scene; a route line's sweep and icon)
+// run only while their holder is on screen. One IntersectionObserver per
+// renderer marks a holder that is not (scrolled out of its transcript, its tab
+// hidden, its window minimised to nothing) with `data-offscreen`; the
+// stylesheet pauses every animation under it (asst-styles.js), and the loop
+// picks up where it stopped when the holder is back. Every frame the page
+// draws restyles each running animation on the main thread, composited or
+// not, so a loop nobody sees is never free; the observer is the browser's own,
+// so watching costs nothing while the transcript scrolls.
+//
+//   createMotionGate({ IntersectionObserver }?) → { watch(el), unwatch(el), disconnect(), size() }
+//
+// No observer (an old engine, a test without one): nothing is marked, every
+// loop runs as before. DOM-light on purpose: tests/assistant-motion-gate.test.mjs
+// drives it with a stand-in observer.
+
+export const OFFSCREEN_ATTR = 'data-offscreen';
+const PRUNE_EVERY = 32; // watched holders between two sweeps for ones that left the document
+
+export function createMotionGate({ IntersectionObserver: IO = globalThis.IntersectionObserver } = {}) {
+  const watched = new Set();
+  let io = null; // undefined: no observer here
+
+  function mark(el, off) {
+    try {
+      if (off) { if (!el.hasAttribute(OFFSCREEN_ATTR)) el.setAttribute(OFFSCREEN_ATTR, ''); }
+      else if (el.hasAttribute(OFFSCREEN_ATTR)) el.removeAttribute(OFFSCREEN_ATTR);
+    } catch { /* not an element */ }
+  }
+
+  function observer() {
+    if (io !== null) return io;
+    if (typeof IO !== 'function') { io = undefined; return io; }
+    try {
+      io = new IO((entries) => {
+        for (const entry of entries) {
+          const el = entry.target;
+          if (!watched.has(el)) continue;
+          if (el.isConnected === false) { unwatch(el); continue; }
+          mark(el, !entry.isIntersecting);
+        }
+      });
+    } catch { io = undefined; }
+    return io;
+  }
+
+  /** Holders removed while already off screen get no report: drop them now and then. */
+  function prune() {
+    for (const el of Array.from(watched)) if (el.isConnected === false) unwatch(el);
+  }
+
+  function watch(el) {
+    if (!el || watched.has(el)) return false;
+    const o = observer();
+    if (!o) return false;
+    watched.add(el);
+    try { o.observe(el); } catch { watched.delete(el); return false; }
+    if (watched.size % PRUNE_EVERY === 0) prune();
+    return true;
+  }
+
+  function unwatch(el) {
+    if (!watched.delete(el)) return;
+    try { io?.unobserve(el); } catch { /* already gone */ }
+    mark(el, false);
+  }
+
+  function disconnect() {
+    try { io?.disconnect(); } catch { /* already gone */ }
+    for (const el of watched) mark(el, false);
+    watched.clear();
+    if (io) io = null;
+  }
+
+  return { watch, unwatch, disconnect, size: () => watched.size };
+}

package/neural-interface/public/shared/assistant/asst-panel.js

@@ -1118,7 +1118,7 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
           computerPanel.applyStatus(status);
           applyFeatures();
         })
-        .catch(() => { st.features.computer = false; applyFeatures(); });
+        .catch((err) => { st.features.computer = false; computerPanel.checkFailed?.(err); applyFeatures(); });
     }
   }
 

package/neural-interface/public/shared/assistant/asst-render.js

@@ -55,6 +55,8 @@ import { injectRackStyles } from './asst-rack-styles.js';
 import { injectSceneStyles } from './asst-scene-styles.js';
 import { activityScene, compactActivity, isLivePhase, runChip, sceneOfClass, sceneSvg, stagePhase } from './asst-scenes.js';
 import { STAGE_TIMING, createWorkerStage } from './asst-run-stage.js';
+import { createMotionGate } from './asst-motion-gate.js';
+import { createStyleCache } from './asst-style-cache.js';
 import { formatRunTokens } from './asst-usage.js';
 import { sanitizeHtmlString, sanitizeInto } from './asst-sanitize.js';
 import { renderStreamingMarkdown } from '../streaming-markdown.js';
@@ -574,6 +576,16 @@ export function createRenderer(transcriptEl, hooks = {}) {
   const stageWidths = new WeakMap(); // stage element → { rack, width }
   const toRecut = new Set();
   let recutTimer = 0;
+  // What the stylesheet decides about a bubble (--rk-cut, the line's white-space) changes only with a container
+  // query, so only with the stage's width: read once, forgotten when the width changes (here) or the fonts load.
+  const styleCache = createStyleCache();
+  // A web font that arrives changes every measured width: the next paint of each bubble measures again.
+  const onFontsLoaded = () => { styleCache.invalidate(); for (const rack of racks) rack.budgetMemo = null; };
+  const fontSet = typeof document !== 'undefined' ? document.fonts : null;
+  try { fontSet?.addEventListener?.('loadingdone', onFontsLoaded); } catch { /* no FontFaceSet events */ }
+  const stopFontWatch = () => { try { fontSet?.removeEventListener?.('loadingdone', onFontsLoaded); } catch { /* gone */ } };
+  // The transcript's loops run only while their holder is on screen (run cards, racks, route lines).
+  const motion = createMotionGate();
   const stageResizes = typeof ResizeObserver === 'function' ? new ResizeObserver((entries) => {
     for (const entry of entries) {
       const seen = stageWidths.get(entry.target);
@@ -582,6 +594,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
       if (seen.width === null) { seen.width = width; continue; } // the first report: the width it was cut at
       if (width === seen.width) continue;
       seen.width = width;
+      forgetBubbleStyle(seen.rack);
       toRecut.add(seen.rack);
     }
     if (!toRecut.size) return;
@@ -1601,6 +1614,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
       sr: { last: 0, timer: 0, pending: '' },
     };
     row._rack = rack;
+    motion.watch(row); // its sweep, ticks and scene loop only while it is on screen
     rack.receipt.btn.addEventListener('click', () => setRackOpen(rack, !rack.open));
     row.querySelector('.asst-rack-view').addEventListener('click', (e) => {
       const btn = e.target.closest('button[data-view]');
@@ -2079,6 +2093,22 @@ export function createRenderer(transcriptEl, hooks = {}) {
    * head (subjectCut).
    */
   function subjectBudget(rack, verb, cut = 'middle') {
+    const s = rack.stage;
+    // The same inputs give the same budget: the 1 Hz clock tick reuses it instead of measuring the stage again
+    // (a measure on the frame's path forces style and layout of whatever the frame dirtied). The key holds every
+    // input the measure reads: the stage's width (its ResizeObserver's), the scene beside the mascot, whether the
+    // bubble shows, the verb, the clock's length (tabular digits: same length, same width), the running reserve, the cut.
+    const seen = stageResizes ? stageWidths.get(s.el) : null;
+    const key = seen && seen.width != null
+      ? `${seen.width}|${rack.sceneId}|${s.bubble.hidden ? 0 : 1}|${verb}|${s.meta.textContent.length}|${rack.bubble.step?.state === 'running' ? 1 : 0}|${cut}`
+      : '';
+    if (key && rack.budgetMemo?.key === key) return rack.budgetMemo.value;
+    const value = measureSubjectBudget(rack, verb, cut);
+    rack.budgetMemo = key ? { key, value } : null;
+    return value;
+  }
+
+  function measureSubjectBudget(rack, verb, cut) {
     const s = rack.stage;
     const width = s.el.clientWidth;
     if (!width) return 96;
@@ -2095,14 +2125,30 @@ export function createRenderer(transcriptEl, hooks = {}) {
     // Two lines, less what wrapping at token boundaries wastes (a head cut is one tail: close to two full
     // lines, a path's pieces wrapping at its separators); a guess on the generous side, since fitSubject
     // cuts what the clamp would hide or a piece would push past the edge.
-    const lines = getComputedStyle(s.line).whiteSpace === 'nowrap' ? 1 : cut === 'head' ? 2 : 1.85;
+    const lines = bubbleStyle(rack, s.line, 'white-space') === 'nowrap' ? 1 : cut === 'head' ? 2 : 1.85;
     const taken = Math.ceil((verbPx + 7 + (numbersPx ? numbersPx + 7 : 0)) / 7);
     return Math.max(24, Math.min(240, Math.floor(perLine * lines) - taken - 1));
   }
 
-  /** 'head' where the stylesheet says so (≤320 px: keep the tail), else 'middle'. */
+  /**
+   * A computed style of the bubble, read once while the stage keeps its width (styleCache; the stage's
+   * ResizeObserver forgets it). Without a ResizeObserver nothing would say when to forget: read it each time.
+   */
+  function bubbleStyle(rack, node, prop) {
+    if (stageResizes && stageWidths.has(rack.stage.el)) return styleCache.get(node, prop);
+    try { return getComputedStyle(node).getPropertyValue(prop).trim(); } catch { return ''; }
+  }
+
+  /** The stage's width changed (or the fonts did): its cut, its line's wrap and its budget are read again. */
+  function forgetBubbleStyle(rack) {
+    styleCache.invalidate(rack.stage.subject);
+    styleCache.invalidate(rack.stage.line);
+    rack.budgetMemo = null;
+  }
+
+  /** 'head' where the stylesheet says so (≤320 px: keep the tail), else 'middle'. Never read per frame: see bubbleStyle. */
   function subjectCut(rack) {
-    try { return getComputedStyle(rack.stage.subject).getPropertyValue('--rk-cut').trim() === 'head' ? 'head' : 'middle'; } catch { return 'middle'; }
+    return bubbleStyle(rack, rack.stage.subject, '--rk-cut') === 'head' ? 'head' : 'middle';
   }
 
   /**
@@ -2861,9 +2907,11 @@ export function createRenderer(transcriptEl, hooks = {}) {
   }
 
   // ── Rack upkeep ──
+  // The 1 Hz beats run only while the transcript is on screen (a hidden tab, a closed panel): they paint clocks
+  // and bubbles nobody would see. Back on screen, the ticker runs them at once.
   function needTicker() {
     if (unsubTick) return;
-    try { unsubTick = subscribe(tickRacks, { fps: 1 }); } catch { unsubTick = null; }
+    try { unsubTick = subscribe(tickRacks, { fps: 1, target: $msgs }); } catch { unsubTick = null; }
   }
 
   function stopTicker() {
@@ -2888,6 +2936,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
     const stage = rack.stage.el;
     if (on && !stageWidths.has(stage)) {
       stageWidths.set(stage, { rack, width: null });
+      forgetBubbleStyle(rack); // read again from here on, while the observer watches the width
       stageResizes.observe(stage);
     } else if (!on && stageWidths.has(stage)) {
       stageWidths.delete(stage);
@@ -2914,6 +2963,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
 
   function dropRack(rack) {
     watchStageWidth(rack, false);
+    motion.unwatch(rack.row);
     clearTimeout(rack.stageTimer);
     clearTimeout(rack.clearTimer);
     clearTimeout(rack.sr.timer);
@@ -3178,6 +3228,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
     runCards.set(run.runId, card);
     const { wrap } = assistantRow(rootScope);
     wrap.appendChild(card);
+    motion.watch(card); // its cameo, stage, scene and sweep loop only while it is on screen
     syncStage(run.runId, card, run);
     return card;
   }
@@ -3220,7 +3271,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
 
   function needStageTicker() {
     if (unsubStageTick) return;
-    try { unsubStageTick = subscribe(tickStages, { fps: 1 }); } catch { unsubStageTick = null; }
+    try { unsubStageTick = subscribe(tickStages, { fps: 1, target: $msgs }); } catch { unsubStageTick = null; }
   }
 
   function stopStageTicker() {
@@ -3399,6 +3450,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
     const line = createRouteLine(route, routeLineOpts(phase));
     routeLines.set(routeId, line);
     append(line.el);
+    motion.watch(line.el); // its sweep and icon loop only while it is on screen
     syncRouteLive(routeId);
     enterRow(line.el);
     return line;
@@ -3409,6 +3461,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
     if (!routeId || !line) return;
     const fresh = routeLines.get(routeId) !== line;
     routeLines.set(routeId, line);
+    if (line.el) motion.watch(line.el);
     syncRouteLive(routeId);
     if (fresh && line.el?.isConnected) enterRow(line.el);
   }
@@ -3430,7 +3483,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
 
   function removeRouteLine(routeId) {
     const line = routeLines.get(routeId);
-    if (line) { line.el.remove(); routeLines.delete(routeId); }
+    if (line) { motion.unwatch(line.el); line.el.remove(); routeLines.delete(routeId); }
   }
 
   // ── The automation trace ──
@@ -4094,6 +4147,8 @@ export function createRenderer(transcriptEl, hooks = {}) {
     runActivity.clear();
     runCards.clear();
     routeLines.clear();
+    motion.disconnect(); // every holder it watched goes with the transcript
+    styleCache.invalidate();
     autoRows.clear();
     turnFrames = [];
     rootScope.stream = null;
@@ -4122,7 +4177,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
   return {
     el: $msgs,
     clear,
-    destroy: () => { clear(); stageResizes?.disconnect(); limitDock.destroy(); },
+    destroy: () => { clear(); stageResizes?.disconnect(); limitDock.destroy(); stopFontWatch(); },
     appendUser,
     appendAssistantMarkdown,
     appendStatus,

package/neural-interface/public/shared/assistant/asst-scene-styles.js

@@ -15,31 +15,52 @@
 // - the agents tray's mini scenes and lanes (asst-agents-dock.js).
 //
 // Rules as the rack's: gold only means live; infinite loops pause while the
-// UI is dragged (body.ui-interacting) and stop under prefers-reduced-motion,
+// UI is dragged (body.ui-interacting), off screen (data-offscreen on a holder,
+// a closed side panel: asst-styles.js) and stop under prefers-reduced-motion,
 // where every scene is its still frame and the sweep is not drawn. Tokens
 // come from asst-styles.js, always with a fallback. No backdrop blur and no
-// standing layer hints.
+// standing layer hints: a moving layer is promoted (will-change) only while
+// its scene is live and on screen.
+//
+// A scene's moving parts are HTML layers (asst-scenes.js), so every motion is
+// a box's transform or opacity, run by the compositor. Lengths are written in
+// the scene's own units (the SVG's px) and turned into percentages of the box
+// here (sc() below): a scene is drawn at several sizes, and a percentage of
+// the box is the same distance in units at every one of them.
 
-import { CODE_LINES, CODE_STEP, codeCaretX } from './asst-scenes.js';
+import { CODE_LINES, CODE_STEP, CODE_WINDOW, FILM_MINI_WINDOW, FILM_WINDOW, SCENE_BOX, boxPct, codeCaretX } from './asst-scenes.js';
 
 export const SCENE_STYLE_ID = 'asst-scene-styles';
 
-/** The code scene's stepped scroll (one line per step) and its caret, which lands on each new bottom line's end. */
+const FULL = SCENE_BOX.full;
+const MINI = SCENE_BOX.mini;
+const win = ([, , w, h]) => ({ w, h });
+
+/** A move of (x, y) scene units in a box: `translate(…%, …%)`, plus any scale or rotation after it. */
+function sc(box, x, y, more = '') {
+  return `transform: translate(${boxPct(x, box.w)}, ${boxPct(y, box.h)})${more ? ` ${more}` : ''};`;
+}
+
+/** The code scene's stepped scroll (one line per step, inside its window) and its caret, which lands on each new bottom line's end. */
 function codeFrames() {
   const n = CODE_LINES.length;
   const at = (s) => Math.round((s * 100000) / n) / 1000;
   const hold = (s) => Math.round(((s * 100) / n + (100 / n) * 0.72) * 1000) / 1000;
+  const view = win(CODE_WINDOW);
   let scroll = '';
   let caret = '';
   for (let s = 0; s < n; s += 1) {
-    scroll += ` ${at(s)}%, ${hold(s)}% { transform: translateY(${-CODE_STEP * s}px); }`;
-    caret += ` ${at(s)}%, ${hold(s)}% { transform: translateX(${codeCaretX(s)}px); }`;
+    scroll += ` ${at(s)}%, ${hold(s)}% { ${sc(view, 0, -CODE_STEP * s)} }`;
+    caret += ` ${at(s)}%, ${hold(s)}% { ${sc(FULL, codeCaretX(s), 0)} }`;
   }
-  scroll += ` 100% { transform: translateY(${-CODE_STEP * n}px); }`;
-  caret += ` 100% { transform: translateX(${codeCaretX(n)}px); }`;
+  scroll += ` 100% { ${sc(view, 0, -CODE_STEP * n)} }`;
+  caret += ` 100% { ${sc(FULL, codeCaretX(n), 0)} }`;
   return `@keyframes asst-sc-code {${scroll} }\n  @keyframes asst-sc-code-caret {${caret} }`;
 }
 
+/** The pointer scenes: rest on the button, travel to the page, back (units of their own box). */
+const pointFrames = (name, box, [x0, y0], [x1, y1], more = '', [a, b, c, d] = [22, 46, 72, 96]) => `@keyframes ${name} { 0%, ${a}% { ${sc(box, x0, y0, more)} } ${b}%, ${c}% { ${sc(box, x1, y1, more)} } ${d}%, 100% { ${sc(box, x0, y0, more)} } }`;
+
 export const SCENE_CSS = `
   /* ── The stage in a run card ──────────────────────────────────────── */
   .asst-run-stage-wrap {
@@ -110,8 +131,15 @@ export const SCENE_CSS = `
   .asst-run.is-revealed { background: var(--asst-fill-1, rgba(255,255,255,.04)); box-shadow: 0 0 0 1px var(--asst-line-2, rgba(255,255,255,.12)); }
 
   /* ── Scenes ─────────────────────────────────────────────────────────── */
-  /* --sc-gold is set by a holder that neutralizes it (waiting, settled); unset, it is the brand gold. */
-  .asst-scene { display: block; overflow: visible; }
+  /* --sc-gold is set by a holder that neutralizes it (waiting, settled); unset, it is the brand gold.
+     The box takes its holder's size (120×40 and 40×20 by default); its still SVG and every layer cover
+     it, in the same viewBox; strokes are 1.5 units unless the holder says otherwise (they inherit). */
+  .asst-scene { position: relative; display: block; overflow: visible; stroke-width: 1.5; }
+  :where(.asst-scene) { width: 120px; height: 40px; }
+  :where(.asst-scene.is-mini) { width: 40px; height: 20px; }
+  .asst-scene svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
+  .asst-scene .sc-layer { position: absolute; inset: 0; display: block; transform-origin: 0 0; pointer-events: none; }
+  .asst-scene .sc-clip { position: absolute; display: block; overflow: hidden; pointer-events: none; }
   .asst-scene .sc-dim { stroke-opacity: .5; }
   .asst-scene .sc-mid { stroke-opacity: .72; }
   .asst-scene .sc-gold { stroke: var(--sc-gold, var(--asst-brand, rgba(255,215,0,.85))); }
@@ -120,9 +148,13 @@ export const SCENE_CSS = `
   .asst-scene .sc-fill.sc-mid { fill-opacity: .55; }
   .asst-scene .sc-fill.sc-gold { fill: var(--sc-gold, var(--asst-brand, rgba(255,215,0,.85))); }
   .asst-scene .sc-shade { fill: var(--sc-shade, #131316); }
-  .asst-scene .sc-ring { fill: none; opacity: 0; }
-  .asst-scene .sc-box { transform-box: fill-box; transform-origin: center; }
-  .asst-scene .sc-vb { transform-box: view-box; }
+  .asst-scene .sc-ring { opacity: 0; }
+  /* A layer that only turns or travels gets its compositor layer up front, and only while its scene is
+     live and on screen and motion is allowed (no standing hints). Layers that scale are left to the
+     browser, which rasterises them at the largest scale they reach (a hint would fix it at rest). */
+  @media (prefers-reduced-motion: no-preference) {
+    .asst-scene[data-live]:not([data-offscreen] *) :is(.sc-gear-big, .sc-gear-small, .sc-hand, .sc-wrench, .sc-code-scroll, .sc-code-caret, .sc-lens, .sc-lens-mini, .sc-point-browser, .sc-point-computer, .sc-point-mini, .sc-run-dot, .sc-pen, .sc-film, .sc-film-mini, .sc-slide) { will-change: transform; }
+  }
   .asst-scene[data-live] .sc-code-scroll { animation: asst-sc-code 6.6s cubic-bezier(.45, 0, .55, 1) infinite; }
   .asst-scene[data-live] .sc-code-caret { animation: asst-sc-code-caret 6.6s cubic-bezier(.45, 0, .55, 1) infinite; }
   .asst-scene[data-live] .sc-caret { animation: asst-rk-caret 1.06s steps(1) infinite; }
@@ -229,23 +261,23 @@ export const SCENE_CSS = `
   ${codeFrames()}
   @keyframes asst-sc-spin { to { transform: rotate(360deg); } }
   @keyframes asst-sc-tick { 0%, 8% { opacity: 0; transform: scale(.4); } 16%, 80% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(1); } }
-  @keyframes asst-sc-lens { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(14px, 4px); } 50% { transform: translate(48px, 0); } 75% { transform: translate(34px, 5px); } }
-  @keyframes asst-sc-lens-mini { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(12px, 2px); } }
-  @keyframes asst-sc-point-browser { 0%, 22% { transform: translate(92px, 29px); } 46%, 72% { transform: translate(26px, 16px); } 96%, 100% { transform: translate(92px, 29px); } }
-  @keyframes asst-sc-point-computer { 0%, 22% { transform: translate(90px, 22.5px); } 46%, 72% { transform: translate(32px, 9px); } 96%, 100% { transform: translate(90px, 22.5px); } }
-  @keyframes asst-sc-point-mini { 0%, 24% { transform: translate(29px, 13px) scale(.6); } 48%, 74% { transform: translate(12px, 8px) scale(.6); } 98%, 100% { transform: translate(29px, 13px) scale(.6); } }
+  @keyframes asst-sc-lens { 0%, 100% { ${sc(FULL, 0, 0)} } 25% { ${sc(FULL, 14, 4)} } 50% { ${sc(FULL, 48, 0)} } 75% { ${sc(FULL, 34, 5)} } }
+  @keyframes asst-sc-lens-mini { 0%, 100% { ${sc(MINI, 0, 0)} } 50% { ${sc(MINI, 12, 2)} } }
+  ${pointFrames('asst-sc-point-browser', FULL, [92, 29], [26, 16])}
+  ${pointFrames('asst-sc-point-computer', FULL, [90, 22.5], [32, 9])}
+  ${pointFrames('asst-sc-point-mini', MINI, [29, 13], [12, 8], 'scale(.6)', [24, 48, 74, 98])}
   @keyframes asst-sc-ripple { 0% { opacity: .9; transform: scale(.3); } 16% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } }
-  @keyframes asst-sc-run { 0% { opacity: 0; transform: translateX(0); } 8%, 12% { opacity: 1; transform: translateX(0); } 45%, 55% { transform: translateX(23px); } 88% { opacity: 1; transform: translateX(46px); } 100% { opacity: 0; transform: translateX(46px); } }
+  @keyframes asst-sc-run { 0% { opacity: 0; ${sc(FULL, 0, 0)} } 8%, 12% { opacity: 1; ${sc(FULL, 0, 0)} } 45%, 55% { ${sc(FULL, 23, 0)} } 88% { opacity: 1; ${sc(FULL, 46, 0)} } 100% { opacity: 0; ${sc(FULL, 46, 0)} } }
   @keyframes asst-sc-shape { 0%, 6% { opacity: 0; transform: scale(.4); } 16%, 84% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(.9); } }
-  @keyframes asst-sc-pen { 0%, 8% { transform: translate(47px, 13px); } 18%, 24% { transform: translate(73px, 13px); } 32%, 84% { transform: translate(100px, 20px); } 100% { transform: translate(47px, 13px); } }
+  @keyframes asst-sc-pen { 0%, 8% { ${sc(FULL, 47, 13)} } 18%, 24% { ${sc(FULL, 73, 13)} } 32%, 84% { ${sc(FULL, 100, 20)} } 100% { ${sc(FULL, 47, 13)} } }
   @keyframes asst-sc-develop { 0% { opacity: .08; } 30%, 82% { opacity: 1; } 100% { opacity: .08; } }
   @keyframes asst-sc-twinkle { 0%, 100% { opacity: .35; transform: scale(.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
   @keyframes asst-sc-zap { 0%, 100% { opacity: .45; transform: scale(.92); } 40% { opacity: 1; transform: scale(1.06); } }
-  @keyframes asst-sc-film { to { transform: translateX(-24px); } }
-  @keyframes asst-sc-film-mini { to { transform: translateX(-12px); } }
+  @keyframes asst-sc-film { to { ${sc(win(FILM_WINDOW), -24, 0)} } }
+  @keyframes asst-sc-film-mini { to { ${sc(win(FILM_MINI_WINDOW), -12, 0)} } }
   @keyframes asst-sc-wrench { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(16deg); } }
   @keyframes asst-sc-spark { 0%, 38% { opacity: 0; } 50% { opacity: 1; } 72%, 100% { opacity: 0; } }
-  @keyframes asst-sc-slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(68px); } }
+  @keyframes asst-sc-slide { 0%, 100% { ${sc(FULL, 0, 0)} } 50% { ${sc(FULL, 68, 0)} } }
   @keyframes asst-sc-dot { 0%, 100% { opacity: .3; } 40% { opacity: 1; } }
   body.ui-interacting .asst-scene *,
   body.ui-interacting .asst-run-stage-sweep::after { animation-play-state: paused !important; }