screengraft 0.64.1 → 0.65.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "screengraft",
-  "version": "0.64.1",
+  "version": "0.65.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.65):** 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,7 +149,11 @@
        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;
@@ -222,7 +239,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 +277,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 +348,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 +357,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)}
@@ -452,7 +469,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);
@@ -616,19 +633,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)}
@@ -688,21 +742,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 +952,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)}
@@ -936,7 +1019,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 +1058,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
@@ -1034,7 +1163,7 @@
         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 +1192,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 +1256,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),
@@ -1291,28 +1420,37 @@
            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>
 
@@ -1742,7 +1880,7 @@ const ROTATE_CURSOR = 'url("data:image/svg+xml;utf8,' + encodeURIComponent(
   '<path d="M15.6 2.6l0.4 4.2-4.2 0.3" fill="none" stroke="rgba(0,0,0,.85)" stroke-width="4.2" stroke-linecap="round" stroke-linejoin="round"/>' +
   '<path d="M15.6 2.6l0.4 4.2-4.2 0.3" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>' +
   '</svg>') + '") 11 11, crosshair';
-const QUAD_W = 0.9, QUAD_ACTIVE_W = 1.5, GUIDE_W = 0.9, CASE_PAD = 2.0;
+const QUAD_W = 1, QUAD_ACTIVE_W = 1, GUIDE_W = 1, CASE_PAD = 2.0;   // every line 1px, 14 Sep 2026 — the active edge no longer thickens
 const GUIDE_DASH = [6, 5];
 function cased(c, path, coreW, coreColor, dash){
   c.save();