/* Snapskie Light website. The page opens on a frozen, dimmed screen with one area
   selected (the capture overlay); below it, a light page in the Daylight look.
   Tool icons, keys, marks and the arrowhead follow the design and the app. */
:root {
  --ground: #F6F7FB;
  --surface: #FFFFFF;
  --ink: #15172B;
  --ink-2: #54586E;
  --ink-3: #8A8EA3;
  --hair: #E3E6EE;
  --blue: #2E7BFF;
  --mark-red: #E5484D;
  --mark-blue: #3F7FE3;
  --hl-yellow: #F7DC6F;
  --hud: rgba(28, 28, 30, .92);
  --canvas: #17181C;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 1120px;
  --ease: cubic-bezier(.22, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 17px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); }
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

kbd {
  display: inline-grid; place-items: center;
  min-width: 26px; height: 26px; padding: 0 6px; margin-right: 3px;
  font: 600 13px/1 var(--font); color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hair); border-bottom-width: 2px; border-radius: 6px;
  vertical-align: middle;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 22px;
  border: 0; border-radius: 10px; cursor: pointer;
  font: 600 16px/1 var(--font); text-decoration: none;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:active { transform: scale(.98); }
.btn-light { background: #fff; color: var(--ink); box-shadow: 0 6px 18px rgba(6, 18, 46, .25); }
.btn-light:hover { background: #F2F3F8; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #262A45; }
.btn-large { height: 50px; padding: 0 28px; font-size: 17px; }

/* ---------- Nav (on the dark hero) ---------- */
.nav {
  position: absolute; z-index: 10; inset: 0 0 auto 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 600; }
.brand img { border-radius: 7px; }
.nav nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); }
.nav nav a { color: rgba(255, 255, 255, .78); text-decoration: none; font-size: 15px; }
.nav nav a:hover { color: #fff; }
.nav .nav-cta { color: var(--ink); background: #fff; padding: 7px 14px; border-radius: 999px; }
.nav .nav-cta:hover { color: var(--ink); background: #F2F3F8; }
@media (max-width: 640px) { .nav nav a:not(.nav-cta) { display: none; } }

/* ---------- Hero: the capture overlay (the first design, not interactive) ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px var(--gutter) 88px;
  color: #fff;
}
.desk {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 55% at 78% 22%, rgba(242, 170, 203, .55), transparent 70%),
    linear-gradient(135deg, #6B4FE0 0%, #2E64F0 62%, #1F4FCF 100%);
}
.win {
  position: absolute; border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 60px rgba(6, 18, 46, .25);
}
.win::before { content: ""; position: absolute; inset: 0 0 auto; height: 28px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.win-a { width: 46vw; height: 54vh; left: -6vw; top: 14vh; }
.win-b { width: 34vw; height: 40vh; right: -4vw; top: 8vh; }
.win-c { width: 40vw; height: 34vh; right: 8vw; bottom: -10vh; }

.selection {
  position: relative;
  width: min(var(--measure), 100%);
  margin-left: auto; margin-right: auto;
  border-radius: 18px;
  box-shadow:
    0 0 0 2px #fff,
    0 0 22px 2px rgba(255, 255, 255, .35),
    0 0 0 200vmax rgba(8, 10, 30, .58);
  animation: freeze .9s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes freeze {
  from { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0 22px 2px rgba(255, 255, 255, 0), 0 0 0 200vmax rgba(8, 10, 30, 0); }
}
.hero-copy { padding: clamp(28px, 6vw, 72px); }
.hero h1 { font-size: clamp(44px, 8.4vw, 108px); line-height: .98; letter-spacing: -.04em; max-width: 11ch; text-wrap: balance; }
.lede { margin-top: clamp(18px, 2.4vw, 28px); max-width: 34em; font-size: clamp(17px, 1.6vw, 20px); color: rgba(255, 255, 255, .92); }
.hero-actions { margin-top: clamp(24px, 3.4vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.req { font-size: 15px; color: rgba(255, 255, 255, .8); }
.readout {
  position: absolute; left: 0; top: -40px;
  padding: 5px 10px; border-radius: 7px;
  background: rgba(28, 28, 30, .86);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18);
  font: 500 13px/1.2 var(--font); font-variant-numeric: tabular-nums;
  color: #F5F5F7;
  animation: appear .4s .6s both;
}
.handle {
  position: absolute; right: -15px; bottom: -15px;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 14px rgba(6, 18, 46, .45);
  animation: appear .4s .7s both;
}
@keyframes appear { from { opacity: 0; transform: scale(.6); } }

/* ---------- Layout ---------- */
.feature, .section {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(40px, 5.5vw, 72px) var(--gutter) 0;
}
.feature { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; }
.feature-text p, .quick-text p { margin-top: 14px; font-size: 17px; color: var(--ink-2); max-width: 28em; }
.feature-text kbd { min-width: 24px; height: 24px; font-size: 12px; }
@media (max-width: 880px) { .feature { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- Stages ----------
   Every size inside a stage is in cqw, so a scene scales as one picture. */
.stage {
  position: relative; container-type: inline-size;
  aspect-ratio: 16 / 10;
  border-radius: clamp(14px, 1.8vw, 22px);
  overflow: hidden;
}
.stage-desk { background: linear-gradient(180deg, #F1F3F9, #E6EAF3); box-shadow: inset 0 0 0 1px var(--hair); }
.stage-dark { background: radial-gradient(90% 80% at 50% 40%, #202127, var(--canvas)); }
.scene { position: absolute; inset: 0; transition: opacity .45s ease; }
.is-out .scene { opacity: 0; }
.is-resetting, .is-resetting * { transition: none !important; animation: none !important; }

/* Mock windows and content */
.mwin {
  position: absolute; background: #fff; overflow: hidden;
  border-radius: 1.2cqw;
  box-shadow: 0 0 0 1px rgba(27, 34, 80, .07), 0 .3cqw .8cqw rgba(27, 34, 80, .05), 0 2.4cqw 5cqw rgba(27, 34, 80, .10);
}
.mwin::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3.4cqw;
  border-bottom: 1px solid #EEF0F5;
  background:
    radial-gradient(circle at 2cqw 50%, #E1E4EB .5cqw, transparent .55cqw),
    radial-gradient(circle at 3.6cqw 50%, #E1E4EB .5cqw, transparent .55cqw),
    radial-gradient(circle at 5.2cqw 50%, #E1E4EB .5cqw, transparent .55cqw);
}
.bar { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: 1cqw; border-radius: .5cqw; background: #E3E6EE; }
.bar.strong { height: 1.5cqw; background: #2A2F4A; }
.bar.dim { background: #C9CDDA; }
.btn-mock { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: .6cqw; background: var(--mark-blue); }
.chart {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  display: flex; align-items: flex-end; gap: 6%; padding: 6% 8%;
  border-radius: .8cqw; background: #EEF2FC;
}
.chart.soft { background: #F4F5F9; }
.chart i { flex: 1; height: var(--h); border-radius: .3cqw .3cqw 0 0; background: #A9C1F3; }
.chart.soft i { background: #D5DAE6; }
.chart i.hi, .mini-chart i.hi { background: var(--mark-blue); }

.mini-chart { position: absolute; inset: 18% 14% 16%; display: flex; align-items: flex-end; gap: 8%; }
.mini-chart i { flex: 1; border-radius: .2cqw .2cqw 0 0; background: #A9C1F3; }
.mini-chart i:nth-child(1) { height: 40%; } .mini-chart i:nth-child(2) { height: 66%; }
.mini-chart i:nth-child(3) { height: 52%; } .mini-chart i:nth-child(4) { height: 92%; }
.mini-chart i:nth-child(5) { height: 60%; }
.mbar { position: absolute; left: 12%; top: var(--y); width: var(--w); height: 9%; border-radius: .3cqw; background: #DCDFE8; }
.mbtn { position: absolute; left: 14%; right: 14%; top: 39%; height: 22%; border-radius: .5cqw; background: var(--mark-blue); }
.layer { position: absolute; inset: 0; transition: opacity .3s ease; }

/* The tray, as designed: header (Tray, count, pin, minimise, •••), batch row with
   Current, wide previews with app, time and status, footer with selection and actions. */
.mtray {
  position: absolute; width: 26cqw; height: 52.5cqw; overflow: hidden;
  background: #1E1F23; border-radius: 1.6cqw;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 2.4cqw 5cqw rgba(27, 34, 80, .22);
  color: #F5F5F7; font-size: 1.15cqw;
}
.tr-head {
  position: absolute; left: 0; right: 0; top: 0; height: 4.2cqw;
  display: flex; align-items: center; gap: .6cqw; padding: 0 1.2cqw 0 1.6cqw;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.tr-title { font-weight: 600; font-size: 1.25cqw; }
.tr-n { flex: 1; font-weight: 500; color: #98989D; }
.tr-icons { display: flex; align-items: center; gap: .9cqw; color: #C7C7CC; }
.tr-icons svg, .chev, .st svg, .fbtns svg {
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.tr-icons svg { width: 1.9cqw; height: 1.9cqw; padding: .25cqw; border-radius: .45cqw; transition: background-color .2s ease; }
.dots { font-size: .95cqw; letter-spacing: .06em; }
.mtray-batch {
  position: absolute; left: .8cqw; right: .8cqw; top: 4.8cqw; height: 2.8cqw;
  display: flex; align-items: center; gap: .5cqw; padding: 0 .7cqw 0 .5cqw;
  border-radius: .6cqw; font-weight: 600; white-space: nowrap;
  transition: background-color .2s ease;
}
.chev { width: 1.1cqw; height: 1.1cqw; color: #98989D; flex: none; }
.bname { position: relative; }
.bcount { font-weight: 500; color: #98989D; }
.cur { font-style: normal; font-size: .9cqw; font-weight: 600; padding: .05cqw .4cqw; border-radius: .4cqw; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.more { margin-left: auto; font-size: .95cqw; letter-spacing: .06em; color: #C7C7CC; padding: .1cqw .3cqw; border-radius: .4cqw; transition: background-color .2s ease; }
.item { position: absolute; left: 1.6cqw; width: 22.8cqw; height: 11.2cqw; transition: opacity .25s ease; }
.mtray .th1 { top: 8.4cqw; } .mtray .th2 { top: 20cqw; } .mtray .th3 { top: 31.6cqw; }
.mthumb {
  position: relative; height: 8.6cqw; border-radius: .7cqw; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
  transition: box-shadow .2s ease;
}
.cap { display: flex; justify-content: space-between; margin-top: .45cqw; font-size: 1.02cqw; color: #C7C7CC; white-space: nowrap; }
.cap b { color: #F5F5F7; font-weight: 600; margin-right: .25cqw; }
.st { display: inline-flex; align-items: center; gap: .35cqw; }
.st .dot { width: .4cqw; height: .4cqw; border-radius: 50%; background: #F5F5F7; }
.st svg { width: 1.05cqw; height: 1.05cqw; }
.tr-foot {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4.6cqw;
  display: flex; align-items: center; justify-content: space-between; padding: 0 1.1cqw 0 1.6cqw;
  border-top: 1px solid rgba(255, 255, 255, .08); color: #98989D;
}
.fbtns { display: flex; gap: .55cqw; }
.fbtns i { display: grid; place-items: center; width: 2.5cqw; height: 2.5cqw; border-radius: .6cqw; background: rgba(255, 255, 255, .1); color: #E5E5EA; }
.fbtns svg { width: 1.25cqw; height: 1.25cqw; }
.current .mthumb, .sel .mthumb { box-shadow: 0 0 0 .2cqw #fff; }

/* Thumbnail and capture contents (as on the design boards) */
.tc { position: absolute; inset: 0; }
.tc-chart { background: #EEF2FC; }
.tc-chart .mini-chart { inset: 16% 26% 12%; }
.tc-doc { background: #fff; }
.tc-doc i { position: absolute; border-radius: 99px; }
.tc-doc .d-top { left: 0; right: 0; top: 0; height: 14%; border-radius: 0; background: #EEF0F4; }
.tc-doc .d-h { left: 8%; top: 28%; width: 52%; height: 8%; background: #2A2F4A; }
.tc-doc .d-l { left: 8%; top: var(--y); width: var(--w); height: 6%; background: #D7DAE3; }
.tc-card { background: #2B2D33; }
.tc-card i { position: absolute; }
.tc-card .c-rect { left: 14%; top: 18%; width: 30%; height: 44%; border-radius: 6%; background: #3B3E47; }
.tc-card .c-dot { left: 56%; top: 16%; height: 52%; aspect-ratio: 1; border-radius: 50%; background: #C98B5A; }
.tc-card .c-bar { left: 20%; top: 72%; width: 46%; height: 13%; border-radius: 3px; background: #4C6FD0; }

.pointer {
  position: absolute; left: 0; top: 0; z-index: 6;
  width: 2.6cqw; height: 2.6cqw;
  translate: -24% -14%;
  fill: #111; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round;
  filter: drop-shadow(0 .15cqw .3cqw rgba(0, 0, 0, .25));
  transition: left .8s var(--ease), top .8s var(--ease), opacity .3s ease;
}
@keyframes click { 50% { scale: .82; } }
@keyframes dbl { 25%, 75% { scale: .82; } 50% { scale: 1; } }
.crosshair {
  position: absolute; left: 40cqw; top: 34cqw; z-index: 5; width: 2.8cqw; height: 2.8cqw;
  translate: -50% -50%; opacity: 0;
  background:
    linear-gradient(#15172B, #15172B) center / 1.5px 100% no-repeat,
    linear-gradient(#15172B, #15172B) center / 100% 1.5px no-repeat;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
  transition: left .8s var(--ease), top .8s var(--ease), opacity .25s ease;
}
.flash { position: absolute; inset: 0; z-index: 7; background: #fff; opacity: 0; pointer-events: none; }
@keyframes flash-a { 25% { opacity: .75; } }
@keyframes flash-b { 25% { opacity: .75; } }

/* Overlay selection: 1 pt dark inside, 2 pt white outside, the screen dimmed around it. */
.msel {
  position: absolute; z-index: 4; width: 0; height: 0; opacity: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), 0 0 0 .16cqw #fff, 0 0 0 200cqw rgba(8, 10, 14, .5);
  transition: width 1.2s var(--ease), height 1.2s var(--ease), opacity .3s ease;
}

/* Key chips under a scene (captions, not app UI) */
.keys { position: absolute; z-index: 8; left: 50%; bottom: 2.4cqw; translate: -50% 0; display: grid; }
.keys > span {
  grid-area: 1 / 1; justify-self: center;
  display: inline-flex; align-items: center; gap: .5cqw; white-space: nowrap;
  padding: .7cqw 1.1cqw; border-radius: 1cqw;
  background: rgba(255, 255, 255, .96); box-shadow: 0 .8cqw 2.4cqw rgba(8, 10, 30, .25);
  font-size: 1.35cqw; font-weight: 600; color: var(--ink);
  opacity: 0; transform: translateY(.6cqw); transition: opacity .3s ease, transform .3s var(--ease);
}
.keys kbd { min-width: 2.6cqw; height: 2.6cqw; padding: 0 .6cqw; margin: 0; font-size: 1.3cqw; border-radius: .5cqw; }

/* The review tool bar, as designed: 36 pt buttons, key letter in the corner */
.toolbar {
  position: absolute; z-index: 3; left: 2.4cqw; top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; gap: .4cqw; padding: .6cqw;
  border-radius: 1.4cqw; background: var(--hud);
  box-shadow: 0 1cqw 3.4cqw rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.tool {
  position: relative; display: grid; place-items: center;
  width: 3.6cqw; height: 3.6cqw; border-radius: .9cqw;
  color: #C7C7CC; transition: background-color .2s ease, color .2s ease;
}
.tool svg { width: 1.7cqw; height: 1.7cqw; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tool b { position: absolute; right: .3cqw; bottom: .2cqw; font-size: .85cqw; font-weight: 600; line-height: 1; color: #98989D; transition: color .2s ease; }
.tool.on { background: #F5F5F7; color: #1C1C1E; }
.tool.on b { color: #55555A; }

/* Captures in review */
.capture {
  position: absolute; background: #fff; overflow: hidden;
  border-radius: .8cqw;
  box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .04);
}
.cap-top { position: absolute; inset: 0 0 auto; height: 5cqw; background: #F7F8FB; border-bottom: 1px solid #ECEEF3; }
.cap-top i { position: absolute; left: 4cqw; top: 2cqw; width: 14cqw; height: 1.2cqw; border-radius: .6cqw; background: #D7DAE3; }
.u {
  position: absolute;
  left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw);
  width: calc(var(--w) * 1cqw); height: calc(var(--h, 1) * 1cqw);
  border-radius: .5cqw; background: #E3E6EE;
}
.u.strong { background: #2A2F4A; }
.u.dim { background: #C9CDDA; }
.u.field { background: #fff; box-shadow: inset 0 0 0 1px #DDE0E8; border-radius: .6cqw; }
.u.card { background: #fff; box-shadow: inset 0 0 0 1px #E6E8EF; border-radius: .9cqw; }
.u.rule { height: 1px; border-radius: 0; background: #E6E8EF; }
.u.btn-mock { background: var(--mark-blue); border-radius: .6cqw; }

/* The app's arrow (Standard look, classic head): a round-capped shaft that stops
   2.97 line widths before the tip, inside the designed head. */
.arrow {
  --w: .34cqw;
  position: absolute; display: block; width: 0; height: var(--w); opacity: 0;
  transform-origin: 0 50%;
  filter: drop-shadow(0 .07cqw .1cqw rgba(0, 0, 0, .16));
  transition: width .8s var(--ease), opacity .1s ease;
}
.arrow .shaft { position: absolute; left: 0; top: 0; height: 100%; width: max(0px, calc(100% - 2.97 * var(--w))); border-radius: 99px; background: var(--mark-red); }
.arrow .head { position: absolute; right: 0; top: 50%; width: calc(4.6 * var(--w)); height: calc(5.2 * var(--w)); translate: 0 -50%; fill: var(--mark-red); }

/* ---------- Scene: capture into the tray ---------- */
.cap-win { left: 4cqw; top: 5cqw; width: 62cqw; height: 52.5cqw; }
.cap-tray { left: 70cqw; top: 5cqw; width: 26cqw; height: 52.5cqw; opacity: 0; transform: translateX(3cqw); transition: opacity .4s ease, transform .5s var(--ease); }
.cap-tray .item { opacity: 0; }
.cap-tray .count-n::after { content: "1"; }
.cap-tray .count-b::after { content: "1 capture"; }
.fly {
  position: absolute; z-index: 6; left: 7.1cqw; top: 19.5cqw; width: 27.3cqw; height: 20.3cqw;
  border-radius: .3cqw; background: #fff; overflow: hidden; opacity: 0;
  box-shadow: 0 1.5cqw 4cqw rgba(8, 10, 30, .35);
  transition: left .75s var(--ease), top .75s var(--ease), width .75s var(--ease), height .75s var(--ease), border-radius .75s ease, opacity .2s ease;
}
.fly .f2 { opacity: 0; }

.sc-capture.is-keys1 .k-short { opacity: 1; transform: none; }
.sc-capture.is-dim1 .k-short { opacity: 0; }
.sc-capture.is-dim1 .msel { opacity: 1; left: 7.1cqw; top: 19.5cqw; }
.sc-capture.is-dim1 .crosshair { opacity: 1; }
.sc-capture.is-aim1 .crosshair { left: 7.1cqw; top: 19.5cqw; }
.sc-capture.is-draw1 .msel { width: 27.3cqw; height: 20.3cqw; transition: width .9s var(--ease), height .9s var(--ease), opacity .3s ease; }
.sc-capture.is-draw1 .crosshair { left: 34.4cqw; top: 39.8cqw; transition-duration: .9s; }
.sc-capture.is-shot1 .flash { animation: flash-a .45s ease-out; }
.sc-capture.is-shot1 .msel, .sc-capture.is-shot1 .crosshair { opacity: 0; }
.sc-capture.is-shot1 .fly { opacity: 1; }
.sc-capture.is-fly1 .fly { left: 71.6cqw; top: 13.4cqw; width: 22.8cqw; height: 8.6cqw; border-radius: .7cqw; }
.sc-capture.is-fly1 .cap-tray { opacity: 1; transform: none; }
.sc-capture.is-rest1 .fly { opacity: 0; }
.sc-capture.is-rest1 .th1 { opacity: 1; }

.sc-capture.is-keys2 .k-short { opacity: 1; transform: none; }
.sc-capture.is-dim2 .k-short { opacity: 0; }
.sc-capture.is-dim2 .msel { opacity: 1; left: 35.6cqw; top: 21cqw; width: 0; height: 0; transition: opacity .3s ease; }
.sc-capture.is-dim2 .crosshair { opacity: 1; left: 48cqw; top: 40cqw; transition: opacity .25s ease; }
.sc-capture.is-aim2 .crosshair { left: 35.6cqw; top: 21cqw; transition: left .5s var(--ease), top .5s var(--ease), opacity .25s ease; }
.sc-capture.is-draw2 .msel { width: 26.7cqw; height: 12cqw; transition: width .9s var(--ease), height .9s var(--ease), opacity .3s ease; }
.sc-capture.is-draw2 .crosshair { left: 62.3cqw; top: 33cqw; transition: left .9s var(--ease), top .9s var(--ease), opacity .25s ease; }
.sc-capture.is-shot2 .flash { animation: flash-b .45s ease-out; }
.sc-capture.is-shot2 .msel, .sc-capture.is-shot2 .crosshair { opacity: 0; }
.sc-capture.is-shot2 .fly { opacity: 1; left: 35.6cqw; top: 21cqw; width: 26.7cqw; height: 12cqw; border-radius: .3cqw; transition: opacity .15s ease; }
.sc-capture.is-shot2 .fly .f1 { opacity: 0; }
.sc-capture.is-shot2 .fly .f2 { opacity: 1; }
.sc-capture.is-fly2 .fly { left: 71.6cqw; top: 25cqw; width: 22.8cqw; height: 8.6cqw; border-radius: .7cqw; transition: left .75s var(--ease), top .75s var(--ease), width .75s var(--ease), height .75s var(--ease), border-radius .75s ease, opacity .2s ease; }
.sc-capture.is-fly2 .count-n::after { content: "2"; }
.sc-capture.is-fly2 .count-b::after { content: "2 captures"; }
.sc-capture.is-hold .fly { opacity: 0; }
.sc-capture.is-hold .th2 { opacity: 1; }

/* ---------- Scene: adjust with Option ---------- */
.adj-win { left: 4cqw; top: 5cqw; width: 92cqw; height: 52.5cqw; }
.sc-adjust .msel { left: 20cqw; top: 16cqw; }
.hd {
  position: absolute; width: .85cqw; height: .85cqw; translate: -50% -50%;
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55);
  opacity: 0; transition: opacity .2s ease;
}
.h-nw { left: 0; top: 0; } .h-n { left: 50%; top: 0; } .h-ne { left: 100%; top: 0; } .h-e { left: 100%; top: 50%; }
.h-se { left: 100%; top: 100%; } .h-s { left: 50%; top: 100%; } .h-sw { left: 0; top: 100%; } .h-w { left: 0; top: 50%; }
.p-adj { left: 50cqw; top: 38cqw; opacity: 0; }

.sc-adjust.is-dim .msel { opacity: 1; }
.sc-adjust.is-dim .crosshair { opacity: 1; }
.sc-adjust.is-aim .crosshair { left: 20cqw; top: 16cqw; transition-duration: .7s; }
.sc-adjust.is-draw .msel { width: 30cqw; height: 22cqw; }
.sc-adjust.is-draw .crosshair { left: 50cqw; top: 38cqw; transition-duration: 1.2s; }
.sc-adjust.is-draw .k-opt { opacity: 1; transform: none; transition-delay: .5s; }
.sc-adjust.is-release .k-opt { opacity: 0; transform: none; transition-delay: 0s; }
.sc-adjust.is-release .hd { opacity: 1; }
.sc-adjust.is-release .crosshair { opacity: 0; }
.sc-adjust.is-release .p-adj { opacity: 1; transition: opacity .2s ease; }
.sc-adjust.is-aimR .p-adj { left: 50cqw; top: 27cqw; transition: left .6s var(--ease), top .6s var(--ease); }
.sc-adjust.is-resize .msel { width: 40cqw; transition: width 1s var(--ease); }
.sc-adjust.is-resize .p-adj { left: 60cqw; top: 27cqw; transition: left 1s var(--ease), top 1s var(--ease); }
.sc-adjust.is-aimM .p-adj { left: 38cqw; top: 26cqw; transition: left .5s var(--ease), top .5s var(--ease); }
.sc-adjust.is-move .msel { left: 25cqw; top: 21cqw; transition: left .9s var(--ease), top .9s var(--ease); }
.sc-adjust.is-move .p-adj { left: 43cqw; top: 31cqw; transition: left .9s var(--ease), top .9s var(--ease); }
.sc-adjust.is-enter .k-enter { opacity: 1; transform: none; }
.sc-adjust.is-shot .flash { animation: flash-a .45s ease-out; }
.sc-adjust.is-shot .msel, .sc-adjust.is-shot .hd, .sc-adjust.is-shot .k-enter { opacity: 0; }

/* ---------- Scene: batches (rename, reorder) ---------- */
.tidy-win { left: 4cqw; top: 8cqw; width: 26cqw; height: 46cqw; }
.tidy-tray { left: 37cqw; top: 5cqw; }
.tidy-tray .cur { display: none; }
.tidy-tray .item { transition: top .5s var(--ease) .2s, transform .25s var(--ease); }
.tidy-tray .bname { display: inline-block; min-width: 4cqw; padding: .1cqw .4cqw; margin-left: -.4cqw; border-radius: .35cqw; transition: box-shadow .2s ease, background-color .2s ease; }
.bname .old { border-radius: .2cqw; transition: background-color .2s ease, opacity .1s ease; }
.bname .new { position: absolute; left: .4cqw; top: .1cqw; clip-path: inset(0 100% 0 0); transition: clip-path 1.2s steps(16, end); }
.bname .caret { display: none; }
.menu {
  position: absolute; z-index: 5; left: 47.6cqw; top: 12.4cqw; width: 15cqw;
  display: flex; flex-direction: column; padding: .5cqw; border-radius: .9cqw;
  background: #2A2B31; box-shadow: 0 1.4cqw 4cqw rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .08);
  color: #F5F5F7; font-size: 1.3cqw;
  opacity: 0; transform: translateY(-.5cqw) scale(.97); transform-origin: top right;
  transition: opacity .2s ease, transform .25s var(--ease);
}
.mi { padding: .5cqw .8cqw; border-radius: .5cqw; transition: background-color .15s ease; }
.p-tidy { left: 78cqw; top: 52cqw; }

.sc-tidy.is-aimMenu .p-tidy { left: 60.2cqw; top: 11.3cqw; }
.sc-tidy.is-menu .more { background: rgba(255, 255, 255, .14); }
.sc-tidy.is-menu .menu { opacity: 1; transform: none; }
.sc-tidy.is-menu .p-tidy { animation: click .25s ease; }
.sc-tidy.is-aimRen .p-tidy { left: 53cqw; top: 14.6cqw; transition-duration: .45s; }
.sc-tidy.is-aimRen .mi-ren { background: var(--blue); }
.sc-tidy.is-edit .p-tidy { animation: none; left: 72cqw; top: 22cqw; }
.sc-tidy.is-edit .menu { opacity: 0; }
.sc-tidy.is-edit .more { background: transparent; }
.sc-tidy.is-edit .bname { box-shadow: 0 0 0 .2cqw var(--blue); background: rgba(255, 255, 255, .06); }
.sc-tidy.is-edit .old { background: rgba(46, 123, 255, .55); }
.sc-tidy.is-type .old { position: absolute; opacity: 0; }
.sc-tidy.is-type .new { position: relative; left: auto; top: auto; }
.sc-tidy.is-type .new { clip-path: inset(0 0 0 0); }
.sc-tidy.is-done .bname { box-shadow: none; background: transparent; }
.sc-tidy.is-aimTh .p-tidy { left: 50cqw; top: 40.9cqw; transition-duration: .8s; }
.sc-tidy.is-lift .th3 { transform: scale(1.04); z-index: 2; }
.sc-tidy.is-lift .th3 .mthumb { box-shadow: 0 0 0 .2cqw #fff, 0 1.6cqw 4cqw rgba(0, 0, 0, .5); }
.sc-tidy.is-dragTh .th3 { top: 8.4cqw; transition: top 1.1s var(--ease), transform .25s var(--ease); }
.sc-tidy.is-dragTh .th1 { top: 20cqw; }
.sc-tidy.is-dragTh .th2 { top: 31.6cqw; }
.sc-tidy.is-dragTh .p-tidy { left: 50cqw; top: 17.7cqw; transition-duration: 1.1s; }
.sc-tidy.is-dropTh .th3 { transform: none; }
.sc-tidy.is-dropTh .th3 .mthumb { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.sc-tidy.is-dropTh .p-tidy { left: 76cqw; top: 50cqw; }

/* ---------- Scene: tray minimised, docked in the notch ---------- */
.menubar { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 2.6cqw; background: rgba(255, 255, 255, .7); box-shadow: inset 0 -1px 0 rgba(27, 34, 80, .06); }
.notch { position: absolute; z-index: 6; left: 44cqw; top: 0; width: 12cqw; height: 2.6cqw; background: #000; border-radius: 0 0 1cqw 1cqw; }
.dock-win { left: 4cqw; top: 6cqw; width: 58cqw; height: 50cqw; }
.targets .tg { position: absolute; z-index: 2; border-radius: 1cqw; border: 1.5px dashed rgba(27, 34, 80, .25); background: rgba(255, 255, 255, .25); opacity: 0; transition: opacity .25s ease, border-color .25s ease, background-color .25s ease; }
.tg-l { left: 1cqw; top: 6cqw; width: 6cqw; height: 50cqw; }
.tg-r { right: 1cqw; top: 6cqw; width: 6cqw; height: 50cqw; }
.tg-b { left: 30cqw; bottom: 1cqw; width: 40cqw; height: 6cqw; }
.tg-n { left: 35cqw; top: 0; width: 30cqw; height: 8.5cqw; border-top: 0; border-radius: 0 0 1.6cqw 1.6cqw; }

.dtray {
  position: absolute; z-index: 4; left: 70cqw; top: 4cqw; width: 26cqw; height: 52.5cqw;
  border-radius: 1.6cqw; background: #1E1F23; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 2.4cqw 5cqw rgba(27, 34, 80, .22);
  color: #F5F5F7; font-size: 1.15cqw;
  transition: left .7s var(--ease), top .7s var(--ease), width .7s var(--ease), height .7s var(--ease), border-radius .7s ease, background-color .4s ease, box-shadow .3s ease;
}
.dtray .layer { transition: opacity .3s ease; }
.dt-mini, .dt-notch { opacity: 0; }
.dt-expand { width: 1.5cqw; height: 1.5cqw; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dt-expand { position: absolute; left: 1.95cqw; top: 1.4cqw; color: #C7C7CC; }
.dt-count { position: absolute; left: 0; right: 0; top: 3.4cqw; text-align: center; font-weight: 600; }
.tile { position: absolute; width: 3.8cqw; height: 2.6cqw; border-radius: .35cqw; background: #fff; }
.tile.tl1, .tile.tn1 { background: linear-gradient(#A9C1F3, #A9C1F3) 30% 75% / 14% 45% no-repeat, linear-gradient(var(--mark-blue), var(--mark-blue)) 60% 75% / 14% 65% no-repeat, #fff; }
.tile.tl2, .tile.tn2 { background: linear-gradient(#DCDFE8, #DCDFE8) 30% 30% / 50% 14% no-repeat, linear-gradient(#DCDFE8, #DCDFE8) 30% 65% / 40% 14% no-repeat, #fff; }
.tile.tl3, .tile.tn3 { background: radial-gradient(circle at 68% 42%, #C98B5A 0 22%, transparent 23%), linear-gradient(#4C6FD0, #4C6FD0) 30% 80% / 40% 14% no-repeat, #2B2D33; }
.tl1, .tl2, .tl3 { left: .8cqw; } .tl1 { top: 6.2cqw; } .tl2 { top: 9.4cqw; } .tl3 { top: 12.6cqw; }
.dt-chip { position: absolute; left: 2.6cqw; top: 4.1cqw; font-weight: 600; }
.tn1, .tn2, .tn3 { top: 3.6cqw; } .tn1 { left: 5.6cqw; } .tn2 { left: 10.2cqw; } .tn3 { left: 14.8cqw; }
.p-dock { left: 60cqw; top: 48cqw; }

.sc-dock.is-aimMin .p-dock { left: 91.4cqw; top: 6.3cqw; transition-duration: .85s; }
.sc-dock.is-min .ic-collapse { background: rgba(255, 255, 255, .16); }
.sc-dock.is-min .p-dock { animation: click .25s ease; left: 84cqw; top: 22cqw; transition-delay: .3s; }
.sc-dock.is-min .dtray { left: 90.2cqw; top: 12cqw; width: 5.4cqw; height: 16.4cqw; transition-delay: .2s; }
.sc-dock.is-min .dt-full { opacity: 0; }
.sc-dock.is-min .dt-mini { opacity: 1; transition-delay: .45s; }
.sc-dock.is-min .k-min { opacity: 1; transform: none; }
.sc-dock.is-aimDock .k-min { opacity: 0; }
.sc-dock.is-aimDock .p-dock { left: 92.9cqw; top: 16.4cqw; transition-delay: 0s; animation: none; }
.sc-dock.is-grab .dtray { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 3cqw 7cqw rgba(27, 34, 80, .35); }
.sc-dock.is-grab .tg { opacity: 1; }
.sc-dock.is-drag .dtray { left: 47.3cqw; top: 3.5cqw; transition-duration: 1s; transition-delay: 0s; }
.sc-dock.is-drag .p-dock { left: 50cqw; top: 7.9cqw; transition-duration: 1s; }
.sc-dock.is-drag .tg-n { border-color: var(--blue); background: rgba(46, 123, 255, .14); }
.sc-dock.is-drop .tg { opacity: 0; }
.sc-dock.is-drop .dtray { left: 35cqw; top: 0; width: 30cqw; height: 8.5cqw; border-radius: 0 0 1.6cqw 1.6cqw; background: #000; transition: left .6s cubic-bezier(.34, 1.3, .5, 1), top .6s ease, width .6s cubic-bezier(.34, 1.3, .5, 1), height .6s cubic-bezier(.34, 1.3, .5, 1), border-radius .5s ease, background-color .3s ease, box-shadow .3s ease; }
.sc-dock.is-drop .dt-mini { opacity: 0; transition-delay: 0s; }
.sc-dock.is-drop .dt-notch { opacity: 1; transition-delay: .3s; }
.sc-dock.is-leave .p-dock { left: 62cqw; top: 40cqw; transition-duration: .9s; }
.sc-dock.is-leave .dtray { left: 44cqw; width: 12cqw; height: 2.6cqw; border-radius: 0 0 1cqw 1cqw; transition: left .45s var(--ease) .35s, width .45s var(--ease) .35s, height .45s var(--ease) .35s, border-radius .45s ease .35s, background-color .3s ease; }
.sc-dock.is-leave .dt-notch { opacity: 0; transition-delay: .2s; }
.sc-dock.is-leave .k-notch { opacity: 1; transform: none; transition-delay: .6s; }
.sc-dock.is-rise .p-dock { left: 50cqw; top: 1.4cqw; transition-duration: .7s; }
.sc-dock.is-rise .dtray { left: 35cqw; width: 30cqw; height: 8.5cqw; border-radius: 0 0 1.6cqw 1.6cqw; transition: left .6s cubic-bezier(.34, 1.3, .5, 1) .6s, width .6s cubic-bezier(.34, 1.3, .5, 1) .6s, height .6s cubic-bezier(.34, 1.3, .5, 1) .6s, border-radius .5s ease .6s, background-color .3s ease; }
.sc-dock.is-rise .dt-notch { opacity: 1; transition-delay: .9s; }
.sc-dock.is-hold .k-notch { opacity: 0; }

/* ---------- Scene: tray to review ---------- */
.rv-win { left: 4cqw; top: 5cqw; width: 62cqw; height: 52.5cqw; }
.rv-tray { left: 70cqw; top: 5cqw; width: 26cqw; height: 52.5cqw; z-index: 3; }
.rv-dim { position: absolute; inset: 0; z-index: 2; background: rgba(16, 17, 21, .9); opacity: 0; transition: opacity .5s ease; }
.rv-tools { opacity: 0; transition: opacity .4s ease .25s; }
.rv-top, .rv-zoom {
  position: absolute; z-index: 3; top: 2.2cqw;
  display: flex; align-items: center; gap: 1cqw;
  height: 3.6cqw; padding: 0 1.2cqw; border-radius: 1cqw;
  background: var(--hud); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  color: #F5F5F7; font-size: 1.15cqw; white-space: nowrap;
  opacity: 0; transition: opacity .4s ease .25s;
}
.rv-top { left: 9cqw; }
.rv-top .nav-arrows { color: #C7C7CC; letter-spacing: .5cqw; }
.rv-top .fname { color: #98989D; }
.rv-zoom { left: 55cqw; gap: .5cqw; }
.rv-zoom svg { width: 1.1cqw; height: 1.1cqw; fill: none; stroke: #C7C7CC; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rv-cap {
  position: absolute; z-index: 3; left: 71.6cqw; top: 25cqw; width: 22.8cqw; height: 8.6cqw;
  border-radius: .8cqw; background: #fff; overflow: hidden; opacity: 0;
  box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, .45);
  transition: left .8s var(--ease), top .8s var(--ease), width .8s var(--ease), height .8s var(--ease), opacity .12s ease;
}
.p-rv { left: 40cqw; top: 50cqw; }

.sc-review.is-aim .p-rv { left: 83cqw; top: 29.3cqw; transition-duration: .85s; }
.sc-review.is-select .rv-tray .th2 .mthumb { box-shadow: 0 0 0 .2cqw #fff; }
.sc-review.is-select .p-rv { animation: click .25s ease; }
.sc-review.is-open .p-rv { animation: dbl .4s ease; }
.sc-review.is-open .rv-dim, .sc-review.is-open .rv-tools, .sc-review.is-open .rv-top, .sc-review.is-open .rv-zoom { opacity: 1; }
.sc-review.is-open .rv-cap { opacity: 1; left: 14cqw; top: 8.5cqw; width: 52cqw; height: 32.5cqw; }

/* ---------- Scene: mark ---------- */
.mark-cap { left: 15cqw; top: 5cqw; width: 70cqw; height: 52.5cqw; }
.m-rect {
  position: absolute; left: 41cqw; top: 28.2cqw; width: 0; height: 0; opacity: 0;
  border: .34cqw solid var(--mark-red); border-radius: .3cqw;
  filter: drop-shadow(0 .07cqw .1cqw rgba(0, 0, 0, .16));
  transition: width 1s var(--ease), height 1s var(--ease), opacity .15s ease;
}
.m-arrow { left: 41cqw; top: calc(45.6cqw - .17cqw); rotate: -48.4deg; }
.m-text {
  position: absolute; left: 31cqw; top: 46.4cqw;
  font-size: 1.9cqw; font-weight: 600; line-height: 1.2; white-space: nowrap; color: var(--mark-red);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s steps(20, end);
}
.m-hl {
  position: absolute; left: 3.4cqw; top: 24.5cqw; width: 0; height: 2cqw;
  border-radius: .3cqw; background: var(--hl-yellow); mix-blend-mode: multiply; opacity: .95;
  transition: width .7s var(--ease);
}
.p-mark { left: 70cqw; top: 58cqw; }

.sc-mark.is-pick .p-mark { left: 56cqw; top: 33.2cqw; transition-duration: .45s; }
.sc-mark.is-rect .m-rect { opacity: 1; width: 24cqw; height: 4.4cqw; }
.sc-mark.is-rect .p-mark { left: 80cqw; top: 37.6cqw; transition-duration: 1s; }
.sc-mark.is-aimA .p-mark { left: 56cqw; top: 50.6cqw; transition-duration: .45s; }
.sc-mark.is-arrow .m-arrow { opacity: 1; width: 16.6cqw; }
.sc-mark.is-arrow .p-mark { left: 67cqw; top: 38.2cqw; transition-duration: .8s; }
.sc-mark.is-aimT .p-mark { left: 46cqw; top: 52.4cqw; transition-duration: .45s; }
.sc-mark.is-text .m-text { clip-path: inset(0 0 0 0); }
.sc-mark.is-text .p-mark { left: 66.5cqw; top: 55cqw; transition-duration: 1.1s; }
.sc-mark.is-aimH .p-mark { left: 18.4cqw; top: 30.3cqw; transition-duration: .45s; }
.sc-mark.is-hl .m-hl { width: 13cqw; }
.sc-mark.is-hl .p-mark { left: 31.4cqw; top: 30.3cqw; transition-duration: .7s; }
.sc-mark.is-hold .p-mark { left: 74cqw; top: 58cqw; }

/* ---------- Scene: mark past the edges ---------- */
.combo {
  position: absolute; left: 12cqw; top: 10cqw; width: 30cqw; height: 18.75cqw;
  background: #fff; border-radius: .4cqw;
  box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, .45);
  transition: width .8s var(--ease), height .8s var(--ease);
}
.combo::before, .combo::after {
  content: ""; position: absolute; opacity: 0; pointer-events: none;
  background: rgba(46, 123, 255, .12); box-shadow: inset 0 0 0 1px rgba(46, 123, 255, .5);
  transition: opacity .3s ease;
}
.combo::before { left: 30cqw; top: 0; right: 0; bottom: 0; }
.combo::after { left: 0; right: 0; top: 18.75cqw; bottom: 0; }
.pic { position: absolute; left: 0; top: 0; width: 30cqw; height: 18.75cqw; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px #ECEEF3; }
.pc { left: 0; top: 20.25cqw; width: 22cqw; height: 13.75cqw; opacity: 0; transition: opacity .3s ease .3s; }
.e-arrow { left: 23cqw; top: calc(6.5cqw - .17cqw); rotate: -14deg; transition: width 1s var(--ease), opacity .1s ease; }
.e-text {
  position: absolute; left: 36.6cqw; top: 1.3cqw;
  font-size: 1.6cqw; font-weight: 600; white-space: nowrap; color: var(--mark-red);
  clip-path: inset(0 100% 0 0); transition: clip-path 1.1s steps(14, end);
}
.grow {
  position: absolute; z-index: 2; padding: .3cqw .7cqw; border-radius: .5cqw;
  background: var(--blue); color: #fff; font-size: 1.1cqw; font-weight: 600; white-space: nowrap;
  opacity: 0; transition: opacity .25s ease;
}
.g-right { right: .6cqw; top: -2.6cqw; }
.g-down { left: .6cqw; bottom: -2.6cqw; }
.cb-tray { left: 70cqw; top: 5cqw; background: #26272D; }
.cghost {
  position: absolute; z-index: 4; left: 71.6cqw; top: 36.6cqw; width: 22.8cqw; height: 8.6cqw;
  border-radius: .6cqw; background: #fff; overflow: hidden; opacity: 0;
  box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, .5);
  transition: left 1s var(--ease), top 1s var(--ease), width 1s var(--ease), height 1s var(--ease), border-radius 1s ease, opacity .25s ease;
}
.p-edges { left: 60cqw; top: 55cqw; }

.sc-edges.is-aimA .p-edges { left: 35cqw; top: 16.5cqw; transition-duration: .6s; }
.sc-edges.is-arrow .e-arrow { opacity: 1; width: 13.4cqw; }
.sc-edges.is-arrow .p-edges { left: 48cqw; top: 13.3cqw; transition-duration: 1s; }
.sc-edges.is-arrow .combo { width: 38cqw; transition-delay: .45s; }
.sc-edges.is-arrow .combo::before, .sc-edges.is-arrow .g-right { opacity: 1; transition-delay: .45s; }
.sc-edges.is-aimT .p-edges { left: 49cqw; top: 12.6cqw; transition-duration: .45s; }
.sc-edges.is-text .e-text { clip-path: inset(0 0 0 0); }
.sc-edges.is-text .combo { width: 50.5cqw; transition-duration: 1.1s; }
.sc-edges.is-text .p-edges { left: 61cqw; top: 14cqw; transition-duration: 1.1s; }
.sc-edges.is-aimP .combo::before, .sc-edges.is-aimP .g-right { opacity: 0; }
.sc-edges.is-aimP .p-edges { left: 83cqw; top: 40.9cqw; }
.sc-edges.is-grabP .cb-tray .th3 .mthumb { box-shadow: 0 0 0 .2cqw #fff; }
.sc-edges.is-grabP .cghost { opacity: .95; }
.sc-edges.is-dragP .cghost { left: 12cqw; top: 30.25cqw; width: 22cqw; height: 13.75cqw; border-radius: .2cqw; }
.sc-edges.is-dragP .p-edges { left: 23cqw; top: 37cqw; transition-duration: 1s; }
.sc-edges.is-dragP .combo { height: 34cqw; transition-delay: .5s; }
.sc-edges.is-dragP .combo::after, .sc-edges.is-dragP .g-down { opacity: 1; transition-delay: .5s; }
.sc-edges.is-dropP .cghost { opacity: 0; }
.sc-edges.is-dropP .pc { opacity: 1; transition-delay: 0s; }
.sc-edges.is-dropP .cb-tray .th3 .mthumb { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.sc-edges.is-hold .combo::after, .sc-edges.is-hold .g-down { opacity: 0; }
.sc-edges.is-hold .p-edges { left: 62cqw; top: 55cqw; }

/* ---------- Scene: hide ---------- */
.inspector {
  position: absolute; z-index: 3; left: 8.6cqw; top: 12cqw; width: 16cqw;
  padding: 1.2cqw; border-radius: 1.2cqw;
  background: var(--hud); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  color: #F5F5F7; font-size: 1.35cqw;
}
.insp-title { display: flex; align-items: center; gap: .7cqw; font-weight: 600; margin-bottom: 1.1cqw; }
.insp-title svg { width: 1.7cqw; height: 1.7cqw; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.segmented {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  height: 3.2cqw; padding: .3cqw; border-radius: .8cqw; background: rgba(255, 255, 255, .08);
}
.seg { position: relative; z-index: 1; display: grid; place-items: center; font-size: 1.2cqw; color: #C7C7CC; transition: color .25s ease; }
.seg-redact { color: #fff; }
.seg-thumb {
  position: absolute; left: .3cqw; top: .3cqw; bottom: .3cqw; width: calc(50% - .3cqw);
  border-radius: .6cqw; background: rgba(255, 255, 255, .18);
  transition: transform .35s var(--ease);
}
.hide-cap { left: 27cqw; top: 6cqw; width: 56cqw; height: 50.5cqw; }
.account { position: absolute; left: 5cqw; top: 15cqw; width: 46cqw; margin: 0; font-size: 1.9cqw; }
.account div { display: grid; grid-template-columns: 12cqw 1fr; padding: 1.5cqw 0; border-top: 1px solid #ECEEF3; }
.account div:last-child { border-bottom: 1px solid #ECEEF3; }
.account dt { color: #8A8EA3; }
.account dd { margin: 0; color: var(--ink); font-weight: 500; }
.secret { position: relative; display: inline-block; }
.secret::after {
  content: ""; position: absolute; left: -.5cqw; top: -.35cqw; bottom: -.35cqw; width: 0;
  border-radius: .25cqw;
  transition: width .9s var(--ease);
}
.s-email::after { background: #16171B; }
.s-card::after {
  background-color: #B9BECD;
  background-image:
    linear-gradient(45deg, #8F95A8 25%, transparent 25%, transparent 75%, #8F95A8 75%),
    linear-gradient(45deg, #8F95A8 25%, transparent 25%, transparent 75%, #8F95A8 75%),
    linear-gradient(90deg, #D2D6E0 50%, #A3A9BA 50%);
  background-size: 1.6cqw 1.6cqw, 1.6cqw 1.6cqw, 3.2cqw 3.2cqw;
  background-position: 0 0, .8cqw .8cqw, 0 0;
}
.p-hide { left: 68cqw; top: 54cqw; }

.sc-hide.is-redact .s-email::after { width: calc(100% + 1cqw); }
.sc-hide.is-redact .p-hide { left: 62cqw; top: 31.4cqw; transition-duration: .9s; }
.sc-hide.is-switch .seg-thumb { transform: translateX(100%); }
.sc-hide.is-switch .seg-redact { color: #C7C7CC; }
.sc-hide.is-switch .seg-pixel { color: #fff; }
.sc-hide.is-switch .p-hide { left: 20.6cqw; top: 18.6cqw; transition-duration: .45s; }
.sc-hide.is-pixel .s-card::after { width: calc(100% + 1cqw); }
.sc-hide.is-pixel .p-hide { left: 64.5cqw; top: 37.2cqw; transition-duration: .9s; }
.sc-hide.is-hold .p-hide { left: 72cqw; top: 54cqw; }

/* ---------- Scene: drag out one, a few, or all ---------- */
.mode {
  position: absolute; z-index: 4; left: 50%; top: 1.4cqw; translate: -50% 0;
  padding: .5cqw 1.3cqw; border-radius: 99cqw;
  background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 .6cqw 1.6cqw rgba(27, 34, 80, .08);
  font-size: 1.3cqw; font-weight: 600; color: var(--ink); white-space: nowrap;
  opacity: 0; transition: opacity .3s ease;
}
.mode::after { content: "One shot"; }
.out-tray { left: 4cqw; top: 7cqw; height: 50.5cqw; }
.sel-n::after { content: ""; }
.out-win { left: 34cqw; top: 7cqw; width: 62cqw; height: 50.5cqw; }
.row {
  position: absolute; left: 5%; height: 21%;
  display: flex; gap: 2cqw;
  opacity: 0; transform: translateY(1cqw);
  transition: opacity .45s var(--ease), transform .55s var(--ease);
}
.r1 { top: 12%; } .r2 { top: 38%; } .r3 { top: 64%; }
.row .img {
  position: relative; height: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: .6cqw; background: #fff;
  box-shadow: 0 0 0 1px #E3E6EE, 0 .6cqw 1.6cqw rgba(27, 34, 80, .08);
}
.oghost {
  position: absolute; z-index: 4; left: 8cqw; top: 13cqw; width: 13cqw; height: 8cqw;
  opacity: 0; pointer-events: none;
  transition: left .9s var(--ease), top .9s var(--ease), opacity .25s ease;
}
.oghost i {
  position: absolute; inset: 0; border-radius: .6cqw; background: #fff;
  box-shadow: 0 0 0 1px rgba(27, 34, 80, .08), 0 1.2cqw 3cqw rgba(27, 34, 80, .25);
}
.oghost i:nth-child(1) { rotate: -6deg; opacity: 0; }
.oghost i:nth-child(2) { rotate: 4deg; opacity: 0; }
.oghost i:nth-child(3) {
  background:
    linear-gradient(#A9C1F3, #A9C1F3) 30% 78% / 10% 40% no-repeat,
    linear-gradient(var(--mark-blue), var(--mark-blue)) 52% 78% / 10% 60% no-repeat,
    linear-gradient(#A9C1F3, #A9C1F3) 74% 78% / 10% 30% no-repeat, #fff;
}
.oghost b {
  position: absolute; right: -1cqw; top: -1cqw;
  display: none; place-items: center; width: 2.6cqw; height: 2.6cqw; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 1.3cqw; font-weight: 700;
  box-shadow: 0 0 0 .25cqw #fff;
}
.p-out { left: 60cqw; top: 58cqw; }

.sc-out.is-aim1 .mode { opacity: 1; }
.sc-out.is-aim1 .p-out { left: 17cqw; top: 19.7cqw; transition-duration: .7s; }
.sc-out.is-grab1 .th1 .mthumb { box-shadow: 0 0 0 .2cqw #fff; }
.sc-out.is-grab1 .sel-n::after { content: "1 selected"; }
.sc-out.is-grab1 .oghost { opacity: .96; left: 10cqw; top: 15cqw; }
.sc-out.is-drag1 .oghost { left: 45cqw; top: 15cqw; }
.sc-out.is-drag1 .p-out { left: 52cqw; top: 20cqw; transition-duration: .9s; }
.sc-out.is-drop1 .oghost { opacity: 0; }
.sc-out.is-drop1 .r1 { opacity: 1; transform: none; }
.sc-out.is-drop1 .th1 .mthumb { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.sc-out.is-drop1 .sel-n::after { content: ""; }
.sc-out.is-sel2 .mode::after { content: "Selected shots"; }
.sc-out.is-sel2 .p-out { left: 17cqw; top: 31.3cqw; transition-duration: .5s; animation: click .25s ease .45s; }
.sc-out.is-sel2 .th2 .mthumb { box-shadow: 0 0 0 .2cqw #fff; }
.sc-out.is-sel2 .sel-n::after { content: "1 selected"; }
.sc-out.is-sel2 .oghost { left: 10cqw; top: 39cqw; transition: opacity .25s ease; }
.sc-out.is-sel3 .p-out { left: 17cqw; top: 42.9cqw; transition-duration: .45s; animation: click .25s ease .4s; }
.sc-out.is-sel3 .th3 .mthumb { box-shadow: 0 0 0 .2cqw #fff; }
.sc-out.is-sel3 .sel-n::after { content: "2 selected"; }
.sc-out.is-drag2 .oghost { opacity: .96; left: 45cqw; top: 28cqw; transition: left .9s var(--ease), top .9s var(--ease), opacity .25s ease; }
.sc-out.is-drag2 .oghost i:nth-child(2) { opacity: 1; }
.sc-out.is-drag2 .oghost b { display: grid; }
.sc-out.is-drag2 .oghost b::after { content: "2"; }
.sc-out.is-drag2 .p-out { left: 52cqw; top: 33cqw; transition-duration: .9s; animation: none; }
.sc-out.is-drop2 .oghost { opacity: 0; }
.sc-out.is-drop2 .r2 { opacity: 1; transform: none; }
.sc-out.is-drop2 .th2 .mthumb, .sc-out.is-drop2 .th3 .mthumb { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.sc-out.is-drop2 .sel-n::after { content: ""; }
.sc-out.is-aimB .mode::after { content: "The whole batch"; }
.sc-out.is-aimB .p-out { left: 11cqw; top: 13.2cqw; transition-duration: .65s; }
.sc-out.is-aimB .oghost { left: 6cqw; top: 12cqw; transition: opacity .25s ease; }
.sc-out.is-grabB .mtray-batch { background: rgba(255, 255, 255, .12); }
.sc-out.is-grabB .mthumb { box-shadow: 0 0 0 .2cqw #fff; }
.sc-out.is-grabB .sel-n::after { content: "3 selected"; }
.sc-out.is-grabB .oghost { opacity: .96; }
.sc-out.is-grabB .oghost i:nth-child(1) { opacity: 1; }
.sc-out.is-grabB .oghost b::after { content: "3"; }
.sc-out.is-dragB .oghost { left: 45cqw; top: 41cqw; transition: left .9s var(--ease), top .9s var(--ease), opacity .25s ease; }
.sc-out.is-dragB .p-out { left: 52cqw; top: 46cqw; transition-duration: .9s; }
.sc-out.is-dropB .oghost { opacity: 0; }
.sc-out.is-dropB .r3 { opacity: 1; transform: none; }
.sc-out.is-dropB .mthumb { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.sc-out.is-dropB .mtray-batch { background: transparent; }
.sc-out.is-dropB .p-out { left: 70cqw; top: 58cqw; }

/* ---------- Quick path ---------- */
.quick { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.modifiers { width: 100%; border-collapse: collapse; }
.modifiers th { text-align: left; font-size: 13px; font-weight: 600; color: var(--ink-3); padding: 0 0 10px; }
.modifiers td { padding: 14px 0; border-top: 1px solid var(--hair); vertical-align: middle; }
.modifiers td:first-child { width: 38%; white-space: nowrap; padding-right: 16px; }
.modifiers td:last-child { color: var(--ink-2); }
.modifiers td:last-child kbd { margin: 0 1px; }
.none { color: var(--ink-3); }
@media (max-width: 820px) { .quick { grid-template-columns: 1fr; } }

/* ---------- Privacy ---------- */
.facts { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px clamp(24px, 4vw, 56px); }
.facts li { padding-top: 16px; border-top: 1px solid var(--hair); color: var(--ink-2); }
.facts strong { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 600; }
@media (max-width: 820px) { .facts { grid-template-columns: 1fr; } }

/* ---------- Download ---------- */
.download {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 28px);
  max-width: var(--measure);
  margin: clamp(56px, 7vw, 88px) auto 0;
  padding: clamp(24px, 3.5vw, 36px) clamp(24px, 4vw, 40px);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--hair);
}
@media (max-width: 1200px) { .download { margin-left: var(--gutter); margin-right: var(--gutter); } }
.download-icon { width: 72px; height: 72px; flex: none; filter: drop-shadow(0 10px 18px rgba(27, 34, 80, .16)); }
.download-text { flex: 1; }
.download p { margin-top: 4px; color: var(--ink-2); font-size: 15px; }
@media (max-width: 640px) { .download { flex-direction: column; text-align: center; } }

/* ---------- Footer ---------- */
.footer {
  display: flex; justify-content: space-between; gap: 16px;
  max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto;
  padding: 28px var(--gutter);
  font-size: 14px; color: var(--ink-3);
}
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .win-b { display: none; }
  .handle { right: -11px; bottom: -11px; width: 24px; height: 24px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .selection, .readout, .handle { animation: none; }
  .btn { transition: none; }
}