screengraft 0.64.2 → 0.66.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "screengraft",
-  "version": "0.64.2",
+  "version": "0.66.0",
   "description": "Put a UI screenshot or screen recording onto a photographed device screen with the perspective exactly right \u2014 a homography you confirm by hand, not a generative guess.",
   "keywords": [
     "mockup",

package/skills/inject-screenshot/SKILL.md

@@ -5,7 +5,7 @@ description: Injects a UI screenshot OR a screen recording onto a photographed d
 
 # Inject a screenshot onto a photographed device
 
-**What ships (v0.64):** a local browser UI (`scripts/ui.py`) that walks the designer through the whole job — pick the photo and the screen source, which may be an image **or a video** (the images you have used before, drag-drop, browse, path, or a **Figma frame link**), auto-detect the screen as a starting position — and when detection cannot tell which region is a screen, **Point at screen**: one click inside it and the detector uses that point — or, if this photograph has been fitted before, **the fit it was saved with comes back** as the starting position instead of a detection, recognised by the photo's own pixels so a rename or a drag-drop still match — and every save also writes a **portable `.fit.json` beside the mockup** that can be dropped back onto the page later, which is how a fit survives a re-export, another machine, or someone else's hands — then **match the four edges** (drag an edge's middle to slide it, near an end to pivot; corners still draggable) with canvas navigation that follows the usual conventions — **hold ⌘ and scroll to zoom to the pointer, hold space and drag to pan** — and a rectified strip loupe. The fit and the composite sit **side by side and always have** — the result pane re-renders as you drag, which is how a corner gets judged, so it is the layout rather than a mode you can switch off. Then an on-by-default realism pass that colour-matches the source to the photo's light, **Save** (or **Render**, for a video) into the project folder (`--out-dir`), and a **Send to Claude** button that reaches you through the plugin's own MCP server. The UI is a hand port of the project's Figma design file — dark only.
+**What ships (v0.66):** a local browser UI (`scripts/ui.py`) that walks the designer through the whole job — pick the photo and the screen source, which may be an image **or a video** (the images you have used before, drag-drop, browse, path, or a **Figma frame link**), auto-detect the screen as a starting position — and when detection cannot tell which region is a screen, **Point at screen**: one click inside it and the detector uses that point — or, if this photograph has been fitted before, **the fit it was saved with comes back** as the starting position instead of a detection, recognised by the photo's own pixels so a rename or a drag-drop still match — and every save also writes a **portable `.fit.json` beside the mockup** that can be dropped back onto the page later, which is how a fit survives a re-export, another machine, or someone else's hands — then **match the four edges** (drag an edge's middle to slide it, near an end to pivot; corners still draggable) with canvas navigation that follows the usual conventions — **hold ⌘ and scroll to zoom to the pointer, hold space and drag to pan** — and a rectified strip loupe. The fit and the composite sit **side by side and always have** — the result pane re-renders as you drag, which is how a corner gets judged, so it is the layout rather than a mode you can switch off. Then an on-by-default realism pass that colour-matches the source to the photo's light, **Save** (or **Render**, for a video) into the project folder (`--out-dir`), and a **Send to Claude** button that reaches you through the plugin's own MCP server. The UI is a hand port of the project's Figma design file — dark only.
 
 The geometry is exact (`warp.py`); the detection is advisory (`detect.py`) and the human corrects it. **When a detection is wrong and you want to know why**, ask for the candidate list: `POST /api/detect {"trace": true}` writes `<session>/candidates.json`, or run `python3 scripts/detect.py --photo P --out-corners /tmp/c.json --trace /tmp/t.json` (add `--click X,Y`). Every candidate quad is in there with its score and whether it was accepted, rejected, never reached, or filtered out by the click — which is what separates "the screen was never proposed" from "it was proposed and something else won".
 

package/ui/index.html

@@ -9,10 +9,12 @@
      SURFACES STEP: well (recessed) < bg < sunk < card < raise < float. The
      previous build used one tone for the top bar, rail, dock, popovers AND
      buttons, so nothing read as a control sitting on a panel — it read as
-     regions of one sheet divided by lines. Depth now comes from tone steps
-     plus a 1px top inner highlight (--hi), which is what actually separates
-     a raised control from a div in a dark UI; shadow is reserved for things
-     that genuinely float.
+     regions of one sheet divided by lines. Depth comes from tone steps alone
+     now; the 1px top inner highlight (--hi) that visual-language.md documents
+     as load-bearing for reading a raised control apart from a div was
+     removed app-wide by request, 16 Sep 2026 — a deliberate departure
+     from that doc, not a regression. Shadow is reserved for things that
+     genuinely float.
      Status colours keep three distinct LUMINANCE steps, not three hues —
      measured, --ok and --warn once differed by 1.01:1, invisible in greyscale
      and to red-green colour blindness. --line divides; --edge bounds anything
@@ -57,6 +59,10 @@
        primary button is therefore the cursor and the press, as designed. */
     --acc:#f23b0d; --acc-btn-rest:#f23b0d; --acc-press:#bb2b00;
     --acc-stroke:#ff6833; --acc-ink:#fbf9f9; --acc-soft:rgba(242,59,13,.14);
+    /* slider/handle/ring/focus, read as a solid at 40% over the card in
+       Figma's Focus state (216:470) -- rgba(255,104,51,.4) is --acc-stroke's
+       own channels, not a separate pick. */
+    --acc-glow:rgba(255,104,51,.4);
     /* Neutral button hover/pressed are explicit surfaces in Figma, not a
        brightness filter on the rest state. Re-picked 11 Sep 2026 against the
        polished Button matrix (4:14): hover's border is border/edge-mid, and
@@ -107,6 +113,13 @@
     --group-edge-lift:rgba(255,255,255,.4);
     /* The Button Group's stroke weight (0.75, set 14 Sep); the pills keep 1px. */
     --group-bw:.75px;
+    /* Segment Button 138:255, re-read 16 Sep 2026: a horizontal group now
+       carries its own divider between segments (button/secondary/label/default
+       at 10% -- exactly --ink at 10%), a real element in the file, on by
+       default and turned off per-instance where it isn't wanted (the last
+       segment, mainly -- there's nothing after it to divide from). Vertical
+       groups still have no divider variant in the file; not added here. */
+    --seg-divider:rgba(233,236,241,.1);
     --group-shadow:0 2px 4px rgba(0,0,0,.08), 0 3px 10px rgba(0,0,0,.12), 0 4px 24px rgba(0,0,0,.25);
     --pill-shadow:0 2px 2px rgba(0,0,0,.03), 0 3px 5px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.25);
 
@@ -136,13 +149,18 @@
        Don't "fix" either by moving --ok back; that reopens the pair that counts. */
     --ok:#4fbf8b; --err:#e5534b;
 
-    --hi:inset 0 1px 0 rgba(255,255,255,.06);
+    /* --hi (inset 0 1px 0 rgba(255,255,255,.06), the top inner highlight on
+       every raised control) removed by request, 16 Sep 2026 -- was
+       documented in visual-language.md as deliberate ('most of the distance
+       between div and control'). Left here as the reason it is gone, not
+       just that it is. */
     --shadow:0 16px 40px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.4);
     --r-sm:6px; --r-md:8px; --r-lg:12px;
     --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s9:48px;
     /* 120ms originally, per the visual-language notes. asked for a bit
        slower on 5 Sep — one token, so retuning is a one-line change. */
-    --t:180ms cubic-bezier(.2,0,0,1);
+    --t-dur:180ms;                 /* the duration alone, for delays */
+    --t:var(--t-dur) cubic-bezier(.2,0,0,1);
     --t-pop:220ms cubic-bezier(.2,0,0,1);   /* popovers travel further */
     /* Every control animates the SAME four properties on the same curve. Kept as
        one token because the failure mode here is a control that transitions its
@@ -177,11 +195,25 @@
      the part that should give; the actions are fixed-size and must not. */
   .topbar > *{min-width:0}
   .tb-chips{overflow:hidden}
-  .tb-actions{flex:none}
+  /* Figma 15:108: three groups at 16px — the format control, the save PAIR,
+     and the rail toggle — with 8px inside the pair. Save and Send to Claude
+     belong together (272:1517 frames them); the toggle does not. */
+  .tb-actions{flex:none;display:flex;align-items:center;gap:var(--s4)}
+  .tb-save{display:flex;align-items:center;gap:var(--s2)}
   .tb-left{display:flex;align-items:center;gap:var(--s9)}
   .tb-chips{display:flex;align-items:center;gap:var(--s2)}
   .tb-arrow{color:var(--mute)}
-  .tb-actions{display:flex;align-items:center;gap:var(--s2)}
+  /* Icon-only, but NOT squeezed: Figma 272:1494 is a secondary button keeping
+     the base 12px side padding around a 16px icon, so 40x28. An earlier version
+     of this forced it to 28 square and read as a different species from the
+     buttons beside it. */
+  .iconbtn{flex:none;display:inline-flex;align-items:center;justify-content:center}
+  .iconbtn svg{display:block;width:16px;height:16px}
+  /* Two glyphs, one button (icons / sidebar-opened 272:1489, sidebar-closed
+     272:1463). Each shows the rail's CURRENT state in the width of its two
+     panels, while its chevron points the way the next click will move it. */
+  #railBtn .i-closed,.app.railoff #railBtn .i-open{display:none}
+  .app.railoff #railBtn .i-closed{display:block}
   /* Mona Sans is the brand face in Figma; it is not installed on a stock Mac,
      so it degrades to the system UI face rather than to a serif. */
   /* The wordmark ships WITH the plugin. Mona Sans is the brand face in Figma and
@@ -222,7 +254,7 @@
      where every variant carries the same radius. Md had been 8 since 11 Sep. */
   button{font:inherit;color:var(--ink);background:var(--raise);
          border:var(--bw) solid var(--edge);border-radius:var(--r-sm);
-         padding:0 var(--s3);height:28px;font-size:13px;cursor:pointer;box-shadow:var(--hi);
+         padding:0 var(--s3);height:28px;font-size:13px;cursor:pointer;
          transition:var(--t-all), transform var(--t)}
   button:hover{background:var(--btn-hover);border-color:var(--btn-hover-edge)}
   button:active{background:var(--btn-press);border-color:var(--btn-press-edge);
@@ -260,7 +292,7 @@
      as an ordinary neutral control. */
   button.accent:not(:disabled):not(.primary){
     background:var(--raise); color:var(--ink); border-color:var(--edge);
-    font-weight:400; box-shadow:var(--hi)}
+    font-weight:400}
   /* Radius is deliberately NOT restated in these three rules any more. It is the
      base button's, so .sm keeps winning on size — an accent .sm button used to
      be handed --r-md by specificity alone. */
@@ -331,7 +363,7 @@
      for the next action. The old accent ring is gone for that reason.
      ------------------------------------------------------------------ */
   .chip{border-radius:999px;padding:0 var(--s3);height:28px;font-size:12px;
-        background:var(--raise);border-color:var(--edge);box-shadow:var(--hi)}
+        background:var(--raise);border-color:var(--edge)}
   /* Chip state matrix, ported from the Chip component set. Every state now
      steps in the direction it should: hover UP from rest, pressed DOWN from it,
      and selected-hover up again from selected-rest. Before the new tokens
@@ -340,7 +372,7 @@
   .chip:hover{background:var(--raise-mid);border-color:var(--edge-mid)}
   .chip:active{background:var(--raise);border-color:var(--edge-mid)}
   .chip.on{background:var(--raise-hi);border-color:var(--edge-hi);
-           color:var(--ink);font-weight:600;box-shadow:var(--hi)}
+           color:var(--ink);font-weight:600}
   .chip.on:hover{background:var(--raise-highest);border-color:var(--edge-hi)}
   .chip.on:active{background:var(--raise-mid);border-color:var(--edge-hi)}
   .chip[disabled]{opacity:.5;color:var(--mute);background:var(--raise);border-color:var(--edge)}
@@ -355,13 +387,6 @@
      column and read like a segmented *bar*. justify-self:start is what
      actually holds it to its content width. */
 
-  /* A stepper should look joined. */
-  /* Stepper (Figma 28:816). NOT a bespoke control: it is ordinary Default
-     buttons butted together, so every state — hover, pressed, disabled — is
-     the button's own. The previous version was borderless, transparent and
-     24px tall, which is exactly why +/- read as a different species from the
-     buttons beside them. Only the corner radii and the shared middle border
-     are special. */
   /* ------------------------------------------------------------------
      `hidden` must actually hide. THREE components have now needed this
      patched one at a time — .cvbar, #outImg/#outVid, and the format
@@ -377,16 +402,6 @@
      ------------------------------------------------------------------ */
   [hidden]{display:none !important}
 
-  .stepper{display:inline-flex;align-items:center}
-  .stepper button{border-radius:0}
-  .stepper button:first-child{border-top-left-radius:var(--r-sm);border-bottom-left-radius:var(--r-sm)}
-  .stepper button:last-child{border-top-right-radius:var(--r-sm);border-bottom-right-radius:var(--r-sm)}
-  /* One border between neighbours rather than two stacked. */
-  .stepper button + button{margin-left:calc(-1 * var(--bw))}
-  .stepper button:hover,.stepper button:focus-visible{position:relative;z-index:1}
-  /* The dock's stepper is Sm height but keeps 12px padding (Figma 8:31/8:33). */
-  .dock-step button{padding:0 var(--s3)}
-
   /* ------------------------------------------------------------------
      Segmented control (Figma 84:177). NOT a stepper: a stepper is ordinary
      buttons butted together, which is right for -/+ but wrong for a choice —
@@ -414,7 +429,11 @@
   .seg:active{border-color:var(--edge-mid)}
   /* The track carries the border and the elevation, so a segment is a label
      until it is selected: no border, no shadow, no lift on press. */
-  .seg button{height:24px;padding:0 11px;font-size:12px;border-radius:var(--r-xs);
+  /* 70px each (Figma 84:161, so 2+70+2+70+2 = 146): a two-way choice reads as
+     one control rather than two adjacent buttons, and equal halves are most of
+     what sells that. min-width rather than width so the ghost below still
+     governs if a label ever outgrows 70. */
+  .seg button{height:24px;min-width:70px;padding:0 11px;font-size:12px;border-radius:var(--r-xs);
               background:transparent;border:0;box-shadow:none;color:var(--mute);
               font-weight:400;display:inline-flex;flex-direction:column;
               align-items:center;justify-content:center}
@@ -434,11 +453,14 @@
   .seg button.sel{background:var(--raise);color:var(--ink);font-weight:600}
   .seg button.sel:hover{background:var(--raise-hi)}
   .seg button.sel:active{background:var(--raise-mid);transform:none}
-  /* A toggle in the strip head. On = the raised surface every selected thing
-     on this page has (the segmented thumb, the device chip), off = a label. */
-  .striphead button[aria-pressed],#dofBoth[aria-pressed]{background:transparent;border-color:transparent;box-shadow:none;color:var(--mute)}
-  .striphead button[aria-pressed]:hover,#dofBoth[aria-pressed]:hover{color:var(--ink)}
-  .striphead button[aria-pressed="true"],#dofBoth[aria-pressed="true"]{background:var(--raise);border-color:var(--edge);color:var(--ink);font-weight:600}
+  /* A text toggle that reads as a label until it is on. On = the raised
+     surface every selected thing on this page has (the segmented thumb, the
+     device chip). The edge view's Contrast toggle used to share this rule; it
+     is a Segment Button inside the strip's own zoom group now (Figma 8:28) and
+     takes .segbtn[aria-pressed="true"] instead. */
+  #dofBoth[aria-pressed]{background:transparent;border-color:transparent;box-shadow:none;color:var(--mute)}
+  #dofBoth[aria-pressed]:hover{color:var(--ink)}
+  #dofBoth[aria-pressed="true"]{background:var(--raise);border-color:var(--edge);color:var(--ink);font-weight:600}
   /* Input chip (Figma 5:14 / 5:20). Surface and shadow are declared here rather
    than inherited from the base button rule, so the filled state is explicit and
    the .is-empty override below has something definite to override.
@@ -452,7 +474,7 @@
      chip: accent stroke and label on the empty one, accent fill on the filled. */
   .inputchip{display:inline-flex;align-items:center;gap:var(--s2);max-width:220px;
              height:32px;padding:0 12px 0 6px;border-radius:999px;color:var(--ink);
-             background:var(--raise-hi);border:var(--bw) solid var(--edge-hi);box-shadow:var(--hi)}
+             background:var(--raise-hi);border:var(--bw) solid var(--edge-hi)}
   .inputchip:hover{background:var(--raise-highest);border-color:var(--edge-hi)}
   .inputchip:active{background:var(--raise-mid);border-color:var(--edge-hi)}
   .inputchip.over,.inputchip.over:hover{background:var(--acc);border-color:var(--acc-stroke);
@@ -534,18 +556,47 @@
      of this page where that is optional is a version where the check is
      optional. Two equal panes plus the rail. */
   .stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 344px;
-         min-height:0;overflow:hidden}
+         min-height:0;overflow:hidden;
+         /* The COLUMN animates, not the rail's contents: the panes have to grow
+            into the space at exactly the rate the rail gives it up, and one
+            interpolating track does that for free. Engines that will not
+            interpolate grid-template-columns simply jump, which is the
+            behaviour this replaces. The global prefers-reduced-motion rule
+            near the top of this sheet switches it off. */
+         transition:grid-template-columns var(--t)}
   /* Below ~1100px two panes and a 344px rail no longer fit, and the page starts
      scrolling sideways — which the UI audit catches as a hard failure. Stack the
      panes instead of dropping one: losing the comparison is the one thing this
      layout exists to prevent, so the axis gives way before the pairing does.
      (Found by the audit after compare stopped being optional, at 742px.) */
+  /* Collapsed (the top bar's last button). The rail is 344px of window the two
+     panes are not getting, and nothing in it is needed while you are placing a
+     corner — so it folds away and they take the room. The state is remembered.
+     It also buys back the side-by-side comparison on a narrower window: the
+     rule below stacks the panes under 1100px because two of them PLUS a 344px
+     rail do not fit, and without the rail they do. */
+  /* A 0px THIRD track, not two tracks: the rail is still a grid item, and with
+     only two tracks declared it would be auto-placed into an implicit third
+     column and reappear at full width. */
+  .app.railoff .stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 0px}
+  /* display:none cannot animate, and a 0-wide rail with overflow:auto still
+     holds focusable buttons — so visibility does the hiding, delayed to the end
+     of the slide on the way out and immediate on the way in. */
+  .rail{transition:visibility 0s}
+  .app.railoff .rail{visibility:hidden;transition:visibility 0s linear var(--t-dur)}
   @media (max-width:1100px){
     .stage{grid-template-columns:minmax(0,1fr) 344px;
            grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
     .stage > .pane:first-of-type{grid-column:1;grid-row:1}
     .stage > #outPane{grid-column:1;grid-row:2;border-top:1px solid var(--line)}
     .stage > .rail{grid-column:2;grid-row:1 / span 2}
+    /* Collapsed at this width the panes are stacked and each one is now the
+       FULL width rather than sharing it with the rail, which is the better
+       trade here: side by side they would be ~370px each, narrower than the
+       stacked pair, and the comparison is what the layout exists for. */
+    /* Two tracks again rather than one, for the same reason as above: this
+       media query places the rail in column 2 explicitly. */
+    .app.railoff .stage{grid-template-columns:minmax(0,1fr) 0px}
   }
   #types{flex-wrap:nowrap}
   /* The same omission one level down: rows constrained, column implicit.
@@ -616,19 +667,56 @@
           inset:calc(-1 * var(--group-bw));border:var(--group-bw) solid transparent;
           border-radius:calc(var(--r-sm) + var(--group-bw))}
   .noblend .pillwrap > .ring.lift{mix-blend-mode:normal;border-color:transparent}
-  .bgroup.row{flex-direction:row}
+  /* flex-wrap:nowrap and align-items:stretch are declared here, not just on
+     .bgroup, because a generic .row utility (line ~908, unrelated -- it wraps
+     chip lists in the sidebar) happens to share this class name and sets
+     flex-wrap:wrap/align-items:center at the same specificity as .bgroup's
+     own base rule. .bgroup.row's two classes outrank the generic one-class
+     .row, so declaring them here wins outright rather than depending on
+     which rule the cascade happens to read last. Latent since the class was
+     first reused for orientation (11 Sep) -- every existing horizontal group
+     happened to fit its container without wrapping, so nothing ever forced
+     it to matter until the video bar's Button Group (16 Sep, 7:38) hit a
+     narrower parent and visibly split into two rows. */
+  /* gap:0 for the same reason as the two properties above: the generic .row
+     utility sets gap:8px (line ~908), and .bgroup never declared its own, so
+     it leaked in here too -- found 16 Sep when Play and Preview turned out to
+     have an 8px gap between them that the file doesn't show (they're meant
+     to touch; the divider is the only separation). */
+  .bgroup.row{flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:0}
   .bgroup > .segbtn:first-of-type{border-top-left-radius:var(--r-sm);border-top-right-radius:var(--r-sm)}
   .bgroup > .segbtn:last-of-type{border-bottom-left-radius:var(--r-sm);border-bottom-right-radius:var(--r-sm)}
   .bgroup.row > .segbtn:first-of-type{border-radius:var(--r-sm) 0 0 var(--r-sm)}
   .bgroup.row > .segbtn:last-of-type{border-radius:0 var(--r-sm) var(--r-sm) 0}
   .bgroup > .segbtn:only-of-type{border-radius:var(--r-sm)}
   .segbtn,.segbtn:hover,.segbtn:active{border:0;box-shadow:none;transform:none}
-  .segbtn{border-radius:0}
+  .segbtn{border-radius:0;position:relative}
+  /* The divider is an absolutely-positioned 1px slice, not a border -- a
+     border would add a device pixel to the segment's own measured width
+     (this file keeps those to the pixel against the Figma frame). Only
+     .row (horizontal) groups get it, matching the file: Vertical's variants
+     carry no divider prop at all. :last-of-type is the "off where needed" --
+     the last segment has nothing to its right to divide from. */
+  /* Height corrected 16 Sep: the file's own Divider node (226:5252) measures
+     1x20 at y=6 inside a 32-tall button -- a 6px inset top and bottom, not
+     the button's full height. First pass used top:0/bottom:0 (32px) without
+     checking the node's own geometry. */
+  .bgroup.row > .segbtn:not(:last-of-type)::after{content:"";position:absolute;
+        top:6px;bottom:6px;right:0;width:1px;background:var(--seg-divider);pointer-events:none}
   /* Segment Button re-read 14 Sep 2026: 32px tall, 32px minimum, 8px side
      padding; a text label sits in its own 6px-padded box, so a text button
      pads 14px. Was 28 / 6. */
+  /* flex-shrink:0 -- min-width:32px above is a floor for an ICON button's
+     square, not a licence to crush a text button's label below readable
+     width. A .segbtn's min-width:auto default (content-based) would already
+     have protected text buttons in a flex row; setting an explicit min-width
+     removes that protection, so it has to come back explicitly. Surfaced by
+     the video bar's Button Group (16 Sep, 7:38): "Preview" shrank to a single
+     "P" in a narrow pane before this. The slider's own input keeps its
+     min-width:140 floor and is what gives way first (see #vframe below). */
   .segbtn{height:32px;min-width:32px;padding:0 8px;font-size:12px;color:var(--ink);
-          background:var(--raise);display:inline-flex;align-items:center;justify-content:center;gap:4px}
+          background:var(--raise);display:inline-flex;align-items:center;justify-content:center;gap:4px;
+          flex-shrink:0}
   .segbtn.txt{padding:0 14px}
   .segbtn:hover{background:var(--raise-mid)}
   .segbtn:active{background:var(--raise-low)}
@@ -666,7 +754,6 @@
                max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
                display:inline-flex;line-height:20px}
   #detSt:empty,#outSt:empty{display:none}
-  .lbl{color:var(--ink);text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600}
   /* overscroll-behavior:none on both wells (14 Sep 2026): a trackpad pinch is a
      wheel event we zoom on, but macOS still owns the gesture's elastic bounce.
      While the fingers were moving the browser let the well rubber-band past
@@ -688,21 +775,56 @@
      keeps it where the eye expects while the picture moves under it. */
   /* max-width so a narrow pane (compare view on a small window) can never
      push the bar outside the frame it is anchored to. */
-  .cvbar{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;z-index:3;
-         max-width:calc(100% - 32px);overflow-x:auto;
-         display:flex;align-items:center;gap:var(--s6);
-         padding:var(--s2) var(--s2) var(--s2) var(--s3);
-         background:var(--overlay);backdrop-filter:blur(5px);
-         -webkit-backdrop-filter:blur(5px);
-         border-radius:var(--r-lg);box-shadow:var(--shadow)}
-  .cvbar-actions{display:flex;align-items:center;gap:var(--s2);flex-wrap:nowrap}
+  /* Positioning only -- the look (background, the four-blend-ring stroke,
+     radius, shadow) now comes from the .bgroup.row inside it, same split as
+     .brail/.bgroup on the fit pane. Centred with left:0/right:0 + justify-
+     content:center, NOT left:50%+transform: a transform (like the z-index
+     this replaced) opens its own stacking context, and mix-blend-mode cannot
+     cross a stacking-context boundary -- the group's four rings would blend
+     against .cvbar's own (empty) background instead of the video/photo
+     behind it. Exactly the gotcha .brail was already written to avoid;
+     .cvbar just hadn't been, since it predates the group being inside it.
+     pointer-events follows .brail's pattern for the same reason: the bar
+     now spans the full width, so clicks on the canvas either side of the
+     group must still pass through. */
+  /* overflow-x:auto is gone -- CSS forces the OTHER axis to compute as
+     'auto' too whenever one of overflow-x/overflow-y is non-visible (you
+     cannot actually get overflow-x:auto with a truly visible overflow-y),
+     so it was clipping .bgroup's own drop shadow and the top/bottom of its
+     blend rings to exactly the bar's 32px height -- invisible instead of a
+     shadow, and the ring only partly there. Found by comparing this rail to
+     .brail (fit pane), which has never set any overflow and shows both
+     fully. .brail also never needed to scroll: it doesn't set overflow at
+     all and simply lets its content overflow visibly, so a narrow pane's
+     residual clipping (rare -- a normal window is comfortably wider than
+     either rail) now happens at #outWrap's own overflow:auto instead of a
+     dedicated scrollbar on the bar itself. Trading a rare, already-degraded
+     edge case for a shadow and stroke that are always correct. */
+  .cvbar{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;
+         padding:0 var(--s4);pointer-events:none;white-space:nowrap}
+  .cvbar .bgroup{pointer-events:auto}
+  /* The slider cell: label, track, frame counter, in the Segment Button's own
+     32px height and 12px side padding (227:5326). Same background as the
+     group it sits in, so it needs no radius of its own to look seamless at
+     rest -- given one anyway, for the corner .bgroup itself doesn't clip. */
+  /* Right padding 8px, not the symmetric 12 the Figma frame's own Slider
+     wrapper carries: with .bgroup.row's gap now 0, the space from the frame
+     count to the play icon is this padding PLUS .segbtn's own 8px left
+     padding, and 12+8=20 read too wide against the group's own -- 8+8=16
+     matches --s4 and the file's row of Play/Preview. Left padding (before
+     "Fit on frame") is unaffected. */
+  .cvslider{display:flex;align-items:center;gap:var(--s2);height:32px;box-sizing:border-box;
+            padding:0 8px 0 12px;background:var(--raise);border-radius:var(--r-sm) 0 0 var(--r-sm)}
+  /* .bgroup.row > .segbtn:first-of-type rounds the first BUTTON's left
+     corners -- wrong here, since the slider cell (a <div>, not a .segbtn) is
+     what actually sits leftmost. Cancelled by ID specificity. */
+  #vidbar .bgroup > .segbtn:first-of-type{border-radius:0}
   /* The scrubber needs a floor, or the bar "fits" by crushing it. Moving the
      format control out stopped the bar overflowing at 742px — and the space it
      freed went to the other controls while the slider collapsed to FOUR pixels,
-     measured. The bar may scroll (it has overflow-x:auto by design); the one
+     measured. The bar may scroll (.cvbar keeps overflow-x:auto); the one
      control that is useless when small must not be the one that gives way. */
   #vframe{min-width:140px;flex:1 1 180px}
-  .cvbar{white-space:nowrap}
   /* `hidden` is a UA display:none, which any explicit display beats — and
      .cvbar sets display:flex. Without this the bar stays visible while the
      photo is chosen but the screenshot is not, offering corners to fit
@@ -863,15 +985,9 @@
      reason a true-black UI stops reading as a hole. It is NOT the same maths as
      compose()'s emissive, and the page says so. */
   #liveVid.emissive{mix-blend-mode:screen}
-  /* An icon button is square and centres its glyph; everything else about it —
-     height, border, the raise ladder — stays whatever .sm already is, so the bar
-     keeps one button shape. */
-  /* `flex:none` and a min-width, not just a width: the bar is a nowrap flex row
-     that overflows at narrow widths, and a flex item with a width will happily
-     shrink to its content. Measured at 742px before this: the button was 13px
-     wide — the glyph and its border — which is a target nobody can hit. */
-  .sm.icon{display:inline-flex;align-items:center;justify-content:center;
-           flex:none;width:28px;min-width:28px;padding:0}
+  /* .sm.icon (the square icon-only small button) is gone -- #playlive is a
+     .segbtn now, part of the video bar's Button Group (7:38, 16 Sep), and
+     nothing else used the class. */
   .empty{color:var(--mute);font-size:12px;padding:24px;text-align:center;align-self:center;justify-self:center;max-width:320px}
 
   .rail{min-width:0;overflow:auto;padding:0;display:grid;align-content:start;background:var(--card)}
@@ -914,7 +1030,11 @@
      tooltip hides the only copy of the explanation from anyone not using a
      mouse. */
   .info{flex:none;width:16px;height:16px;padding:0;border:none;
-        background:none;box-shadow:none;color:var(--edge-hi);cursor:help;line-height:0}
+        /* The file draws it at #3a3a40 = --raise-hi (64:375), well below the
+           --edge-hi it used to carry. It is an affordance, not information:
+           the sentence it holds is reachable by hover AND focus, and the
+           rule below lifts it to --mute the moment anyone goes looking. */
+        background:none;box-shadow:none;color:var(--raise-hi);cursor:help;line-height:0}
   .info svg{display:block;width:16px;height:16px}
   .info:hover, .info:focus-visible{color:var(--mute)}
   /* The tooltip is anchored to the section HEADER, not to the 16px icon, and
@@ -936,7 +1056,7 @@
   .tip{position:fixed;width:264px;max-width:calc(100vw - 32px);
        padding:8px 10px;border-radius:var(--r-md);
        background:var(--float);border:1px solid var(--edge);
-       box-shadow:var(--shadow), var(--hi);
+       box-shadow:var(--shadow);
        color:var(--ink);font-size:12px;font-weight:400;line-height:1.45;
        letter-spacing:normal;text-transform:none;text-align:left;white-space:normal;
        z-index:70;opacity:0;visibility:hidden;pointer-events:none;
@@ -975,15 +1095,61 @@
      land, since the thumb travels inside the track's content box. */
   input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;
         margin:0;padding-inline:2px;background:transparent;box-sizing:border-box}
+  /* Ported from Figma 216:470 (16 Sep). Rail is surface/float, not --sunk --
+     the two read identically at a glance but are different tokens (the old
+     port had borrowed --sunk). Thumb is a squircle-radius square (r 3px),
+     not a pill -- the one visible shape change from the previous slider. */
   input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px;transition:var(--t-all);
-        background:linear-gradient(to right, var(--acc) 0 calc(var(--p,0) * 100%), var(--sunk) calc(var(--p,0) * 100%) 100%);
+        background:linear-gradient(to right, var(--acc) 0 calc(var(--p,0) * 100%), var(--float) calc(var(--p,0) * 100%) 100%);
         box-shadow:inset 0 0 0 1px var(--line)}
+  /* slider/track/pressed is a darker accent (--acc-press), not the rest
+     colour dimmed -- the fill itself recedes while the thumb comes forward. */
+  input[type=range]:active::-webkit-slider-runnable-track{
+        background:linear-gradient(to right, var(--acc-press) 0 calc(var(--p,0) * 100%), var(--float) calc(var(--p,0) * 100%) 100%)}
+  /* All five states in the file carry a crisp 1px --card ring around the
+     handle, sampled at (22,22,24) on every one of them (default, disabled,
+     hover, pressed) -- not just where the glow needed it. It is the casing
+     that separates the handle from whatever is under the rail, same idea as
+     the corner-loupe / quad-overlay casing elsewhere in this file. State
+     changes use their own 150ms transition rather than --t-all's 180ms --
+     the handle is dragged continuously, so it reads better a touch snappier
+     than a click target does. */
   input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;
-        margin-top:-5px;border-radius:999px;background:var(--raise);border:1px solid var(--edge-hi);
-        box-shadow:var(--hi), 0 1px 3px rgba(0,0,0,.4);transition:var(--t-all)}
-  input[type=range]:hover::-webkit-slider-thumb{border-color:var(--acc)}
+        margin-top:-5px;border-radius:3px;background:var(--raise);border:1px solid var(--edge-hi);
+        box-shadow:0 1px 3px rgba(0,0,0,.4), 0 0 0 1px var(--card);
+        transition:background-color .15s cubic-bezier(.2,0,0,1), border-color .15s cubic-bezier(.2,0,0,1),
+                   box-shadow .15s cubic-bezier(.2,0,0,1)}
+  /* Hover/Pressed in the file are rasterised because the ring carries a soft
+     outer glow (blur), which Figma exports as an image rather than a
+     translatable box-shadow. The glow's own blur radius is judged against
+     the two PNGs' bounding boxes (44px/52px tall on a 26px track --
+     symmetric ~9px/~13px halos) rather than measured to the pixel. */
+  input[type=range]:hover::-webkit-slider-thumb{background:var(--raise-mid);border-color:var(--acc-stroke);
+        box-shadow:0 1px 3px rgba(0,0,0,.4), 0 0 0 1px var(--card), 0 0 6px 1px var(--acc-glow)}
+  input[type=range]:active::-webkit-slider-thumb{background:var(--acc);border-color:var(--acc-stroke);
+        box-shadow:0 1px 3px rgba(0,0,0,.4), 0 0 0 1px var(--card), 0 0 9px 2px rgba(255,104,51,.6)}
+  /* Focus keeps the default handle colours and adds a second, wider ring
+     (the same --card gap, at 1.5px so it clears the thicker glow) plus the
+     accent glow, same language as the switch's focus ring (line ~792) --
+     not a browser outline. */
   input[type=range]:focus-visible{outline:none}
-  input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--acc);outline-offset:2px}
+  input[type=range]:focus-visible::-webkit-slider-thumb{
+        box-shadow:0 1px 3px rgba(0,0,0,.4), 0 0 0 1.5px var(--card), 0 0 0 3px var(--acc-glow)}
+  /* Disabled reads as the handle's own colours at roughly 50% opacity over
+     --card in the file (sampled fill ~(33,33,36), which is --raise blended
+     ~52% over --card, and the track's ~(105,33,12) is --acc-dis at the same
+     ~50%) -- Figma's own Disabled variants are usually built as a group
+     opacity rather than a recolour. Kept as solid tokens instead: the rest
+     of this system deliberately does NOT fade disabled controls (see the
+     accent-disabled note above --acc-dis) so it can stay readable, and a
+     lone opacity-faded slider would be the one control that fades. The ring
+     stays -- it is the one thing every state agrees on. */
+  input[type=range][disabled]{cursor:not-allowed}
+  input[type=range][disabled]::-webkit-slider-runnable-track{
+        background:linear-gradient(to right, var(--acc-dis) 0 calc(var(--p,0) * 100%), var(--raise-low) calc(var(--p,0) * 100%) 100%);
+        box-shadow:inset 0 0 0 1px var(--line)}
+  input[type=range][disabled]::-webkit-slider-thumb{background:var(--raise);border-color:var(--edge-low);
+        box-shadow:0 0 0 1px var(--card)}
   /* Captions are text/faint in Figma. The port had quietly used --mute
      instead; now they follow the token as designed. At the brightened
      #8f939ab2 that measures 3.48:1 on card — up from 2.42:1, still under the
@@ -991,13 +1157,20 @@
      silently re-deviated. */
   .hint{color:var(--faint);font-size:12px;margin:8px 0 0;line-height:1.5}
 
-  /* Figma 8:28: 198px tall — 16 padding, 28 header, 8 gap, 130 strip, 16
-     padding. It is a fixed band and must never absorb leftover height. */
-  .dock{background:var(--card);padding:var(--s4);display:grid;gap:var(--s2);
-        grid-template-rows:28px 130px;flex:none;
+  /* Figma 8:28, re-read 17 Sep: 146px tall — 8 padding, 130 strip, 8 padding.
+     It is a fixed band and must never absorb leftover height. The 28px header
+     that held the zoom stepper and the status line is gone; both float over
+     the strip now, and the 52px it cost is given back to the picture. */
+  .dock{background:var(--card);padding:var(--s2);display:grid;
+        grid-template-rows:130px;flex:none;
+        /* Anchors the two floating children. It must stay z-index:auto — a
+           stacking context here would cut their blend rings off from the strip
+           behind them, which is exactly what cost the video bar its stroke in
+           v0.65.0. position:relative alone creates no context. */
+        position:relative;
         /* The rule is an inset shadow, not a border, so it does not add a
-           pixel to the band's height: 16+28+8+130+16 = 198 exactly. */
-        box-shadow:inset 0 1px 0 var(--line), inset 0 2px 0 rgba(255,255,255,.04)}
+           pixel to the band's height: 8+130+8 = 146 exactly. */
+        box-shadow:inset 0 1px 0 var(--line)}
   .dock.hidden{display:none}
   /* Version badge. Bottom-right, fixed, and deliberately the quietest thing on
      screen: --faint is the captions token (measured 3.50:1, the 1.4.3 floor for
@@ -1027,14 +1200,29 @@
   #pointat.suggest{background:var(--raise-hi);border-color:var(--edge-hi);color:var(--ink)}
   #pointat.armed{background:var(--raise-highest);border-color:var(--edge-hi);color:var(--ink)}
   .scroller.pointing canvas#c{cursor:crosshair}
-  /* Figma 8:29 is a 28px header holding 24px buttons — the header does not
-     shrink to hug them. */
-  .striphead{display:flex;align-items:center;gap:8px;font-size:12px;min-height:28px}
+  /* Both of these float OVER the strip (Figma 8:28). Their offsets in the file
+     are from the STRIP's own top-left, and the strip starts at the dock's 8px
+     padding, so each one carries that 8 too: the group at 8+8 / 8+17, the pill
+     at 8+8 from the top and the right. An absolutely positioned child is laid
+     out against its ancestor's PADDING box, so these are measured from the
+     dock's own edges and the arithmetic is done here rather than by the box.
+     .stripzoom is a WRAPPER, not a group (Figma's Frame 271): two Button
+     Groups stacked with 8px between them, 32 wide and 104 tall in total. The
+     zoom pair is one group and Contrast is a group of its own — the same
+     separation the fit pane's left rail makes between its zoom group and Fit,
+     and the reason for it is the same: a group reads as one family of actions,
+     and magnification and tonal treatment are not one family. The file's 1x is
+     not ported; an edge view has no "actual size" to return to. */
+  .stripzoom{position:absolute;left:16px;top:25px;
+             display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
+  /* left:auto undoes .pillwrap's own centring, which is right for the two pane
+     pills and wrong for this one. */
+  .pillwrap.stripstat{top:16px;left:auto;right:16px;margin:0}
   canvas#strip{display:block;width:100%;height:130px;border-radius:var(--r-md);
         background:var(--well);box-shadow:inset 0 0 0 1px var(--line), inset 0 1px 3px rgba(0,0,0,.5)}
   /* Floating mode: the loupe follows the edge instead of taking a permanent band. */
   .floatloupe{position:fixed;z-index:40;display:none;padding:8px;border-radius:var(--r-lg);
-              background:var(--float);border:1px solid var(--edge);box-shadow:var(--shadow), var(--hi)}
+              background:var(--float);border:1px solid var(--edge);box-shadow:var(--shadow)}
   .floatloupe.on{display:block}
   .floatloupe canvas{display:block;width:340px;height:104px;border-radius:var(--r-sm);
         background:var(--well);box-shadow:inset 0 0 0 1px var(--line)}
@@ -1063,7 +1251,7 @@
   .toast{position:absolute;left:0;top:0;width:100%;box-sizing:border-box;
          display:flex;align-items:flex-start;gap:8px;padding:10px 12px;
          border-radius:var(--r-md);background:var(--float);
-         border:1px solid var(--edge);box-shadow:var(--shadow), var(--hi);
+         border:1px solid var(--edge);box-shadow:var(--shadow);
          font-size:13px;line-height:1.45;color:var(--ink);
          pointer-events:auto;touch-action:none;transform-origin:50% 0;
          will-change:transform,opacity;
@@ -1127,7 +1315,7 @@
   .pop{position:fixed;z-index:51;width:640px;max-width:calc(100vw - 24px);
        max-height:78vh;overflow:auto;background:var(--float-glass);border:var(--bw) solid var(--edge);
        backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
-       border-radius:var(--r-lg);box-shadow:var(--shadow), var(--hi);padding:16px;
+       border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px;
        opacity:0;visibility:hidden;transform:translateY(6px) scale(.985);
        transform-origin:50% 0;
        transition:opacity var(--t-pop), transform var(--t-pop),
@@ -1220,8 +1408,11 @@
       <span class="seg" id="fmt" role="radiogroup" aria-label="Output format" hidden>
         <button class="sel" data-preset="web" data-label="Web" role="radio" aria-checked="true" title="H.264 at CRF 16 — near-visually-lossless, plays anywhere.">Web</button><button data-preset="prores" data-label="ProRes" role="radio" aria-checked="false" title="ProRes 422 HQ — bigger file, no chroma subsampling. For a case study or further editing.">ProRes</button>
       </span>
-      <button id="save" class="accent" disabled>Preview first</button>
-      <button id="imp" class="accent" disabled title="Send the saved file to Claude so it appears in the chat">Send to Claude</button>
+      <span class="tb-save">
+        <button id="save" class="accent" disabled>Preview first</button>
+        <button id="imp" class="accent" disabled title="Send the saved file to Claude so it appears in the chat">Send to Claude</button>
+      </span>
+      <button id="railBtn" class="iconbtn" aria-expanded="true" aria-controls="rail" aria-label="Settings rail"><svg class="i-open" viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--mute)" d="M4.76855 1C4.50954 1.2888 4.30589 1.62677 4.17383 2H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H4.17383C4.30589 14.3732 4.50954 14.7112 4.76855 15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V3C1 1.89543 1.89543 1 3 1H4.76855Z"/><path fill="var(--icon)" d="M7 15C5.89543 15 5 14.1046 5 13V3C5 1.96435 5.78722 1.113 6.7959 1.01074L7 1H13L13.2041 1.01074C14.1457 1.1062 14.8938 1.85435 14.9893 2.7959L15 3V13C15 14.1046 14.1046 15 13 15H7ZM13 14C13.5523 14 14 13.5523 14 13V3C14 2.44771 13.5523 2 13 2H7C6.44771 2 6 2.44771 6 3V13C6 13.5523 6.44772 14 7 14H13ZM7.14648 8.64648L7.79297 8L7.14648 7.35352L7.85352 6.64648L9.20703 8L7.85352 9.35352L7.14648 8.64648Z"/></svg><svg class="i-closed" viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--mute)" d="M8.76855 1C8.50954 1.2888 8.30589 1.62677 8.17383 2H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H8.17383C8.30589 14.3732 8.50954 14.7112 8.76855 15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V3C1 1.89543 1.89543 1 3 1H8.76855Z"/><path fill="var(--icon)" d="M11 15C9.89543 15 9 14.1046 9 13V3C9 1.96435 9.78722 1.113 10.7959 1.01074L11 1H13L13.2041 1.01074C14.1457 1.1062 14.8938 1.85435 14.9893 2.7959L15 3V13C15 14.1046 14.1046 15 13 15H11ZM13 14C13.5523 14 14 13.5523 14 13V3C14 2.44771 13.5523 2 13 2H11C10.4477 2 10 2.44771 10 3V13C10 13.5523 10.4477 14 11 14H13ZM10.793 8L12.1465 6.64648L12.8535 7.35352L12.207 8L12.8535 8.64648L12.1465 9.35352L10.793 8Z"/></svg></button>
     </div>
   </header>
 
@@ -1291,32 +1482,41 @@
            unchanged — you match the edges on one frame and every frame gets the
            same geometry, because the photo does not move. -->
       <div class="cvbar" id="vidbar" hidden>
-        <!-- What is left in this bar is only what the RESULT pane is for:
-             which moment of the clip you are looking at, and the two ways of
-             looking at it. The output format left for the top bar, beside
-             Render, because deciding how a file is written is not judging a
-             fit — and as the fifth control here it was squeezing the scrubber
-             to nothing at 742px. -->
-        <span class="sm" style="color:var(--mute)">Fit on frame</span>
-        <span class="cvbar-actions">
-          <input type="range" id="vframe" min="0" max="0" value="0" step="1"
-                 aria-label="Which frame of the clip to match the edges on">
-          <span class="sm" id="vframeLbl" style="color:var(--mute);min-width:9ch">0</span>
+        <!-- Ported from Figma 7:38 (16 Sep): the bar is now one Button Group
+             (solid --raise, the same four-blend-ring stroke every other rail
+             uses), not a frosted floating pill — the slider and the two
+             actions read as one joined control instead of a popover sitting
+             over the video. .cvbar itself keeps only the positioning
+             (centred, 16px off the bottom, scrolls if it doesn't fit) — same
+             split as .brail/.bgroup on the fit pane. -->
+        <div class="bgroup row"><i class="ring" aria-hidden="true"></i><i class="ring lift" aria-hidden="true"></i>
+          <!-- What is left in this bar is only what the RESULT pane is for:
+               which moment of the clip you are looking at, and the two ways of
+               looking at it. The output format left for the top bar, beside
+               Render, because deciding how a file is written is not judging a
+               fit — and as the fifth control here it was squeezing the scrubber
+               to nothing at 742px. -->
+          <div class="cvslider">
+            <span class="sm" style="color:var(--mute)">Fit on frame</span>
+            <input type="range" id="vframe" min="0" max="0" value="0" step="1"
+                   aria-label="Which frame of the clip to match the edges on">
+            <span class="sm" id="vframeLbl" style="color:var(--mute);min-width:9ch">0</span>
+          </div>
           <!-- Viewing controls sit with the scrubber, which is the other viewing
                control; the format stepper is about the OUTPUT and stays at the
                end. Icon-only, so each carries an aria-label — a title alone
                names it for a mouse and not for a screen reader. -->
-          <button class="sm icon" id="playlive" aria-label="Play the clip on the photo"
+          <button class="segbtn" id="playlive" aria-label="Play the clip on the photo"
                   title="Play the clip on the photo, right now. The browser applies the same four corners and corner radius, and approximates emissive with screen blending; the colour grade, grain and depth of field are not in this view.">
-            <svg viewBox="0 0 12 12" width="11" height="11" aria-hidden="true" focusable="false"><path d="M3 1.5 10 6 3 10.5Z" fill="currentColor"/></svg>
+            <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M5 3.5 12.5 8 5 12.5Z" fill="currentColor"/></svg>
           </button>
-          <button class="sm" id="playclip"
+          <button class="segbtn txt" id="playclip"
                   title="Composite a few seconds from the fitted frame through the real pipeline and play that. Slower — it is a render — but it is the only view with the grade, the grain and the true emissive blend.">Preview</button>
-        </span>
+        </div>
       </div>
     </section>
 
-    <aside class="rail">
+    <aside class="rail" id="rail">
       <div class="sect" id="secDevice" data-on="1">
         <div class="sect-top"><div class="sect-left"><h4>Device</h4></div></div>
         <div class="chips" id="types"></div>
@@ -1425,15 +1625,24 @@
   </div>
 
   <footer class="dock" id="dock">
-    <div class="striphead">
-      <span class="lbl">Edge view</span>
-      <span class="stepper dock-step"><button id="stripOut" aria-label="Zoom the edge view out">&minus;</button><button id="stripIn" aria-label="Zoom the edge view in">+</button></span>
-      <span class="sm" id="stripZ" style="color:var(--mute);font-variant-numeric:tabular-nums"></span>
-      <button class="sm" id="stripHC" aria-pressed="false" title="Stretch the strip's own tonal range to full contrast. For a dark screen on a dark frame, where the boundary is a few levels apart. The strip only — the composite is untouched.">Contrast</button>
-      <span class="spacer"></span>
-      <span class="sm" id="stripSt" style="color:var(--mute)"></span>
-    </div>
     <canvas id="strip" width="1280" height="130"></canvas>
+    <!-- Both float over the strip and come AFTER it in the DOM, so they paint
+         on top of it without a z-index — the same reason #outSt sits after
+         #outWrap. A z-index here would cost them their blend rings. -->
+    <div class="stripzoom">
+      <div class="bgroup" role="group" aria-label="Edge view magnification"><i class="ring" aria-hidden="true"></i><i class="ring lift" aria-hidden="true"></i>
+        <button class="segbtn" id="stripIn" aria-label="Zoom the edge view in" title="Zoom the edge view in — a narrower band across the boundary"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--icon)" d="M8.5 7.5H12.5V8.5H8.5V12.5H7.5V8.5H3.5V7.5H7.5V3.5H8.5V7.5Z"/></svg></button>
+        <button class="segbtn" id="stripOut" aria-label="Zoom the edge view out" title="Zoom the edge view out — a wider band across the boundary"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--icon)" d="M12.5 8.5H3.5V7.5H12.5V8.5Z"/></svg></button>
+      </div>
+      <!-- Its own group (Figma 271:1337), a single segment, so it takes the
+           radius on all four corners from .bgroup > .segbtn:only-of-type.
+           Glyph is icons / contrast (272:1421), which replaced the half-disc
+           drawn here while the file still had the Fit icon on this button. -->
+      <div class="bgroup"><i class="ring" aria-hidden="true"></i><i class="ring lift" aria-hidden="true"></i>
+        <button class="segbtn" id="stripHC" aria-pressed="false" aria-label="High contrast" title="Stretch the strip's own tonal range to full contrast. For a dark screen on a dark frame, where the boundary is a few levels apart. The strip only — the composite is untouched."><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--mute)" d="M7 2.08398C4.16237 2.56013 2 5.02706 2 8C2 10.9729 4.16245 13.4388 7 13.915V14.9268C3.60787 14.4414 1 11.5264 1 8C1 4.4736 3.6078 1.55758 7 1.07227V2.08398Z"/><path fill="var(--icon)" d="M8 1C9.90691 1 11.635 1.76326 12.8975 3H13V3.10156C14.237 4.36408 15 6.09284 15 8C15 9.90691 14.2367 11.635 13 12.8975V13H12.8975C11.635 14.2367 9.90691 15 8 15V1ZM9 13.915C9.34419 13.8573 9.67834 13.7709 10 13.6572V2.3418C9.67838 2.22811 9.34414 2.14173 9 2.08398V13.915ZM11 13.1953C11.3584 12.9879 11.6934 12.7452 12 12.4707V3.52832C11.6935 3.25392 11.3584 3.01105 11 2.80371V13.1953ZM13 11.3164C13.6315 10.3663 14 9.22632 14 8C14 6.77339 13.6317 5.63287 13 4.68262V11.3164Z"/></svg></button>
+      </div>
+    </div>
+    <span class="pillwrap stripstat"><i class="ring sat" aria-hidden="true"></i><i class="ring lum" aria-hidden="true"></i><i class="ring hue" aria-hidden="true"></i><i class="ring lift" aria-hidden="true"></i><span class="status" id="stripSt"></span></span>
   </footer>
 </div>
 
@@ -2646,7 +2855,12 @@ function paintRingsFallback(){
   if (!IS_WEBKIT || _ringsQueued) return;
   _ringsQueued = true;
   requestAnimationFrame(() => { _ringsQueued = false;
-    const panes = [[$('#c'), $('.pane')], [$('#outImg'), $('#outPane')]];
+    // The edge-view dock is a third surface carrying groups (Figma 8:28, 17
+    // Sep), and its backdrop is the strip canvas rather than either pane's
+    // picture. Without this pair the dock's zoom group and status pill get no
+    // ring colour at all in Safari: they sit outside both panes, so the loop
+    // never reached them and .noblend leaves the ring transparent.
+    const panes = [[$('#c'), $('.pane')], [$('#outImg'), $('#outPane')], [strip, $('#dock')]];
     for (const [src, pane] of panes){
       if (!src || !pane) continue;
       const ok = src.tagName === 'CANVAS' ? src.width > 0 : (!src.hidden && src.naturalWidth > 0);
@@ -3284,7 +3498,7 @@ function setStripHC(on){
   $('#stripHC').setAttribute('aria-pressed', on ? 'true' : 'false');
 }
 $('#stripHC').onclick = () => { setStripHC(!stripHC); drawStrip(); };
-function paintStrip(c, W, H, i, mode){
+function paintStrip(c, W, H, i, mode, padLeft = 9){
   c.setTransform(1,0,0,1,0,0);
   c.fillStyle = '#0c0c0b'; c.fillRect(0,0,W,H);
   const A = st.corners[i], B = st.corners[(i+1)%4];
@@ -3324,8 +3538,8 @@ function paintStrip(c, W, H, i, mode){
   const centre = st.corners.reduce((acc,cc)=>[acc[0]+cc[0]/4, acc[1]+cc[1]/4],[0,0]);
   const inwardIsDown = (n[0]*(centre[0]-A[0]) + n[1]*(centre[1]-A[1])) > 0;
   c.font = '600 11px system-ui'; c.textBaseline = 'middle';
-  casedText(c, 'screen', 9, inwardIsDown ? H/2 + 15 : H/2 - 15, 'rgba(255,255,255,.95)');
-  casedText(c, 'outside', 9, inwardIsDown ? H/2 - 15 : H/2 + 15, 'rgba(255,255,255,.62)');
+  casedText(c, 'screen', padLeft, inwardIsDown ? H/2 + 15 : H/2 - 15, 'rgba(255,255,255,.95)');
+  casedText(c, 'outside', padLeft, inwardIsDown ? H/2 - 15 : H/2 + 15, 'rgba(255,255,255,.62)');
 }
 function swingText(mode){
   if (mode === 'rotA') return 'the right end swings, pivot on the left';
@@ -3372,11 +3586,31 @@ function paintCorner(c, W, H, i){
   casedText(c, LBL[i], W/2 + 12, H/2 - 12, 'rgba(255,255,255,.95)');
 }
 const HANDLE_GAP_S = 4 + 1 + CASE_PAD/2 + 1;   // the same break the canvas leaves around a ring
+/* Figma 8:28 puts the strip's labels at x=59, which is exactly where the
+   floating zoom group ends (8 left + 32 wide) plus 19 of air. Two things stop
+   that 59 from being a literal here.
+   The canvas is a fixed 1280 wide stretched to whatever the band measures, so
+   a number in CSS pixels and a number in canvas pixels only agree at one window
+   width — hence the conversion.
+   And the gap is measured off the GROUP rather than assumed: the labels are
+   drawn from JS while the group is laid out by CSS, so anything that changes
+   the group's width (a longer icon set, a different radius, a zoom level) would
+   silently slide it under the text. Reading its real right edge means the air
+   between them is the design's 19px whatever the group does, and the design's
+   59 is the floor for the case where the group has not been laid out yet —
+   width 0 would otherwise put the labels at the strip's edge, UNDER the group.
+   The floating loupe has no group over it and keeps the default. */
+function stripLabelInset(W){
+  const r = strip.getBoundingClientRect();
+  if (!(r.width > 0)) return Math.round(59 * W / 1280);
+  const g = document.querySelector('.stripzoom');
+  const gRight = g ? g.getBoundingClientRect().right - r.left : 40;
+  return Math.round(Math.max(59, gRight + 19) * W / r.width);
+}
 function drawStrip(){
   const a = drag || hover || pick;
   const has = !!(st.corners && a && (a.kind === 'edge' || a.kind === 'corner') && img.naturalWidth);
   const corner = has && a.kind === 'corner';
-  $('#stripZ').textContent = '±' + stripHalf + 'px';
   if (loupeMode === 'dock'){
     $('#floatLoupe').classList.remove('on');
     const W = strip.width, H = strip.height;
@@ -3389,7 +3623,7 @@ function drawStrip(){
       paintCorner(sctx, W, H, a.i);
       $('#stripSt').textContent = `${LBL[a.i]} corner · ${(H/(2*cornerHalf())).toFixed(1)}× — the whole arc, and where each edge lands on it`;
     } else {
-      paintStrip(sctx, W, H, a.i, a.mode);
+      paintStrip(sctx, W, H, a.i, a.mode, stripLabelInset(W));
       $('#stripSt').textContent = `${EDGE_LBL[a.i]} edge · ±${stripHalf}px · ${(H/(2*stripHalf)).toFixed(1)}× across the boundary — ${swingText(a.mode)}`;
     }
   } else {
@@ -4062,6 +4296,51 @@ $('#imp').onclick = async () => {
     computeFit(); setCanvasZoom(wasFit ? fitScale : scale);
   });
 })();
+
+/* ---- the settings rail collapses -----------------------------------------
+   Last button in the top bar, after Send to Claude. Nothing in the rail is
+   needed while a corner is being placed, and it is 344px the two panes are not
+   getting — so it folds away and they take the room. Remembered across
+   sessions, like the loupe mode and the strip's contrast.
+   This block sits at the very end of the script deliberately: it calls into
+   drawStrip/syncOut on toggle, and those close over consts declared throughout
+   the file, so it must not run while any of them is still in its temporal dead
+   zone. */
+(() => {
+  const app = document.querySelector('.app'), btn = $('#railBtn'), stage = $('#stage');
+  let railWait;
+  const apply = (open, relayout) => {
+    app.classList.toggle('railoff', !open);
+    btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+    btn.title = open ? 'Hide the settings rail' : 'Show the settings rail';
+    if (!relayout) return;
+    // The panes just changed width, which is a resize in everything but name —
+    // so do what the resize handler does, then repaint the things that are
+    // MEASURED rather than laid out and have all just moved: the strip's
+    // labels are positioned off the zoom group's box, and the blend rings'
+    // WebKit fallback samples pixels at coordinates taken from the panes.
+    // AFTER the slide, not during: measuring mid-transition fits the canvas to
+    // a width the pane is still leaving. The wait is read off the transition
+    // itself rather than written as a number, so it cannot drift from --t, and
+    // it collapses to ~nothing under prefers-reduced-motion, where the rule at
+    // the top of the sheet has already set the duration to zero.
+    clearTimeout(railWait);
+    const ms = (parseFloat(getComputedStyle(stage).transitionDuration) || 0) * 1000;
+    railWait = setTimeout(() => {
+      if (img.naturalWidth){
+        const wasFit = Math.abs(scale - fitScale) < 1e-6;
+        computeFit(); setCanvasZoom(wasFit ? fitScale : scale);
+      }
+      drawStrip(); syncOut(); refreshRings();
+    }, ms + 20);
+  };
+  btn.onclick = () => {
+    const open = app.classList.contains('railoff');   // toggling TO open
+    remember('rail', open ? '1' : '0');
+    apply(open, true);
+  };
+  apply(recall('rail', '1') === '1', false);
+})();
 </script>
 </body>
 </html>