/*! Snip Studio — rendered UI illustrations for the guides.
    Self-contained: no JS, no images. Mirrors the app's real interface using
    the site's own tokens, so a reader sees the actual UI rather than a
    placeholder. Animations are decorative and disabled under reduced motion. */

.sfg-fig{
  margin:1.9em 0;
  --mac:#f6f6f8; --mac-ink:#1d1d1f; --mac-dim:#6e6e73; --mac-line:#e2e2e7;
  --mac-raise:#fff; --mac-blue:#007AFF;
}
.sfg-fig-frame{
  /* The frame is a dark panel in both themes, so the illustration inside it
     must not inherit light-theme ink — it would come out dark on dark.
     These are the site's own dark-theme values, pinned locally. */
  --ink:#f5f5f7; --ink-2:#a4a4ad; --ink-3:#8e8e99; --ink-4:#7c7c86;
  --glass-4:rgba(255,255,255,.04); --glass-hi:rgba(255,255,255,.14);
  --hair:rgba(255,255,255,.09); --hair-soft:rgba(255,255,255,.06);
  position:relative;overflow:hidden;border-radius:var(--r-20);
  background:linear-gradient(160deg,#17171f,#0d0d13);
  box-shadow:var(--frame-ring),var(--sh-med);
  padding:28px;
  display:flex;align-items:center;justify-content:center;
  min-height:220px;
}
/* the aria-hidden wrapper must carry width, or percentage-sized
   illustrations collapse inside a shrink-to-fit box */
.sfg-fig-frame>div{width:100%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
/* any icon without an explicit size falls back to a sane one */
/* Icons drawn by _svg() carry no intrinsic size, so give them one. The demos
   reused from the landing page size their own SVGs and must be left alone —
   this rule is (0,1,1) and figures.css loads last, so without the :not() it
   silently beat site.css and collapsed every selection outline to 14px. */
.sfg-fig-frame svg:not(.sfg-keep){width:14px;height:14px;flex:none}
.sfg-fsearch svg{width:12px;height:12px;color:#8a8a90}
.sfg-fig figcaption{margin-top:10px;font-size:13px;color:var(--ink-4);line-height:1.5}
@media(max-width:600px){.sfg-fig-frame{padding:16px}}

/* a macOS window ------------------------------------------------------- */
.sfg-fw{
  width:100%;max-width:520px;border-radius:12px;overflow:hidden;
  background:var(--mac);color:var(--mac-ink);text-align:left;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.5);
  font-size:12px;line-height:1.45;
}
.sfg-fw-bar{
  display:flex;align-items:center;gap:8px;height:30px;padding:0 11px;
  background:linear-gradient(#fbfbfd,#f2f2f5);border-bottom:1px solid var(--mac-line);
}
.sfg-fw-dots{display:flex;gap:6px}
.sfg-fw-dots i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.14)}
.sfg-fw-dots i:nth-child(1){background:#ff5f57}
.sfg-fw-dots i:nth-child(2){background:#febc2e}
.sfg-fw-dots i:nth-child(3){background:#28c840}
.sfg-fw-title{font-size:11px;font-weight:600;color:var(--mac-dim);letter-spacing:.01em}
.sfg-fw-body{padding:14px}

/* generic skeleton lines, for "some app content" ----------------------- */
.sfg-sk{display:block;height:7px;border-radius:4px;background:#dcdce3}
.sfg-sk+.sfg-sk{margin-top:7px}
.sfg-sk.sfg-w80{width:80%}.sfg-sk.sfg-w60{width:60%}.sfg-sk.sfg-w40{width:40%}.sfg-sk.sfg-w95{width:95%}
.sfg-sk.sfg-dark{background:rgba(255,255,255,.09)}

/* the HUD -------------------------------------------------------------- */
.sfg-fig-hud{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.sfg-hcircle{
  width:52px;height:52px;border-radius:26px;flex:none;display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(56,56,72,.92),rgba(26,26,36,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 16px 38px rgba(0,0,0,.42);
  border:.6px solid rgba(255,255,255,.16);color:rgba(255,255,255,.96);
}
.sfg-hcircle svg{width:20px;height:20px}
.sfg-hpill{
  height:52px;border-radius:26px;display:flex;align-items:center;gap:4px;padding:0 10px;
  background:linear-gradient(160deg,rgba(56,56,72,.92),rgba(26,26,36,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 16px 38px rgba(0,0,0,.42);
  border:.6px solid rgba(255,255,255,.16);
}
.sfg-htile{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;
  color:rgba(255,255,255,.82);background:rgba(255,255,255,.05);
  border:.6px solid rgba(255,255,255,.07);
}
.sfg-htile svg{width:15px;height:15px}
.sfg-htile.sfg-on{background:#6E63FF;color:#fff;border-color:rgba(255,255,255,.2);
  box-shadow:0 4px 14px rgba(110,99,255,.5)}
.sfg-htile.sfg-rec{color:#FF453A}
.sfg-hdelays{display:flex;gap:6px;flex:none}
.sfg-hd{
  width:34px;height:20px;border-radius:10px;display:grid;place-items:center;
  font-size:10.5px;font-weight:600;color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.08);border:.6px solid rgba(255,255,255,.12);
}
.sfg-hd.sfg-sel{background:#6E63FF;color:#fff}
.sfg-hlabel{width:100%;text-align:center;margin-top:12px;font-size:11.5px;color:var(--ink-4)}

/* capture overlay ------------------------------------------------------ */
.sfg-fig-cap{position:relative;width:100%;max-width:520px;aspect-ratio:16/10;border-radius:12px;
  overflow:hidden;background:linear-gradient(160deg,#1b1b26,#0e0e15);
  box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.sfg-fig-cap .sfg-desk{position:absolute;inset:0;padding:14px;display:grid;gap:9px;
  grid-template-columns:1fr 1fr;grid-auto-rows:1fr}
.sfg-fig-cap .sfg-dwin{position:relative;border-radius:8px;overflow:hidden;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);
  padding:20px 9px 9px}
.sfg-fig-cap .sfg-dwin::before{content:"";position:absolute;left:0;right:0;top:0;height:13px;
  background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.06)}
.sfg-fig-cap .sfg-dwin::after{content:"";position:absolute;left:7px;top:5px;width:4px;height:4px;
  border-radius:50%;background:rgba(255,255,255,.28);
  box-shadow:7px 0 0 rgba(255,255,255,.2),14px 0 0 rgba(255,255,255,.14)}
.sfg-fig-cap .sfg-dim{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.sfg-fig-cap .sfg-sel{position:absolute;border-radius:2px;
  box-shadow:0 0 0 4000px rgba(0,0,0,.5);outline:1.5px dashed rgba(255,255,255,.95);
  outline-offset:-1px}
.sfg-fig-cap .sfg-sel.sfg-ants{animation:figAnts 1.1s linear infinite}
.sfg-fig-cap .sfg-sel.sfg-round{border-radius:12px}
.sfg-fig-cap .sfg-sel.sfg-circ{border-radius:50%;box-shadow:0 0 0 4000px rgba(0,0,0,.5);
  aspect-ratio:1;height:auto}
.sfg-fig-cap .sfg-dims{position:absolute;font-family:var(--mono);font-size:10.5px;font-weight:600;
  color:#fff;background:rgba(0,0,0,.72);padding:2px 7px;border-radius:5px;white-space:nowrap}
.sfg-fig-cap .sfg-cross{position:absolute;pointer-events:none}
.sfg-fig-cap .sfg-cross::before,.sfg-fig-cap .sfg-cross::after{content:"";position:absolute;background:rgba(255,255,255,.55)}
.sfg-fig-cap .sfg-cross::before{left:0;right:0;top:50%;height:1px}
.sfg-fig-cap .sfg-cross::after{top:0;bottom:0;left:50%;width:1px}
.sfg-fig-cap .sfg-winhl{position:absolute;border-radius:8px;background:rgba(0,122,255,.24);
  outline:1.5px solid rgba(0,122,255,.85);outline-offset:-1px}
@keyframes figAnts{to{outline-offset:-5px}}

/* editor tool palette -------------------------------------------------- */
.sfg-ftools{
  display:inline-flex;align-items:center;gap:4px;padding:5px 6px;border-radius:12px;
  background:rgba(252,252,253,.94);border:.6px solid rgba(0,0,0,.07);
  box-shadow:0 10px 30px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.08);
}
.sfg-ftools i{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  color:#3c3c43;background:transparent}
.sfg-ftools i svg{width:14px;height:14px}
.sfg-ftools i.sfg-on{background:var(--mac-blue);color:#fff}
.sfg-ftools .sfg-sep{width:1px;height:16px;background:rgba(0,0,0,.09);margin:0 2px}
.sfg-fdot{width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 1.5px #fff,0 1px 3px rgba(0,0,0,.3)}

/* annotations drawn on a snip ----------------------------------------- */
.sfg-fsnip{position:relative;border-radius:9px;overflow:hidden;background:#12121a;padding:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.4)}
.sfg-fsnip .sfg-metric{font-size:22px;font-weight:650;color:#f5f5f7;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.sfg-fsnip .sfg-up{font-size:11px;color:#30D158;margin-left:6px}
.sfg-fstep{position:absolute;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:#0A84FF;color:#fff;font-size:11px;font-weight:650;
  box-shadow:0 0 0 3px rgba(10,132,255,.28)}
.sfg-farrow{position:absolute;color:#FF3B30;pointer-events:none}
.sfg-farrow svg{width:100%;height:100%;overflow:visible}
.sfg-fspot{position:absolute;border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.5)}
.sfg-fhl{position:absolute;background:rgba(255,204,0,.42);mix-blend-mode:multiply;border-radius:2px}
.sfg-fruler{position:absolute;display:flex;align-items:center;gap:4px;color:#FF3B30;
  font-family:var(--mono);font-size:9.5px;font-weight:600}
.sfg-fruler .sfg-bar{height:1px;background:currentColor;flex:1;position:relative}
.sfg-fruler .sfg-bar::before,.sfg-fruler .sfg-bar::after{content:"";position:absolute;top:-3px;width:1px;height:7px;background:currentColor}
.sfg-fruler .sfg-bar::before{left:0}.sfg-fruler .sfg-bar::after{right:0}
.sfg-fblur{position:absolute;border-radius:3px;backdrop-filter:blur(6px);background:rgba(255,255,255,.06)}
.sfg-fpix{position:absolute;border-radius:3px;
  background-image:linear-gradient(45deg,#5a5a68 25%,transparent 25%,transparent 75%,#5a5a68 75%),
                   linear-gradient(45deg,#5a5a68 25%,#3a3a46 25%,#3a3a46 75%,#5a5a68 75%);
  background-size:8px 8px;background-position:0 0,4px 4px}
.sfg-fblack{position:absolute;border-radius:3px;background:#0b0b11}

/* inspector sidebar ---------------------------------------------------- */
.sfg-finsp{width:186px;flex:none;background:#f7f7f9;border-left:1px solid var(--mac-line);
  padding:12px 12px 14px;font-size:11px}
.sfg-finsp .sfg-eyebrow2{font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#6a6a73;margin-bottom:3px}
.sfg-finsp .sfg-insp-title{font-size:13px;font-weight:650;margin:0 0 9px;color:var(--mac-ink)}
.sfg-finsp .sfg-kv{display:flex;justify-content:space-between;padding:3px 0;color:var(--mac-dim)}
.sfg-finsp .sfg-kv b{color:var(--mac-ink);font-variant-numeric:tabular-nums}
.sfg-frow{display:flex;align-items:center;gap:7px;padding:6px 0;border-top:1px solid #ececf0}
.sfg-frow .sfg-ic{width:16px;height:16px;border-radius:4px;display:grid;place-items:center;flex:none}
.sfg-frow .sfg-ic svg{width:10px;height:10px;color:#fff}
.sfg-frow .sfg-nm{flex:1;color:var(--mac-ink);font-weight:550}
.sfg-frow .sfg-ct{color:#6a6a73;font-variant-numeric:tabular-nums}
.sfg-frow .sfg-msk{font-family:var(--mono);font-size:9.5px;color:#68686f;display:block;margin-top:1px}
.sfg-fbtn{display:block;width:100%;margin-top:10px;padding:7px;border-radius:8px;text-align:center;
  background:var(--mac-blue);color:#fff;font-size:11.5px;font-weight:600}
.sfg-fbtn.sfg-ghost{background:#ececf0;color:#3c3c43}

/* library -------------------------------------------------------------- */
.sfg-flib{display:grid;grid-template-columns:126px 1fr;min-height:212px}
.sfg-flib-side{background:#eff0f3;border-right:1px solid var(--mac-line);padding:10px 8px}
.sfg-flib-side .sfg-gl{font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#6a6a73;margin:8px 0 4px;padding-left:6px}  /* 4.7:1 on #eff0f3 */
.sfg-flib-side .sfg-it{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;
  font-size:11px;color:#3c3c43}
.sfg-flib-side .sfg-it.sfg-on{background:rgba(0,122,255,.13);color:#0a5fd0;font-weight:600}
.sfg-flib-side .sfg-it span{width:13px;height:13px;border-radius:4px;flex:none}
.sfg-flib-main{padding:9px 10px;background:var(--mac)}
.sfg-ftabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px}
.sfg-ftab{font-size:10px;padding:3px 8px;border-radius:980px;color:#6a6a70;background:#ececf0}
.sfg-ftab.sfg-on{background:var(--mac-blue);color:#fff}
.sfg-fsearch{display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:7px;
  background:#fff;border:1px solid #e0e0e6;font-size:11px;color:#3c3c43}
.sfg-fsearch .sfg-hits{margin-left:auto;color:var(--mac-blue);font-weight:600;font-size:10px}
.sfg-fcal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:8px}
.sfg-fcal .sfg-dw{font-size:8px;font-weight:700;letter-spacing:.06em;color:#6a6a73;text-align:center;
  text-transform:uppercase}
.sfg-fcal .sfg-dy{aspect-ratio:1;border-radius:5px;background:#fff;border:1px solid #ececf0;
  font-size:8.5px;color:#6a6a73;padding:2px 0 0 3px;position:relative}
.sfg-fcal .sfg-dy.sfg-has{border-color:rgba(0,122,255,.5);background:rgba(0,122,255,.06)}
.sfg-fcal .sfg-dy .sfg-stk{position:absolute;inset:auto 4px 4px 4px;height:11px;border-radius:3px;background:#2c2c36}
.sfg-fcal .sfg-dy .sfg-bdg{position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:50%;
  background:var(--mac-blue);color:#fff;font-size:7px;display:grid;place-items:center;font-weight:700}

/* export / format chips ------------------------------------------------ */
.sfg-fchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.sfg-fchip{font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:7px;
  background:#ececf0;color:#3c3c43}
.sfg-fchip.sfg-on{background:var(--mac-blue);color:#fff}

/* automation flow ------------------------------------------------------ */
.sfg-fflow{display:grid;gap:8px;width:100%;max-width:460px}
.sfg-fcard{border-radius:10px;background:var(--glass-4);border:1px solid var(--hair);
  box-shadow:inset 0 1px 0 var(--glass-hi);padding:10px 12px}
.sfg-fcard .sfg-fhead{display:flex;align-items:baseline;gap:8px;font-size:11.5px;font-weight:650;
  color:var(--ink);white-space:nowrap}
.sfg-fcard .sfg-fhead .sfg-tg{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4);white-space:nowrap;flex:none}
.sfg-fcard .sfg-ln{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:11px;color:var(--ink-3)}
.sfg-fcard .sfg-ln .sfg-pin{width:5px;height:5px;border-radius:50%;background:var(--purple-2);flex:none}
.sfg-fcard .sfg-ln .sfg-cond{font-family:var(--mono);font-size:10px;color:var(--ink-4)}
.sfg-farr{justify-self:center;color:var(--ink-4);line-height:0}
.sfg-farr svg{width:14px;height:14px}

/* motion editor -------------------------------------------------------- */
.sfg-fmotion{width:100%;max-width:500px}
.sfg-fwave{display:flex;align-items:center;gap:1.5px;height:34px;padding:0 8px;border-radius:7px;
  background:rgba(255,255,255,.05);border:1px solid var(--hair-soft)}
.sfg-fwave i{flex:1;background:var(--purple-2);border-radius:1px;opacity:.75}
.sfg-ftl{position:relative;height:26px;margin-top:7px;border-radius:7px;
  background:rgba(255,255,255,.05);border:1px solid var(--hair-soft)}
.sfg-ftl .sfg-rng{position:absolute;top:0;bottom:0;background:rgba(110,99,255,.22);
  border-left:2px solid var(--purple);border-right:2px solid var(--purple)}
.sfg-ftl .sfg-ph{position:absolute;top:-3px;bottom:-3px;width:2px;background:#fff;border-radius:2px}
.sfg-flane{display:flex;align-items:center;gap:6px;margin-top:6px;height:20px}
.sfg-flane .sfg-lbl{font-size:9px;color:var(--ink-4);width:52px;flex:none}
.sfg-flane .sfg-trk{position:relative;flex:1;height:100%;border-radius:5px;background:rgba(255,255,255,.04)}
.sfg-flane .sfg-chip{position:absolute;top:3px;bottom:3px;border-radius:4px;background:var(--purple);
  opacity:.8}

/* scroll capture ------------------------------------------------------- */
.sfg-fscroll{display:flex;gap:14px;align-items:flex-start;justify-content:center;width:100%}
.sfg-fscroll .sfg-tall{width:112px;border-radius:8px;overflow:hidden;background:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.45);border:1px solid rgba(0,0,0,.4)}
.sfg-fscroll .sfg-tall .sfg-seg{padding:8px;border-bottom:1px dashed rgba(0,122,255,.45)}
.sfg-fscroll .sfg-tall .sfg-seg:last-child{border-bottom:0}
.sfg-fscroll .sfg-cap{font-size:10px;color:var(--ink-4);text-align:center;margin-top:6px}
.sfg-fscroll .sfg-note{align-self:center;max-width:190px;font-size:11.5px;color:var(--ink-3);line-height:1.5}

/* displays ------------------------------------------------------------- */
.sfg-fdisp{display:flex;gap:10px;align-items:flex-end;justify-content:center}
.sfg-fmon{border-radius:7px;background:linear-gradient(160deg,#1e1e2a,#101018);
  border:1px solid rgba(255,255,255,.1);position:relative}
.sfg-fmon::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:-6px;width:34%;height:5px;border-radius:0 0 4px 4px;background:rgba(255,255,255,.13)}
.sfg-fmon.sfg-big{width:172px;height:108px}
.sfg-fmon.sfg-small{width:118px;height:78px}
.sfg-fstitched{border-radius:7px;overflow:hidden;border:1.5px solid var(--purple);
  display:flex;box-shadow:0 0 0 4px rgba(110,99,255,.2)}

/* system settings permission row -------------------------------------- */
.sfg-fperm{width:100%;max-width:440px}
.sfg-fperm .sfg-rw{display:flex;align-items:center;gap:9px;padding:9px 12px;background:#fff;
  border-bottom:1px solid var(--mac-line);font-size:12px;color:var(--mac-ink)}
.sfg-fperm .sfg-rw:last-child{border-bottom:0}
.sfg-fperm .sfg-ap{width:20px;height:20px;border-radius:5px;flex:none;
  background:linear-gradient(160deg,#7b6bff,#5a49f0)}
.sfg-fsw{margin-left:auto;width:34px;height:20px;border-radius:980px;background:#e4e4e9;position:relative;flex:none}
.sfg-fsw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:left .25s var(--snappy)}
.sfg-fsw.sfg-on{background:#30D158}
.sfg-fsw.sfg-on::after{left:16px}

/* countdown ------------------------------------------------------------ */
.sfg-fcount{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:rgba(20,20,28,.82);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 16px 40px rgba(0,0,0,.45);color:#fff;
  font-size:30px;font-weight:650;font-variant-numeric:tabular-nums}

/* open menu ------------------------------------------------------------ */
.sfg-fmenu{position:absolute;border-radius:7px;background:rgba(252,252,253,.97);
  border:.6px solid rgba(0,0,0,.09);box-shadow:0 14px 34px rgba(0,0,0,.3);
  padding:4px;min-width:118px}
.sfg-fmenu .sfg-mi{font-size:10.5px;color:#1d1d1f;padding:4px 8px;border-radius:4px}
.sfg-fmenu .sfg-mi.sfg-on{background:var(--mac-blue);color:#fff}
.sfg-fmenu .sfg-sepm{height:1px;background:rgba(0,0,0,.08);margin:3px 6px}

/* clipboard ------------------------------------------------------------ */
.sfg-fclip{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap}
.sfg-fclip .sfg-arrowr{color:var(--ink-4);line-height:0}
.sfg-fclip .sfg-arrowr svg{width:18px;height:18px}
.sfg-fpaste{width:172px;border-radius:8px;background:#fff;border:1px solid rgba(0,0,0,.35);
  box-shadow:0 12px 28px rgba(0,0,0,.4);padding:9px;font-size:10.5px;color:#1d1d1f}
.sfg-ftext{width:172px;border-radius:8px;background:#fff;border:1px solid rgba(0,0,0,.35);
  box-shadow:0 12px 28px rgba(0,0,0,.4);padding:9px;font-family:var(--mono);font-size:9.5px;
  color:#1d1d1f;line-height:1.5}

/* watermark pill ------------------------------------------------------- */
.sfg-fmark{display:inline-flex;flex-direction:column;gap:1px;padding:7px 11px;border-radius:9px;
  background:rgba(10,10,14,.62);border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.sfg-fmark .sfg-l1{font-size:10.5px;color:rgba(255,255,255,.76)}
.sfg-fmark .sfg-l1 b{color:#fff;font-weight:650}
.sfg-fmark .sfg-l2{font-size:9px;color:var(--purple-2);font-family:var(--mono)}

/* motion / animation --------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .sfg-fig-cap .sfg-sel.sfg-ants{animation:none}
  .sfg-fsw::after{transition:none}
}
@media(max-width:520px){
  .sfg-fw,.sfg-fig-cap,.sfg-fmotion,.sfg-fperm{max-width:100%}
  .sfg-flib{grid-template-columns:100px 1fr}
  .sfg-finsp{width:150px}
}

/* ══════════════════════════════════════════════════════════════════════
   ANIMATION LAYER
   Every illustration plays a short, looping demonstration of the thing the
   surrounding step describes. Motion is slow and eased — nothing flashes.
   All of it is disabled under prefers-reduced-motion, where each figure
   settles into its finished state instead.
   ══════════════════════════════════════════════════════════════════════ */

.sfg-fig-frame{--t:6s}

/* ---- capture: the selection draws itself, then the dimensions appear ---- */
@keyframes sfgDraw{
  0%,4%   {clip-path:inset(0 100% 100% 0);opacity:0}
  10%     {opacity:1}
  38%,92% {clip-path:inset(0 0 0 0);opacity:1}
  100%    {clip-path:inset(0 0 0 0);opacity:1}
}
@keyframes sfgDims{0%,14%{opacity:0;transform:translateY(4px)}24%,92%{opacity:1;transform:none}100%{opacity:1}}
@keyframes sfgCursor{
  0%,4%{transform:translate(-58px,-42px)}
  38%,100%{transform:translate(0,0)}
}
@keyframes sfgAnts{to{outline-offset:-6px}}
@keyframes sfgDimIn{0%,4%{opacity:0}20%,100%{opacity:1}}

.sfg-fig-cap .sfg-sel{animation:sfgDraw var(--t) cubic-bezier(.32,.72,0,1) infinite}
.sfg-fig-cap .sfg-sel.sfg-ants{animation:sfgDraw var(--t) cubic-bezier(.32,.72,0,1) infinite,
                                          sfgAnts 1.2s linear infinite}
.sfg-fig-cap .sfg-dims{animation:sfgDims var(--t) cubic-bezier(.32,.72,0,1) infinite}
.sfg-fig-cap .sfg-cross{animation:sfgCursor var(--t) cubic-bezier(.32,.72,0,1) infinite}
.sfg-fig-cap .sfg-winhl{animation:sfgDimIn var(--t) ease infinite}
.sfg-fig-cap .sfg-fmenu{animation:sfgDimIn var(--t) ease infinite}

/* ---- HUD: the circle charges, then the pill blooms ---- */
@keyframes sfgBloom{
  0%,10%  {transform:scaleX(.06);opacity:0}
  26%     {transform:scaleX(1.02);opacity:1}
  32%,88% {transform:scaleX(1);opacity:1}
  97%,100%{transform:scaleX(.06);opacity:0}
}
@keyframes sfgRing{0%,8%{stroke-dashoffset:100}24%,100%{stroke-dashoffset:0}}
@keyframes sfgTilePop{0%,18%{transform:scale(.6);opacity:0}30%,100%{transform:scale(1);opacity:1}}
@keyframes sfgSelPulse{0%,50%{box-shadow:0 4px 14px rgba(110,99,255,.5)}
                       25%{box-shadow:0 4px 22px rgba(110,99,255,.95)}}
.sfg-hpill{transform-origin:left center;animation:sfgBloom var(--t) cubic-bezier(.32,.72,0,1) infinite}
.sfg-hdelays{animation:sfgBloom var(--t) cubic-bezier(.32,.72,0,1) infinite;animation-delay:.1s}
.sfg-hpill .sfg-htile{animation:sfgTilePop var(--t) cubic-bezier(.34,1.56,.64,1) infinite}
.sfg-htile.sfg-on{animation:sfgTilePop var(--t) cubic-bezier(.34,1.56,.64,1) infinite,
                  sfgSelPulse 2.4s ease-in-out infinite}
.sfg-hpill .sfg-htile:nth-child(1){animation-delay:0s,0s}
.sfg-hpill .sfg-htile:nth-child(2){animation-delay:.03s}
.sfg-hpill .sfg-htile:nth-child(3){animation-delay:.06s}
.sfg-hpill .sfg-htile:nth-child(4){animation-delay:.09s}
.sfg-hpill .sfg-htile:nth-child(5){animation-delay:.12s}
.sfg-hpill .sfg-htile:nth-child(6){animation-delay:.15s}
.sfg-hpill .sfg-htile:nth-child(7){animation-delay:.18s}
.sfg-hpill .sfg-htile:nth-child(8){animation-delay:.21s}
.sfg-hpill .sfg-htile:nth-child(9){animation-delay:.24s}
.sfg-hpill .sfg-htile:nth-child(10){animation-delay:.27s}
.sfg-hd.sfg-sel{animation:sfgSelPulse 2.4s ease-in-out infinite}

/* ---- editor: annotations draw on in sequence ---- */
@keyframes sfgArrowDraw{0%,12%{stroke-dashoffset:180}42%,100%{stroke-dashoffset:0}}
@keyframes sfgPop{0%,26%{transform:scale(0);opacity:0}
                  40%{transform:scale(1.18);opacity:1}
                  50%,100%{transform:scale(1);opacity:1}}
@keyframes sfgWipe{0%,30%{clip-path:inset(0 100% 0 0)}52%,100%{clip-path:inset(0 0 0 0)}}
@keyframes sfgSpot{0%,20%{opacity:0;transform:scale(.72)}
                   40%,100%{opacity:1;transform:scale(1)}}
@keyframes sfgFade{0%,34%{opacity:0}52%,100%{opacity:1}}
.sfg-farrow svg path{stroke-dasharray:180;animation:sfgArrowDraw var(--t) cubic-bezier(.32,.72,0,1) infinite}
.sfg-fstep{animation:sfgPop var(--t) cubic-bezier(.34,1.56,.64,1) infinite}
.sfg-fsnip .sfg-fstep:nth-of-type(2){animation-delay:.5s}
.sfg-fsnip .sfg-fstep:nth-of-type(3){animation-delay:1s}
.sfg-fhl{animation:sfgWipe var(--t) cubic-bezier(.32,.72,0,1) infinite}
.sfg-fspot{animation:sfgSpot var(--t) cubic-bezier(.32,.72,0,1) infinite}
.sfg-fruler{animation:sfgFade var(--t) ease infinite}
.sfg-fblur,.sfg-fpix,.sfg-fblack{animation:sfgWipe var(--t) cubic-bezier(.32,.72,0,1) infinite}
.sfg-fpix{animation-delay:.35s}
.sfg-fblack{animation-delay:.7s}
.sfg-ftools i.sfg-on{animation:sfgSelPulse 2.4s ease-in-out infinite}

/* ---- inspector: rows land one at a time, then the button lights ---- */
@keyframes sfgRow{0%,10%{opacity:0;transform:translateX(9px)}26%,100%{opacity:1;transform:none}}
.sfg-frow{animation:sfgRow var(--t) cubic-bezier(.32,.72,0,1) infinite}
.sfg-finsp .sfg-frow:nth-of-type(1){animation-delay:0s}
.sfg-finsp .sfg-frow:nth-of-type(2){animation-delay:.12s}
.sfg-finsp .sfg-frow:nth-of-type(3){animation-delay:.24s}
.sfg-finsp .sfg-frow:nth-of-type(4){animation-delay:.36s}
.sfg-finsp .sfg-frow:nth-of-type(5){animation-delay:.48s}
.sfg-fbtn{animation:sfgFade var(--t) ease infinite}

/* ---- library: the search types, matching days light up ---- */
@keyframes sfgType{0%,8%{width:0}26%,88%{width:var(--w,52px)}100%{width:var(--w,52px)}}
@keyframes sfgCaret{0%,88%{opacity:1}44%{opacity:0}100%{opacity:1}}
@keyframes sfgDayHit{0%,30%{background:#fff;border-color:#ececf0;transform:scale(1)}
                     44%{transform:scale(1.06)}
                     52%,100%{background:rgba(0,122,255,.08);border-color:rgba(0,122,255,.55);transform:scale(1)}}
@keyframes sfgDayFade{0%,30%{opacity:1}52%,100%{opacity:.28}}
@keyframes sfgStack{0%,34%{opacity:0;transform:translateY(5px)}50%,100%{opacity:1;transform:none}}
@keyframes sfgBadge{0%,40%{opacity:0;transform:scale(.4)}56%{transform:scale(1.2)}64%,100%{opacity:1;transform:scale(1)}}
/* Each library view plays its OWN demonstration, so the same figure never
   animates the same way twice on one page. */
.sfg-fsearch .sfg-q{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom}
.sfg-fsearch .sfg-caret{display:inline-block;width:1px;height:11px;background:#3c3c43;
  vertical-align:-1px}

/* search — the query types itself, the count lands, matching days light up
   and the rest of the month recedes */
.sfg-v-search .sfg-q{animation:sfgType var(--t) steps(9,end) infinite}
.sfg-v-search .sfg-caret{animation:sfgCaret 1s steps(1,end) infinite}
.sfg-v-search .sfg-hits{animation:sfgFade var(--t) ease infinite}
.sfg-v-search .sfg-dy.sfg-has{animation:sfgDayHit var(--t) cubic-bezier(.32,.72,0,1) infinite}
.sfg-v-search .sfg-dy:not(.sfg-has){animation:sfgDayFade var(--t) ease infinite}
.sfg-v-search .sfg-stk{animation:sfgStack var(--t) cubic-bezier(.34,1.56,.64,1) infinite}
.sfg-v-search .sfg-bdg{animation:sfgBadge var(--t) cubic-bezier(.34,1.56,.64,1) infinite}

/* timeline — no typing at all. The month sweeps left to right and each day
   fans out the stack it is holding. */
.sfg-v-timeline .sfg-caret{display:none}
.sfg-v-timeline .sfg-dy{animation:sfgSweep var(--t) ease-out infinite;
  animation-delay:calc(var(--d, 0) * .035s)}
.sfg-v-timeline .sfg-stk{animation:sfgFan var(--t) cubic-bezier(.34,1.56,.64,1) infinite}
.sfg-v-timeline .sfg-bdg{animation:sfgBadge var(--t) cubic-bezier(.34,1.56,.64,1) infinite;
  animation-delay:.5s}

/* ---- automation: the flow runs top to bottom ---- */
@keyframes sfgFlow{0%,8%{opacity:.28;transform:translateY(6px)}
                   22%,92%{opacity:1;transform:none}100%{opacity:1}}
@keyframes sfgArrowBob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(3px);opacity:1}}
.sfg-fcard{animation:sfgFlow var(--t) cubic-bezier(.32,.72,0,1) infinite}
.sfg-fflow .sfg-fcard:nth-of-type(2){animation-delay:.5s}
.sfg-fflow .sfg-fcard:nth-of-type(3){animation-delay:1s}
.sfg-farr{animation:sfgArrowBob 1.8s ease-in-out infinite}

/* ---- motion editor: the playhead sweeps the trimmed range ---- */
@keyframes sfgPlayhead{0%{left:14%}92%{left:78%}100%{left:14%}}
@keyframes sfgWaveBar{0%,100%{transform:scaleY(.82)}50%{transform:scaleY(1)}}
.sfg-ftl .sfg-ph{animation:sfgPlayhead var(--t) linear infinite}
.sfg-fwave i{transform-origin:center;animation:sfgWaveBar 1.6s ease-in-out infinite}
.sfg-flane .sfg-chip{animation:sfgFade var(--t) ease infinite}

/* ---- scroll capture: the page scrolls and seams stitch ---- */
@keyframes sfgScrollUp{0%,6%{transform:translateY(0)}88%,100%{transform:translateY(calc(-100% + 168px))}}
@keyframes sfgSeam{0%,20%{border-bottom-color:rgba(0,122,255,.75)}60%,100%{border-bottom-color:transparent}}
.sfg-fscroll .sfg-tall{max-height:168px;overflow:hidden;position:relative}
.sfg-fscroll .sfg-tall .sfg-inner{animation:sfgScrollUp var(--t) cubic-bezier(.45,0,.55,1) infinite}
.sfg-fscroll .sfg-seg{animation:sfgSeam var(--t) ease infinite}

/* ---- permission toggle flips on ---- */
@keyframes sfgSwitch{0%,34%{background:#e4e4e9}48%,100%{background:#30D158}}
@keyframes sfgKnob{0%,34%{left:2px}48%,100%{left:16px}}
.sfg-fsw.sfg-on{animation:sfgSwitch var(--t) cubic-bezier(.32,.72,0,1) infinite}
.sfg-fsw.sfg-on::after{animation:sfgKnob var(--t) cubic-bezier(.34,1.56,.64,1) infinite}

/* ---- clipboard: the capture travels into the destination ---- */
@keyframes sfgTravel{0%,16%{transform:translateX(0) scale(1);opacity:1}
                     40%{transform:translateX(26px) scale(.94);opacity:.55}
                     52%,100%{transform:translateX(0) scale(1);opacity:1}}
@keyframes sfgLand{0%,40%{opacity:0;transform:translateY(6px)}56%,100%{opacity:1;transform:none}}
.sfg-fclip .sfg-fsnip{animation:sfgTravel var(--t) cubic-bezier(.32,.72,0,1) infinite}
.sfg-fpaste,.sfg-ftext{animation:sfgLand var(--t) cubic-bezier(.32,.72,0,1) infinite}
.sfg-fclip .sfg-arrowr{animation:sfgArrowBob 1.8s ease-in-out infinite}

/* ---- countdown ticks ---- */
@keyframes sfgTick{0%,30%{opacity:1;transform:scale(1)}
                   33%{opacity:0;transform:scale(1.22)}
                   36%,100%{opacity:1;transform:scale(1)}}
.sfg-fcount{animation:sfgTick 3s cubic-bezier(.32,.72,0,1) infinite}

/* ---- displays: the stitch closes ---- */
@keyframes sfgStitch{0%,24%{gap:14px;box-shadow:0 0 0 0 rgba(110,99,255,0)}
                     52%,100%{gap:0;box-shadow:0 0 0 4px rgba(110,99,255,.2)}}
.sfg-fstitched{animation:sfgStitch var(--t) cubic-bezier(.32,.72,0,1) infinite}

/* ---- export: the chosen format settles ---- */
.sfg-fchip.sfg-on{animation:sfgSelPulse 2.4s ease-in-out infinite}

/* ══════════ keycaps — a real key press, not a static chip ══════════ */
.sfg-keys{display:flex;align-items:center;gap:9px;justify-content:center;flex-wrap:wrap}
.sfg-kc{
  position:relative;width:52px;height:52px;border-radius:10px;flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:linear-gradient(180deg,#3a3a44,#26262e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
             inset 0 -2px 0 rgba(0,0,0,.5),
             0 3px 0 #17171d, 0 6px 14px rgba(0,0,0,.5);
  color:#f0f0f4;
  animation:sfgKeyPress var(--t) cubic-bezier(.32,.72,0,1) infinite;
}
.sfg-kc .sfg-sym{font-size:19px;line-height:1;font-weight:520}
.sfg-kc .sfg-klab{font-size:8px;line-height:1;color:#9a9aa4;letter-spacing:.05em}
.sfg-kc.sfg-wide{width:74px}
.sfg-kc-plus{color:var(--ink-4);font-size:15px}
@keyframes sfgKeyPress{
  0%,30%{transform:translateY(0);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
          inset 0 -2px 0 rgba(0,0,0,.5),0 3px 0 #17171d,0 6px 14px rgba(0,0,0,.5)}
  38%,52%{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),
          inset 0 -1px 0 rgba(0,0,0,.4),0 0 0 #17171d,0 2px 6px rgba(0,0,0,.45)}
  62%,100%{transform:translateY(0);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
          inset 0 -2px 0 rgba(0,0,0,.5),0 3px 0 #17171d,0 6px 14px rgba(0,0,0,.5)}
}
.sfg-kc:nth-child(3){animation-delay:.05s}
.sfg-kc:nth-child(5){animation-delay:.1s}
.sfg-kc.sfg-lit{background:linear-gradient(180deg,#7a70ff,#5b4fe6);color:#fff}
.sfg-kc.sfg-lit .sfg-klab{color:rgba(255,255,255,.72)}
.sfg-keycap-note{width:100%;text-align:center;margin-top:14px;font-size:12.5px;color:var(--ink-4)}

/* ══════════ everything settles, nothing moves ══════════ */
@media(prefers-reduced-motion:reduce){
  .sfg-fig-frame *,.sfg-fig-frame *::before,.sfg-fig-frame *::after{
    animation:none !important;transition:none !important;
  }
  .sfg-fig-cap .sfg-sel,.sfg-fig-cap .sfg-dims,.sfg-hpill,.sfg-hdelays,
  .sfg-htile,.sfg-fstep,.sfg-fspot,.sfg-fruler,.sfg-fhl,.sfg-fblur,.sfg-fpix,
  .sfg-fblack,.sfg-frow,.sfg-fbtn,.sfg-fcard,.sfg-fpaste,.sfg-ftext,
  .sfg-fcal .sfg-stk,.sfg-fcal .sfg-bdg,.sfg-flane .sfg-chip,.sfg-fsearch .sfg-hits{
    opacity:1;transform:none;clip-path:none;
  }
  .sfg-fig-cap .sfg-sel{clip-path:inset(0 0 0 0)}
  .sfg-farrow svg path{stroke-dashoffset:0}
  .sfg-fsearch .sfg-q{width:auto}
  .sfg-fscroll .sfg-tall{max-height:none}
  .sfg-fcal .sfg-dy:not(.sfg-has){opacity:.28}
  .sfg-tile,.sfg-tick,.sfg-selcount{opacity:1;transform:none}
  .sfg-v-select .sfg-tile.sfg-picked{border-color:var(--mac-blue)}
  .sfg-ttype{max-width:none}
  .sfg-fshape{clip-path:none}
  .sfg-v-select .sfg-cbox{background:var(--mac-blue);border-color:var(--mac-blue)}
  .sfg-ocrb,.sfg-frame,.sfg-alert,.sfg-fname,.sfg-trimdur,.sfg-fhandle{opacity:1;transform:none}
  .sfg-v-separate .sfg-fname{transform:translateX(-50%)}
  .sfg-szbar i{width:var(--w)}
  .sfg-trimsel{left:26%;right:44%}
  .sfg-handle{left:26%}.sfg-handle.sfg-r{left:auto;right:44%}
  .sfg-head{left:56%}
  .sfg-hp,.sfg-hp-dims,.sfg-hp-dim,.sfg-fig-cap .sfg-cross{opacity:1;transform:none}
  .sfg-hp-dims{transform:translateX(-50%)}
  .sfg-hp-lasso .sfg-draw{opacity:0}
  .sfg-hp-lasso .sfg-antsp{opacity:1}
  .sfg-v-detect .sfg-scrollzone{border-color:#0A84FF;background:rgba(10,132,255,.16)}
  .sfg-v-detect .sfg-zonelbl{opacity:1}
  .sfg-shot,.sfg-recpill{opacity:1;transform:none}
  .sfg-recpill,.sfg-shot-lbl{transform:translateX(-50%)}
  .sfg-m-tiles .sfg-htile,.sfg-m-park,.sfg-m-batch .sfg-fw-body > div:first-child > span,
  .sfg-m-expand .sfg-sel,.sfg-m-snap .sfg-sel,.sfg-m-snap .sfg-dims,.sfg-m-trace .sfg-sel,
  .sfg-m-mask .sfg-fblur{opacity:1;transform:none;filter:none}
  .sfg-m-type .sfg-ftext{max-height:none}
  .sfg-m-load .sfg-tall{opacity:1;filter:none}
  .sfg-m-delays .sfg-hd.sfg-sel{background:#6E63FF}
  .sfg-fsw.sfg-on{background:#30D158}
  .sfg-fsw.sfg-on::after{left:16px}
}

/* ══════════ System Settings — Privacy & Security ══════════ */
.sfg-fperm{max-width:560px}
.sfg-settings-bar{gap:10px}
.sfg-nav-chev{display:flex;gap:2px;color:#b6b6bd;margin-left:4px}
.sfg-nav-chev svg{width:12px;height:12px}
.sfg-settings{display:grid;grid-template-columns:158px 1fr;min-height:224px}
.sfg-sb{background:#ecedf1;border-right:1px solid var(--sfg-mac-line);padding:9px 8px}
.sfg-sb-search{display:flex;align-items:center;gap:5px;padding:4px 7px;border-radius:6px;
  background:rgba(0,0,0,.055);font-size:11px;color:#68686f;margin-bottom:9px}
.sfg-sb-search svg{width:11px;height:11px}
.sfg-sb-it{display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:6px;
  font-size:11.5px;color:#1d1d1f}
.sfg-sb-it.sfg-on{background:var(--mac-blue);color:#fff}
.sfg-sb-ic{width:16px;height:16px;border-radius:4.5px;display:grid;place-items:center;flex:none;
  color:#fff;box-shadow:inset 0 .5px 0 rgba(255,255,255,.3)}
.sfg-sb-ic svg{width:10px;height:10px}
.sfg-pane{padding:14px 16px;background:var(--sfg-mac)}
.sfg-pane-hd{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:#1d1d1f}
.sfg-pane-ic{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;flex:none;
  background:linear-gradient(160deg,#ff6b6b,#e0332f);color:#fff;
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.35)}
.sfg-pane-ic svg{width:11px;height:11px}
.sfg-pane-sub{margin:7px 0 11px;font-size:11px;line-height:1.5;color:#6e6e73;max-width:44ch}
.sfg-rows{border-radius:8px;overflow:hidden;border:1px solid #e0e0e6;background:#fff}
.sfg-rows .sfg-rw{display:flex;align-items:center;gap:9px;padding:8px 11px;
  border-bottom:1px solid #f0f0f4;font-size:12px;color:#1d1d1f;background:#fff}
.sfg-rows .sfg-rw:last-child{border-bottom:0}
.sfg-apn{flex:1}
.sfg-ap{width:21px;height:21px;border-radius:5px;flex:none;position:relative;overflow:hidden;
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.32),0 1px 2px rgba(0,0,0,.16)}
/* the real Snip Studio mark: violet tile, dashed capture frame */
.sfg-ap-snip{background:linear-gradient(158deg,#8b7bff,#5a49f0)}
.sfg-ap-snip::after{content:"";position:absolute;inset:5px;border-radius:2px;
  border:1.4px dashed rgba(255,255,255,.95)}
.sfg-ap-term{background:linear-gradient(160deg,#2c2c34,#101014)}
.sfg-ap-term::after{content:">_";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:8px;color:#c8f7c5}
.sfg-ap-zoom{background:linear-gradient(160deg,#4a9bff,#1a6ff0)}
.sfg-ap-zoom::after{content:"";position:absolute;left:5px;top:7px;width:8px;height:7px;
  border-radius:1.6px;background:#fff}
.sfg-pane-foot{display:flex;gap:5px;margin-top:9px}
.sfg-plus,.sfg-minus{width:20px;height:18px;border-radius:5px;display:grid;place-items:center;
  background:#ececf0;border:1px solid #e0e0e6;font-size:12px;color:#6e6e73;line-height:1}
@media(max-width:560px){
  .sfg-settings{grid-template-columns:1fr}
  .sfg-sb{display:none}
}

/* ══════════ every selection mode, side by side ══════════ */
.sfg-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:480px}
@media(max-width:520px){.sfg-modes{grid-template-columns:repeat(2,1fr)}}
.sfg-mode{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px 12px;
  border-radius:var(--r-14);background:rgba(255,255,255,.04);border:1px solid var(--hair);
  box-shadow:inset 0 1px 0 var(--glass-hi)}
.sfg-mode-art{width:56px;height:40px;position:relative;display:block}
.sfg-mode-art::before{content:"";position:absolute;inset:0;
  outline:1.6px dashed rgba(255,255,255,.85);outline-offset:-1px;
  background:rgba(110,99,255,.13);
  animation:sfgAnts 1.3s linear infinite}
.sfg-m-circ::before{border-radius:50%;inset:1px 9px}
.sfg-m-round::before{border-radius:9px}
.sfg-m-lasso::before{border-radius:46% 54% 38% 62%/54% 40% 60% 46%}
.sfg-m-fixed::before{inset:4px 2px}
.sfg-m-fixed::after{content:"1280×720";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);font-family:var(--mono);font-size:7px;color:#fff;
  background:rgba(0,0,0,.6);padding:1px 4px;border-radius:3px;white-space:nowrap}
.sfg-m-aspect::before{inset:5px 0}
.sfg-m-aspect::after{content:"16:9";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);font-family:var(--mono);font-size:8px;color:#fff;
  background:rgba(0,0,0,.6);padding:1px 4px;border-radius:3px}
.sfg-mode-nm{font-size:12.5px;font-weight:600;color:var(--ink)}
.sfg-mode-k{font-family:var(--mono);font-size:10px;color:var(--ink-4)}
.sfg-fig-cap .sfg-sel.sfg-lasso{border-radius:46% 54% 38% 62%/54% 40% 60% 46%}


/* ══════════ library: grid and multiple selection ══════════ */
.sfg-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.sfg-tile{position:relative;aspect-ratio:4/3;border-radius:6px;background:#20202a;
  border:1.5px solid transparent;padding:7px 6px;display:flex;flex-direction:column;
  gap:4px;justify-content:flex-end;overflow:hidden}
.sfg-tile .sfg-sk{height:4px}
.sfg-tile.sfg-picked{border-color:var(--mac-blue)}
.sfg-tick{position:absolute;top:4px;right:4px;width:14px;height:14px;border-radius:50%;
  background:var(--mac-blue);display:grid;place-items:center}
.sfg-tick svg{width:9px;height:9px;color:#fff}
.sfg-playb{position:absolute;top:4px;left:4px;width:13px;height:13px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.35)}
.sfg-playb::after{content:"";position:absolute;left:5px;top:3.5px;
  border-left:5px solid #fff;border-top:3px solid transparent;border-bottom:3px solid transparent}
.sfg-selbar{display:flex;align-items:center;gap:7px;padding:5px 9px;border-radius:7px;
  background:rgba(0,122,255,.1);border:1px solid rgba(0,122,255,.3);font-size:11px}
.sfg-selcount{font-weight:650;color:#0a5fd0;font-variant-numeric:tabular-nums}
.sfg-selact{margin-left:auto;font-size:10px;color:#3c3c43}
.sfg-selact + .sfg-selact{margin-left:0}
.sfg-selact.sfg-danger{color:#c9302c}

/* select — ticks land one after another and the count catches up */
@keyframes sfgTick{0%,20%{opacity:0;transform:scale(.3)}
  32%{opacity:1;transform:scale(1.25)}40%,100%{opacity:1;transform:scale(1)}}
@keyframes sfgPick{0%,18%{border-color:transparent}30%,100%{border-color:var(--mac-blue)}}
@keyframes sfgCount{0%,34%{opacity:0;transform:translateY(-3px)}46%,100%{opacity:1;transform:none}}
.sfg-v-select .sfg-tile.sfg-picked{animation:sfgPick var(--t) ease infinite;
  animation-delay:calc(var(--i) * .18s)}
.sfg-v-select .sfg-tick{animation:sfgTick var(--t) cubic-bezier(.34,1.56,.64,1) infinite;
  animation-delay:calc(var(--i) * .18s)}
.sfg-v-select .sfg-selcount{animation:sfgCount var(--t) cubic-bezier(.32,.72,0,1) infinite}

/* grid — tiles settle in, staggered, and nothing else moves */
@keyframes sfgSettle{0%,6%{opacity:0;transform:translateY(7px) scale(.97)}
  24%,100%{opacity:1;transform:none}}
.sfg-v-grid .sfg-tile{animation:sfgSettle var(--t) cubic-bezier(.32,.72,0,1) infinite;
  animation-delay:calc(var(--i) * .06s)}

@keyframes sfgSweep{0%,10%{opacity:.25}30%,100%{opacity:1}}
@keyframes sfgFan{0%,30%{opacity:0;transform:translateY(6px) rotate(-6deg)}
  48%{transform:translateY(0) rotate(2deg)}60%,100%{opacity:1;transform:none}}

/* ══════════════════════════════════════════════════════════════════════
   DISTINCT STATES
   Where a guide shows the same part of the app more than once, each
   instance gets its own state and its own motion — so no page ever plays
   the same animation twice.
   ══════════════════════════════════════════════════════════════════════ */

/* editor · text tool — the label types itself onto the capture */
.sfg-ftbox{position:absolute;display:flex;align-items:center;gap:1px;padding:4px 7px;
  border-radius:5px;background:rgba(110,99,255,.16);border:1.5px solid var(--purple-2);
  font-size:11px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden}
.sfg-ttype{display:inline-block;overflow:hidden;white-space:nowrap;
  animation:sfgTypeW var(--t) steps(18,end) infinite}
.sfg-tcaret{display:inline-block;width:1.5px;height:12px;background:#fff;flex:none;
  animation:sfgCaret 1s steps(1,end) infinite}
@keyframes sfgTypeW{0%,10%{max-width:0}40%,100%{max-width:140px}}

/* editor · shape tool — the rectangle is dragged out by its handles */
.sfg-fshape{position:absolute;border:2px solid var(--purple-2);border-radius:4px;
  background:rgba(110,99,255,.09);animation:sfgDrag var(--t) cubic-bezier(.32,.72,0,1) infinite}
.sfg-fhandle{position:absolute;width:7px;height:7px;border-radius:2px;background:#fff;
  border:1.5px solid var(--purple-2);margin:-3px 0 0 -3px;
  animation:sfgFade var(--t) ease infinite}
@keyframes sfgDrag{0%,8%{clip-path:inset(0 100% 100% 0)}38%,100%{clip-path:inset(0 0 0 0)}}

/* inspector · select — the boxes tick down the list, then the button counts */
.sfg-cbox{width:12px;height:12px;border-radius:3px;flex:none;border:1.5px solid #b6b6bd;
  background:#fff;position:relative}
.sfg-v-select .sfg-cbox{animation:sfgCheck var(--t) cubic-bezier(.34,1.56,.64,1) infinite;
  animation-delay:calc(var(--i) * .16s)}
.sfg-v-select .sfg-cbox::after{content:"";position:absolute;left:3px;top:.5px;width:3.5px;
  height:7px;border:solid #fff;border-width:0 1.7px 1.7px 0;transform:rotate(43deg)}
@keyframes sfgCheck{0%,14%{background:#fff;border-color:#b6b6bd}
  30%,100%{background:var(--mac-blue);border-color:var(--mac-blue)}}
.sfg-v-select .sfg-fbtn{animation:sfgFade var(--t) ease infinite;animation-delay:.7s}

/* automation · trigger — the choice settles on one of the two options */
.sfg-fflow .sfg-opt{opacity:.5}
.sfg-fflow .sfg-opt.sfg-on{opacity:1;border-color:var(--purple-2)}
.sfg-v-trigger .sfg-opt.sfg-on{animation:sfgChoose var(--t) cubic-bezier(.32,.72,0,1) infinite}
@keyframes sfgChoose{0%,22%{opacity:.5;border-color:var(--hair)}
  38%,100%{opacity:1;border-color:var(--purple-2)}}
.sfg-hk{margin-left:8px;font-family:var(--mono);font-size:9.5px;padding:1px 5px;
  border-radius:4px;background:rgba(255,255,255,.08);border:1px solid var(--hair-soft)}

/* clipboard · OCR — the recognised blocks appear, then one is picked */
.sfg-ocrlbl{position:absolute;left:8%;top:-2px;font-size:8.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.sfg-v-ocr{padding-top:16px}
.sfg-ocrb{position:absolute;height:12px;border-radius:3px;
  background:rgba(0,122,255,.14);border:1px solid rgba(0,122,255,.45);
  animation:sfgBlock var(--t) ease infinite;animation-delay:calc(var(--i) * .1s)}
.sfg-ocrb.sfg-on{background:rgba(110,99,255,.3);border-color:var(--purple-2);
  animation:sfgPickBlock var(--t) cubic-bezier(.32,.72,0,1) infinite}
@keyframes sfgBlock{0%,8%{opacity:0}26%,100%{opacity:1}}
@keyframes sfgPickBlock{0%,40%{opacity:0;transform:scale(.98)}
  54%{transform:scale(1.03)}62%,100%{opacity:1;transform:scale(1)}}

/* displays · separate — two screens, two filenames landing */
.sfg-fname{position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);
  font-family:var(--mono);font-size:9px;color:var(--ink-3);white-space:nowrap}
.sfg-v-separate{padding-bottom:18px}
.sfg-v-separate .sfg-fmon{position:relative;animation:sfgSplit var(--t) cubic-bezier(.32,.72,0,1) infinite}
.sfg-v-separate .sfg-fmon:nth-of-type(2){animation-delay:.18s}
@keyframes sfgSplit{0%,20%{transform:translateX(0)}44%,100%{transform:translateX(0)}}
.sfg-v-separate .sfg-fname{animation:sfgRise var(--t) cubic-bezier(.32,.72,0,1) infinite}
.sfg-v-separate .sfg-fmon:nth-of-type(2) .sfg-fname{animation-delay:.18s}
@keyframes sfgRise{0%,30%{opacity:0;transform:translate(-50%,5px)}48%,100%{opacity:1;transform:translate(-50%,0)}}

/* scroll · stitch — the frames stack down into one tall image */
.sfg-fstack{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.sfg-frames{display:flex;flex-direction:column;gap:2px;width:190px}
.sfg-frame{border-radius:4px;background:#20202a;border:1px solid var(--hair);
  padding:7px 8px;display:flex;flex-direction:column;gap:4px;
  animation:sfgStackIn var(--t) cubic-bezier(.32,.72,0,1) infinite;
  animation-delay:calc(var(--i) * .12s)}
.sfg-frame .sfg-sk{height:4px}
.sfg-fstack .sfg-note{max-width:260px;text-align:center;font-size:11.5px;line-height:1.5;
  color:var(--ink-3);margin:0}
@keyframes sfgStackIn{0%,6%{opacity:0;transform:translateY(-10px)}
  26%,100%{opacity:1;transform:none}}

/* export · compare — the bars grow to the size each format costs */
.sfg-sizes{display:flex;flex-direction:column;gap:8px}
.sfg-szrow{display:flex;align-items:center;gap:9px;font-size:11px}
.sfg-szname{width:42px;flex:none;color:var(--mac-ink);font-weight:600}
.sfg-szbar{flex:1;height:9px;border-radius:5px;background:#ececf0;overflow:hidden}
.sfg-szbar i{display:block;height:100%;border-radius:5px;background:var(--mac-blue);
  width:var(--w);animation:sfgGrow var(--t) cubic-bezier(.32,.72,0,1) infinite;
  animation-delay:calc(var(--i) * .1s)}
.sfg-szval{width:56px;flex:none;text-align:right;font-family:var(--mono);font-size:10px;
  color:var(--mac-dim);font-variant-numeric:tabular-nums}
@keyframes sfgGrow{0%,8%{width:0}36%,100%{width:var(--w)}}

/* permission · prompt — the alert macOS shows the first time */
.sfg-alert{width:100%;max-width:320px;border-radius:12px;background:var(--mac-raise);
  border:1px solid var(--mac-line);padding:16px 16px 12px;text-align:center;
  box-shadow:0 18px 40px rgba(0,0,0,.4);animation:sfgAlert var(--t) cubic-bezier(.34,1.4,.64,1) infinite}
.sfg-alert-ic{display:grid;place-items:center;width:38px;height:38px;margin:0 auto 9px;
  border-radius:9px;background:#FF3B30;color:#fff}
.sfg-alert-ic svg{width:20px;height:20px}
.sfg-alert-t{font-size:12px;font-weight:650;color:var(--mac-ink);line-height:1.35}
.sfg-alert-b{font-size:11px;color:var(--mac-dim);line-height:1.45;margin-top:6px}
.sfg-alert-btns{display:flex;gap:7px;margin-top:13px}
.sfg-abtn{flex:1;padding:6px;border-radius:7px;font-size:11px;font-weight:600;
  background:#ececf0;color:#3c3c43}
.sfg-abtn.sfg-primary{background:var(--mac-blue);color:#fff}
@keyframes sfgAlert{0%,6%{opacity:0;transform:scale(.94)}20%,100%{opacity:1;transform:scale(1)}}

/* motion · trim — the handles close on the part worth keeping */
.sfg-trim{position:relative;height:26px;margin-top:10px;border-radius:6px;
  background:rgba(255,255,255,.06);border:1px solid var(--hair-soft);overflow:hidden}
.sfg-trimsel{position:absolute;top:0;bottom:0;background:rgba(110,99,255,.26);
  border-left:2px solid var(--purple-2);border-right:2px solid var(--purple-2);
  animation:sfgTrim var(--t) cubic-bezier(.32,.72,0,1) infinite}
.sfg-handle{position:absolute;top:4px;bottom:4px;width:5px;border-radius:3px;
  background:var(--purple-2);animation:sfgTrimL var(--t) cubic-bezier(.32,.72,0,1) infinite}
.sfg-handle.sfg-r{animation-name:sfgTrimR}
.sfg-head{position:absolute;top:0;bottom:0;width:1.5px;background:#fff;
  animation:sfgHead var(--t) linear infinite}
@keyframes sfgTrim{0%,10%{left:0;right:0}46%,100%{left:26%;right:44%}}
@keyframes sfgTrimL{0%,10%{left:0}46%,100%{left:26%}}
@keyframes sfgTrimR{0%,10%{right:0}46%,100%{right:44%}}
@keyframes sfgHead{0%,46%{left:26%}92%,100%{left:56%}}
.sfg-trimlbl{display:flex;justify-content:space-between;margin-top:6px;font-size:10px;
  font-family:var(--mono);color:var(--ink-4)}
.sfg-trimdur{color:var(--purple-2);font-weight:600;animation:sfgFade var(--t) ease infinite}

/* capture · the pointer roams before anything is picked */
.sfg-cross.sfg-roam{animation:sfgRoam var(--t) cubic-bezier(.45,0,.55,1) infinite}
@keyframes sfgRoam{0%{transform:translate(0,0)}25%{transform:translate(-70px,-28px)}
  55%{transform:translate(52px,20px)}80%{transform:translate(-16px,-10px)}100%{transform:translate(0,0)}}

/* capture · the window lifts out of the desktop, shadow-free */
.sfg-lifted{position:absolute;border-radius:8px;background:#1a1a22;
  border:1px solid rgba(255,255,255,.16);padding:10px;display:flex;flex-direction:column;gap:6px;
  animation:sfgLift var(--t) cubic-bezier(.34,1.4,.64,1) infinite}
@keyframes sfgLift{0%,14%{transform:translateY(0) scale(1);box-shadow:none}
  36%,100%{transform:translateY(-6px) scale(1.02);box-shadow:0 16px 34px rgba(0,0,0,.5)}}

/* ══════════════════════════════════════════════════════════════════════
   ALTERNATIVE MOTIONS
   A page that shows one part of the app several times gives each instance
   a different demonstration, so no animation is ever played twice on the
   same page. `motion=` in the shortcode picks which.
   ══════════════════════════════════════════════════════════════════════ */

/* HUD · the mode tiles sweep in one after another, delays sit still */
.sfg-m-tiles{animation:none}
.sfg-m-tiles .sfg-hdelays,.sfg-m-tiles .sfg-hpill{animation:none;opacity:1}
.sfg-m-tiles .sfg-htile{animation:sfgSweepIn var(--t) cubic-bezier(.32,.72,0,1) infinite;
  animation-delay:calc(var(--n, 0) * .07s)}
@keyframes sfgSweepIn{0%,4%{opacity:0;transform:translateX(-10px)}22%,100%{opacity:1;transform:none}}

/* HUD · the delay chips cycle, then settle on the chosen one */
.sfg-m-delays{animation:none}
.sfg-m-delays .sfg-hpill,.sfg-m-delays .sfg-htile{animation:none;opacity:1}
.sfg-m-delays .sfg-hdelays{animation:none;opacity:1}
.sfg-m-delays .sfg-hd{animation:sfgChipCycle var(--t) steps(1,end) infinite}
.sfg-m-delays .sfg-hd:nth-child(2){animation-delay:.5s}
.sfg-m-delays .sfg-hd:nth-child(3){animation-delay:1s}
.sfg-m-delays .sfg-hd.sfg-sel{animation:sfgChipLand var(--t) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes sfgChipCycle{0%,20%{background:rgba(255,255,255,.08)}
  26%,34%{background:rgba(255,255,255,.2)}40%,100%{background:rgba(255,255,255,.08)}}
@keyframes sfgChipLand{0%,44%{background:rgba(255,255,255,.08);transform:scale(1)}
  56%{background:#6E63FF;transform:scale(1.14)}64%,100%{background:#6E63FF;transform:scale(1)}}

/* HUD · parked in a corner, drifting into place */
.sfg-m-park{animation:sfgPark var(--t) cubic-bezier(.32,.72,0,1) infinite}
@keyframes sfgPark{0%,10%{transform:translate(0,26px);opacity:0}
  34%,100%{transform:translate(0,0);opacity:1}}

/* capture · the selection expands from its centre rather than being dragged */
.sfg-fig-cap.sfg-m-expand .sfg-sel.sfg-ants{animation:sfgExpand var(--t) cubic-bezier(.34,1.4,.64,1) infinite,
  sfgAnts 1.1s linear infinite;clip-path:none}
.sfg-fig-cap.sfg-m-expand .sfg-cross{animation:sfgRoam var(--t) cubic-bezier(.45,0,.55,1) infinite}
.sfg-fig-cap.sfg-m-expand .sfg-dims{animation:sfgSnapLbl var(--t) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes sfgExpand{0%,10%{transform:scale(.1);opacity:0}34%{transform:scale(1.04)}
  42%,100%{transform:scale(1);opacity:1}}

/* capture · a fixed size does not get dragged — it snaps */
.sfg-fig-cap.sfg-m-snap .sfg-sel.sfg-ants{animation:sfgSnap var(--t) cubic-bezier(.22,1.4,.36,1) infinite,
  sfgAnts 1.1s linear infinite;clip-path:none}
.sfg-fig-cap.sfg-m-snap .sfg-dims{animation:sfgSnapLbl var(--t) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes sfgSnap{0%,16%{opacity:0;transform:scale(.86)}
  30%{opacity:1;transform:scale(1.05)}38%,100%{opacity:1;transform:scale(1)}}
@keyframes sfgSnapLbl{0%,30%{opacity:0;transform:scale(.8)}42%,100%{opacity:1;transform:scale(1)}}

/* capture · a freehand shape is traced, not dragged */
.sfg-fig-cap.sfg-m-trace .sfg-sel.sfg-ants{animation:sfgTrace var(--t) cubic-bezier(.45,0,.55,1) infinite,
  sfgAnts 1.1s linear infinite;clip-path:none}
.sfg-fig-cap.sfg-m-trace .sfg-cross{animation:none;opacity:0}
@keyframes sfgTrace{0%,8%{opacity:0;transform:rotate(-6deg) scale(.9)}
  30%{opacity:1;transform:rotate(2deg) scale(1.02)}44%,100%{opacity:1;transform:rotate(0) scale(1)}}

/* export · the unselected chips cycle, then the chosen one lands.
   The selected chip is excluded — it carries white text, so animating its
   background to grey would make the label vanish. */
.sfg-m-chips .sfg-fchip:not(.sfg-on){animation:sfgChipTry var(--t) steps(1,end) infinite}
.sfg-m-chips .sfg-fchip:not(.sfg-on):nth-child(2){animation-delay:.35s}
.sfg-m-chips .sfg-fchip:not(.sfg-on):nth-child(3){animation-delay:.7s}
.sfg-m-chips .sfg-fchip:not(.sfg-on):nth-child(4){animation-delay:1.05s}
.sfg-m-chips .sfg-fchip.sfg-on{animation:sfgChipChosen var(--t) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes sfgChipTry{0%,16%{background:#ececf0}22%,30%{background:#d6d6de}36%,100%{background:#ececf0}}
@keyframes sfgChipChosen{0%,40%{transform:scale(1)}52%{transform:scale(1.12)}60%,100%{transform:scale(1)}}

/* export · a batch — the thumbnails land, then the button */
.sfg-m-batch .sfg-fw-body > div:first-child > span{
  animation:sfgLandIn var(--t) cubic-bezier(.34,1.4,.64,1) infinite;
  animation-delay:calc(var(--i, 0) * .1s)}
.sfg-m-batch .sfg-fbtn{animation:sfgFade var(--t) ease infinite;animation-delay:.9s}
@keyframes sfgLandIn{0%,8%{opacity:0;transform:translateY(-8px) scale(.94)}
  28%,100%{opacity:1;transform:none}}

/* clipboard · the text arrives line by line instead of the image travelling */
.sfg-m-type .sfg-fsnip{animation:none}
.sfg-m-type .sfg-ftext{animation:sfgLines var(--t) steps(3,end) infinite;overflow:hidden}
@keyframes sfgLines{0%,10%{max-height:0}40%,100%{max-height:70px}}

/* clipboard · the mask lands before anything leaves */
.sfg-m-mask .sfg-fblur{animation:sfgMask var(--t) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes sfgMask{0%,18%{opacity:0;transform:scaleX(.2)}
  34%{transform:scaleX(1.04)}42%,100%{opacity:1;transform:scaleX(1)}}

/* scroll · the page loads before it is captured */
.sfg-m-load .sfg-tall{animation:sfgLoad var(--t) cubic-bezier(.32,.72,0,1) infinite}
@keyframes sfgLoad{0%,12%{opacity:.25;filter:blur(2px)}32%,100%{opacity:1;filter:none}}
.sfg-m-load .sfg-inner{animation:none}

/* ══════════════════════════════════════════════════════════════════════
   SELECTIONS — ported from the landing page
   Same SVG outline, same 1.5px white stroke, same 6/4 dash, same 1s ant
   cycle. The landing page drives its phases from JS with `forwards`; a
   guide figure has no JS, so the grow / hold / fade is folded into one
   infinite keyframe instead. Visually identical, and it loops on its own.
   ══════════════════════════════════════════════════════════════════════ */

.sfg-hp-dim{position:absolute;inset:0;background:rgba(0,0,0,.42);border-radius:inherit;
  animation:sfgDimCycle var(--t) var(--sfg-smooth) infinite}
@keyframes sfgDimCycle{0%,2%{opacity:0}14%,88%{opacity:1}96%,100%{opacity:0}}

.sfg-fig-cap{--sfg-snappy:cubic-bezier(.32,.72,0,1);--sfg-smooth:cubic-bezier(.4,0,.2,1)}
.sfg-hp{position:absolute;opacity:0}
.sfg-hp>svg{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);
  overflow:visible}
.sfg-mants *{fill:none;stroke:#fff;stroke-width:1.5;stroke-dasharray:6 4;
  vector-effect:non-scaling-stroke;animation:sfgAnts 1s linear infinite}
@keyframes sfgAnts{to{stroke-dashoffset:-20}}

.sfg-hp-dims{position:absolute;top:-27px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:10.5px;color:#fff;background:rgba(10,10,14,.85);
  border:1px solid rgba(255,255,255,.14);padding:3px 8px;border-radius:6px;
  font-variant-numeric:tabular-nums;opacity:0;
  animation:sfgDimsCycle var(--t) ease infinite}
@keyframes sfgDimsCycle{0%,20%{opacity:0}26%,88%{opacity:1}94%,100%{opacity:0}}

/* rectangle, rounded, circle — the shape grows in, holds, fades */
@keyframes sfgHpGrow{0%,2%{opacity:0;transform:scale(.22)}
  18%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
.sfg-hp-rect,.sfg-hp-round,.sfg-hp-circ{animation:sfgHpGrow var(--t) var(--sfg-snappy) infinite}

/* freehand — the outline traces itself, then hands over to the ants */
.sfg-hp-lasso path{fill:none;stroke:rgba(255,255,255,.9);stroke-linecap:round;stroke-linejoin:round}
.sfg-hp-lasso .sfg-draw{stroke-width:1.7;stroke-dasharray:100;stroke-dashoffset:100;
  animation:sfgLassoDraw var(--t) var(--sfg-smooth) infinite,
            sfgLassoOut var(--t) linear infinite}
.sfg-hp-lasso .sfg-antsp{stroke-width:1.5;stroke-dasharray:6 4;opacity:0;
  animation:sfgAnts 1s linear infinite,sfgAntspIn var(--t) linear infinite}
.sfg-hp-lasso{animation:sfgLassoHold var(--t) ease infinite}
@keyframes sfgLassoDraw{0%,3%{stroke-dashoffset:100}20%,100%{stroke-dashoffset:0}}
@keyframes sfgLassoOut{0%,20%{opacity:1}25%,100%{opacity:0}}
@keyframes sfgAntspIn{0%,20%{opacity:0}25%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes sfgLassoHold{0%,2%{opacity:0}8%,88%{opacity:1}96%,100%{opacity:0}}

/* fixed size does not get dragged — it lands at its size */
.sfg-m-snap .sfg-hp{animation:sfgHpFix var(--t) cubic-bezier(.22,1.4,.36,1) infinite}
@keyframes sfgHpFix{0%,6%{opacity:0;transform:scale(1.15)}
  16%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}

/* the pointer roams, then settles at the corner it released */
.sfg-fig-cap .sfg-cross{animation:sfgCrossCycle var(--t) var(--sfg-snappy) infinite}
@keyframes sfgCrossCycle{0%,2%{opacity:0;transform:translate(-38px,-30px)}
  18%,86%{opacity:1;transform:translate(0,0)}94%,100%{opacity:0;transform:translate(0,0)}}


/* ══════════════════════════════════════════════════════════════════════
   ANCHORED ANNOTATIONS
   The arrow and the ruler used to be placed by percentage, so they drifted
   off the things they were pointing at as the figure got wider. They now
   hang off the actual content instead.
   ══════════════════════════════════════════════════════════════════════ */
.sfg-metric-row{margin:8px 0 6px}
.sfg-metric-wrap{position:relative;display:inline-block}
/* the arrow's head is its top-right corner, so mirror it and sit to the
   right of the metric — the head then lands on the metric itself */
/* mirrored, so the head lands on the metric; the body runs down-and-right
   where there is room, never up through the window chrome */
.sfg-metric-wrap .sfg-farrow{left:100%;top:45%;width:84px;height:38px;
  margin-left:-8px;transform:scaleX(-1)}
.sfg-metric-wrap .sfg-farrow svg{width:100%;height:100%;overflow:visible}
.sfg-measured{position:relative;display:block;padding-bottom:20px}
.sfg-measured .sfg-fruler{position:absolute;left:0;top:calc(100% - 16px);width:60%;
  right:auto;bottom:auto}
@media(max-width:520px){
  .sfg-metric-wrap .sfg-farrow{width:64px;height:36px}
}

/* scroll detect — the region highlight is part of the window now */
.sfg-desk-one{grid-template-columns:1fr}
.sfg-dwin-tall{grid-column:1/-1}
.sfg-scrollzone{position:relative;display:block;margin-top:7px;padding:9px 8px 10px;
  border-radius:7px;border:1.5px solid #0A84FF;background:rgba(10,132,255,.16)}
.sfg-scrollzone .sfg-sk{margin-bottom:5px}
.sfg-zonelbl{position:absolute;left:8px;top:-10px;font-family:var(--mono);font-size:9.5px;
  color:#fff;background:rgba(10,10,14,.9);border:1px solid rgba(255,255,255,.16);
  padding:2px 6px;border-radius:5px;white-space:nowrap}
.sfg-v-detect .sfg-scrollzone{animation:sfgZone var(--t) var(--sfg-snappy) infinite}
.sfg-v-detect .sfg-zonelbl{animation:sfgDimsCycle var(--t) ease infinite}
@keyframes sfgZone{0%,6%{border-color:rgba(10,132,255,0);background:rgba(10,132,255,0)}
  22%,88%{border-color:#0A84FF;background:rgba(10,132,255,.16)}
  96%,100%{border-color:rgba(10,132,255,0);background:rgba(10,132,255,0)}}


/* step markers ride their own row, so they never land on the text */
.sfg-snip-doc .sfg-row{position:relative;display:block;margin-top:9px}
/* the two row markers sit at different x as well as different y, so short
   rows cannot stack them on top of each other */
.sfg-snip-doc .sfg-row .sfg-fstep{position:absolute;right:6px;top:50%;transform:translateY(-50%)}
.sfg-snip-doc .sfg-measured .sfg-fstep{right:auto;left:64%}
.sfg-metric-wrap .sfg-fstep{position:absolute;left:100%;top:50%;
  transform:translateY(-50%);margin-left:8px}
.sfg-snip-doc .sfg-fhl{position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:64%;height:14px}
@media(max-width:520px){
  .sfg-metric-wrap .sfg-farrow{width:58px;height:28px}
}

/* ══════════════════════════════════════════════════════════════════════
   SHAPED RECORDING — a recording does not have to be a rectangle
   ══════════════════════════════════════════════════════════════════════ */
.sfg-shots{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;align-items:flex-start;width:100%}
.sfg-shot{position:relative;width:132px;aspect-ratio:1;flex:none}
.sfg-checker{position:absolute;inset:0;border-radius:8px;
  background-image:linear-gradient(45deg,rgba(255,255,255,.07) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.07) 75%),
    linear-gradient(45deg,rgba(255,255,255,.07) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.07) 75%);
  background-size:12px 12px;background-position:0 0,6px 6px}
.sfg-shot-clip{position:absolute;inset:4%;display:flex;flex-direction:column;justify-content:center;
  gap:7px;padding:0 16px;background:linear-gradient(160deg,#2a2a38,#15151e);overflow:hidden}
.sfg-shot-circ{border-radius:50%}
.sfg-shot-lasso{border-radius:46% 54% 38% 62%/54% 40% 60% 46%}
.sfg-shot>svg{position:absolute;inset:4%;width:92%;height:92%;overflow:visible}
.sfg-shot .sfg-antsp{fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.5;stroke-dasharray:6 4;
  stroke-linecap:round;stroke-linejoin:round;animation:sfgAnts 1s linear infinite}
.sfg-recpill{position:absolute;left:50%;top:-11px;transform:translateX(-50%);
  font-family:var(--mono);font-size:9px;font-weight:700;color:#fff;
  background:rgba(255,59,48,.92);padding:2px 7px;border-radius:5px;white-space:nowrap;
  animation:sfgRecBlink 1.6s steps(1,end) infinite}
@keyframes sfgRecBlink{0%,60%{opacity:1}61%,100%{opacity:.45}}
.sfg-shot-lbl{position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);
  font-size:11px;color:var(--ink-3);white-space:nowrap}
.sfg-shots .sfg-note{width:100%;margin:26px 0 0;text-align:center;font-size:11.5px;
  line-height:1.5;color:var(--ink-3)}
/* the shape breathes so it reads as live, not a still */
.sfg-shot{animation:sfgShotIn var(--t) var(--sfg-snappy,cubic-bezier(.32,.72,0,1)) infinite}
.sfg-shots .sfg-shot:nth-child(2){animation-delay:.35s}
@keyframes sfgShotIn{0%,4%{opacity:0;transform:scale(.9)}18%,90%{opacity:1;transform:scale(1)}
  98%,100%{opacity:0;transform:scale(1)}}

/* ══════════════════════════════════════════════════════════════════════
   The capture figures ARE the landing page's demo — same markup, same
   rules in site.css. Only the size and the reduced-motion resting state
   are set here; nothing below re-implements the animation.
   ══════════════════════════════════════════════════════════════════════ */
.sfg-capdemo{width:100%;max-width:460px;margin:0 auto}
@media(prefers-reduced-motion:reduce){
  /* no JS replay, so show each phase already resolved */
  .sfg-capdemo .cap-sel,.sfg-capdemo .cap-ph{opacity:1;animation:none}
  .sfg-capdemo .cap-dims{opacity:1}
  .sfg-capdemo .cap-mode-chip{opacity:1}
  .sfg-capdemo .cap-lasso .draw{opacity:0;animation:none}
  .sfg-capdemo .cap-lasso .antsp{opacity:1;animation:none}
  .sfg-capdemo[data-phase="rect"] .cap-sel{left:24%;top:26%;width:46%;height:44%}
}

.sfg-recdemo{width:100%;max-width:520px;margin:0 auto}

/* The crosshair and the magnifier belong to every dragged shape, not just the
   rectangle — site.css only wires them to [data-phase="rect"] because that is
   the only phase the homepage shows them on. Same keyframe timing and the same
   fade; only the end point changes, to each shape's own bottom-right corner.
   .cap-ell is left:35% top:14% width:33% square -> right 68%, bottom 58%
   .cap-lasso is left:28% top:22% width:48% height:54% -> right 76%, bottom 76% */
@keyframes sfgCrossVEll{0%{left:50%}100%{left:68%}}
@keyframes sfgCrossHEll{0%{top:50%}100%{top:58%}}
@keyframes sfgLoupeEll{0%{opacity:0;left:50%;top:50%}12%{opacity:1}100%{opacity:1;left:68%;top:58%}}
@keyframes sfgCrossVLas{0%{left:50%}100%{left:76%}}
@keyframes sfgCrossHLas{0%{top:50%}100%{top:76%}}
@keyframes sfgLoupeLas{0%{opacity:0;left:50%;top:50%}12%{opacity:1}100%{opacity:1;left:76%;top:76%}}

.sfg-capdemo[data-phase="circle"] .cap-cross.v{opacity:1;
  animation:sfgCrossVEll 1.1s var(--snappy) .15s both,crossFade .4s ease 1.6s forwards}
.sfg-capdemo[data-phase="circle"] .cap-cross.h{opacity:1;
  animation:sfgCrossHEll 1.1s var(--snappy) .15s both,crossFade .4s ease 1.6s forwards}
.sfg-capdemo[data-phase="circle"] .cap-loupe{
  animation:sfgLoupeEll 1.1s var(--snappy) .15s both,crossFade .4s ease 1.6s forwards}

.sfg-capdemo[data-phase="lasso"] .cap-cross.v{opacity:1;
  animation:sfgCrossVLas 1.2s var(--smooth) .2s both,crossFade .4s ease 1.9s forwards}
.sfg-capdemo[data-phase="lasso"] .cap-cross.h{opacity:1;
  animation:sfgCrossHLas 1.2s var(--smooth) .2s both,crossFade .4s ease 1.9s forwards}
.sfg-capdemo[data-phase="lasso"] .cap-loupe{
  animation:sfgLoupeLas 1.2s var(--smooth) .2s both,crossFade .4s ease 1.9s forwards}

/* The dashed outline must NOT be there before the trace reaches it. site.css
   reveals it with `transition:opacity .2s 1.3s`, which fires once when the
   phase attribute is first seen and then stays on — so on a looping figure it
   sat there pre-drawn. An animation instead, because restart() resets those. */
.sfg-capdemo[data-phase="lasso"] .cap-lasso .antsp{
  opacity:0;transition:none;
  animation:ants 1s linear infinite,sfgAntspReveal 2.5s linear both}
@keyframes sfgAntspReveal{0%,48%{opacity:0}54%,100%{opacity:1}}
/* and the traced line itself starts from nothing on every replay */
.sfg-capdemo[data-phase="lasso"] .cap-lasso .draw{
  animation:lassoDraw 1s var(--smooth) .2s both,lassoOut .2s linear 1.3s both}