/* Loop site: the Capture section, panel version (prototype, 2026-10-14).
   Left: Loop's menu bar panel (app/Sources/Views/MenuBarView.swift, PanelKit.swift) hanging from a slim slice of the
   Mac's menu bar, the Loop mark lit. Right: the Screenshots and Recordings boxes, with Loop's bar under them
   (app/Sources/Views/RecordingPill.swift). The pointer presses Capture in the panel, picks Area or Record, and the bar
   comes alive and runs today's take; the link then lands at the top of the panel's Links with "Link Copied".
   Every rule is scoped to #capture; motion values are transitions.dev tokens. */

/* ---------- Tokens ---------- */
#capture {
  --duration-stagger: 40ms; --duration-micro: 80ms; --duration-quick: 150ms; --duration-fast: 250ms;
  --duration-medium: 350ms; --duration-slow: 400ms; --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: ease-in-out; --ease-out: ease-out; --ease-linear: linear;
  --distance-micro: 4px; --distance-base: 8px; --distance-medium: 12px;
  --blur-small: 2px; --blur-medium: 3px; --blur-large: 8px;
  --check-draw: 350ms;

  /* One unit = one point of the app's bar. */
  --u: 1.15px;
  --h: calc(32 * var(--u));
  --stage-w: 1000px;
  /* The panel's scale: one unit = one point of the app's panel */
  --pz: 1;

  /* The bar's CardInk, light (PersonCard.swift) */
  --k-ground: #F3F3F6; --k-card: #FFFFFF; --k-card-edge: rgba(0, 0, 0, .05);
  --k-t1: #23262D; --k-t2: #6C727C; --k-t3: #9AA0AA; --k-glyph: #5C636E;
  --k-accent: #426DC8; --k-accent-fill: 106, 146, 232; --k-primary: #4B7BE3; --k-wash: rgba(106, 146, 232, .16);
  --k-badge: rgba(15, 20, 30, .055); --k-chip: rgba(255, 255, 255, .62); --k-chip-shadow: rgba(0, 0, 0, .06);
  --k-hover: #FFFFFF; --k-down: #E9EBF0;
  --k-pop: 0 0 0 .6px rgba(0, 0, 0, .20), 0 2px 5px rgba(0, 0, 0, .06), 0 14px 30px rgba(20, 24, 40, .14);
  --k-rim: #FFFFFF;
  --room-a: #E4E9F1; --room-b: #CBD4E1;

  /* The panel's PanelInk, light (PanelKit.swift) */
  --p-t1: #23262D; --p-t2: #6C727C; --p-t3: #9AA0AA; --p-accent: #426DC8; --p-glyph: #5C636E;
  --p-hover: rgba(15, 20, 30, .035); --p-card: #FFFFFF; --p-card-edge: rgba(0, 0, 0, .05); --p-card-shadow: rgba(0, 0, 0, .06);
  --p-ground: #F3F3F6; --p-ground-edge: rgba(0, 0, 0, .06); --p-badge: rgba(15, 20, 30, .055); --p-accent-badge: rgba(66, 109, 200, .16);
  --p-win: 0 0 0 .5px rgba(0, 0, 0, .10), 0 2px 6px rgba(20, 24, 40, .06), 0 22px 48px -12px rgba(20, 24, 40, .22);
  /* The menu bar slice */
  --mb-bg: #ECEEF3; --mb-ink: rgba(17, 16, 20, .86); --mb-lit: rgba(17, 16, 20, .11);
  --mb-shadow: 0 0 0 .5px rgba(17, 22, 32, .07), 0 1px 3px rgba(17, 22, 32, .05);
}
:root[data-theme="dark"] #capture {
  --k-ground: #1E1E20; --k-card: #2C2C2E; --k-card-edge: rgba(255, 255, 255, .06);
  --k-t1: #ECEEF3; --k-t2: #9AA0AD; --k-t3: #6B7280; --k-glyph: #B7BECB;
  --k-accent: #86A9F2; --k-accent-fill: 134, 169, 242; --k-primary: #4B7BE3; --k-wash: rgba(134, 169, 242, .16);
  --k-badge: rgba(255, 255, 255, .075); --k-chip: rgba(255, 255, 255, .05); --k-chip-shadow: rgba(0, 0, 0, .25); --k-hover: rgba(255, 255, 255, .10); --k-down: rgba(255, 255, 255, .16);
  --k-pop: 0 0 0 .6px rgba(255, 255, 255, .24), 0 2px 6px rgba(0, 0, 0, .30), 0 16px 34px rgba(0, 0, 0, .45);
  --room-a: #2E3542; --room-b: #1D222B;
  --p-t1: #ECEEF3; --p-t2: #9AA0AD; --p-t3: #6B7280; --p-accent: #86A9F2; --p-glyph: #B7BECB;
  --p-hover: rgba(255, 255, 255, .045); --p-card: #2C2C2E; --p-card-edge: rgba(255, 255, 255, .06); --p-card-shadow: rgba(0, 0, 0, .22);
  --p-ground: #1E1E20; --p-ground-edge: rgba(255, 255, 255, .08); --p-badge: rgba(255, 255, 255, .075); --p-accent-badge: rgba(134, 169, 242, .16);
  --p-win: 0 0 0 .5px rgba(255, 255, 255, .12), 0 2px 8px rgba(0, 0, 0, .35), 0 24px 54px -12px rgba(0, 0, 0, .6);
  --mb-bg: rgba(40, 40, 46, .72); --mb-ink: rgba(245, 245, 247, .88); --mb-lit: rgba(255, 255, 255, .16);
  --mb-shadow: 0 0 0 .5px rgba(255, 255, 255, .08), 0 1px 3px rgba(0, 0, 0, .3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #capture {
    --k-ground: #1E1E20; --k-card: #2C2C2E; --k-card-edge: rgba(255, 255, 255, .06);
    --k-t1: #ECEEF3; --k-t2: #9AA0AD; --k-t3: #6B7280; --k-glyph: #B7BECB;
    --k-accent: #86A9F2; --k-accent-fill: 134, 169, 242; --k-primary: #4B7BE3; --k-wash: rgba(134, 169, 242, .16);
    --k-badge: rgba(255, 255, 255, .075); --k-chip: rgba(255, 255, 255, .05); --k-chip-shadow: rgba(0, 0, 0, .25); --k-hover: rgba(255, 255, 255, .10); --k-down: rgba(255, 255, 255, .16);
    --k-pop: 0 0 0 .6px rgba(255, 255, 255, .24), 0 2px 6px rgba(0, 0, 0, .30), 0 16px 34px rgba(0, 0, 0, .45);
    --room-a: #2E3542; --room-b: #1D222B;
    --p-t1: #ECEEF3; --p-t2: #9AA0AD; --p-t3: #6B7280; --p-accent: #86A9F2; --p-glyph: #B7BECB;
    --p-hover: rgba(255, 255, 255, .045); --p-card: #2C2C2E; --p-card-edge: rgba(255, 255, 255, .06); --p-card-shadow: rgba(0, 0, 0, .22);
    --p-ground: #1E1E20; --p-ground-edge: rgba(255, 255, 255, .08); --p-badge: rgba(255, 255, 255, .075); --p-accent-badge: rgba(134, 169, 242, .16);
    --p-win: 0 0 0 .5px rgba(255, 255, 255, .12), 0 2px 8px rgba(0, 0, 0, .35), 0 24px 54px -12px rgba(0, 0, 0, .6);
    --mb-bg: rgba(40, 40, 46, .72); --mb-ink: rgba(245, 245, 247, .88); --mb-lit: rgba(255, 255, 255, .16);
    --mb-shadow: 0 0 0 .5px rgba(255, 255, 255, .08), 0 1px 3px rgba(0, 0, 0, .3);
  }
}

/* ---------- Head ---------- */
#capture .head h2 { font-size: clamp(30px, 3.4vw, 40px); }

/* ---------- The stage ----------
   Phones and narrow windows: the panel's block, then the two boxes, then the bar's block. Desktop (below): even
   blocks, the panel on the left and the three on the right. The panel keeps one size throughout, so nothing moves. */
#capture { --gap: 36px; }
#capture .cap { position: relative; max-width: var(--stage-w); margin: var(--gap) auto 0; display: flex; flex-direction: column; gap: 28px; }
/* The two boxes are Share's tiles: the same corner, white and shadow. The panel stands on its own. */
#capture .kind { border-radius: 20px; background: var(--card); box-shadow: var(--shadow-card); }
#capture .mac { position: relative; }
#capture .side { display: flex; flex-direction: column; min-width: 0; }

/* ---------- The menu bar slice and the panel, drawn in the app's own points ---------- */
#capture .mac-in { zoom: var(--pz); width: 320px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-body);
  -webkit-font-smoothing: antialiased; line-height: 1.2; color: var(--p-t1); }
/* The menu bar: a slice across the top of the block, the Loop mark in the middle, fading out the same way both sides */
#capture .mb { zoom: var(--pz); position: relative; display: flex; align-items: center; justify-content: center; height: 24px;
  background: var(--mb-bg); color: var(--mb-ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-body);
  -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 34%, #000 66%, transparent 96%); mask-image: linear-gradient(to right, transparent 4%, #000 34%, #000 66%, transparent 96%); }
#capture .mb-it { display: grid; place-items: center; height: 20px; padding: 0 7px; border-radius: 5px; transition: background-color var(--duration-fast) var(--ease-smooth-out); }
#capture .mb-it svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* While its panel is open, the Mac draws a soft highlight behind the status item */
#capture .mac:not(.is-away) .mb-loop { background: var(--mb-lit); }

/* The mark (StatusIcon.swift): a circle with an arrow; when a link is made the arrow folds into a tick, holds, and
   unfolds back. Here the two cross over (transitions.dev 09, icon swap). */
#capture .mk .mk-a, #capture .mk .mk-t { transform-origin: 9px 9px; transition: opacity var(--duration-fast) cubic-bezier(0.2, 0, 0, 1), transform var(--duration-fast) cubic-bezier(0.2, 0, 0, 1), filter var(--duration-fast) cubic-bezier(0.2, 0, 0, 1); }
#capture .mk .mk-t { opacity: 0; transform: scale(.5); filter: blur(1px); }
#capture .mac.is-done .mb .mk-a { opacity: 0; transform: scale(.5); filter: blur(1px); }
#capture .mac.is-done .mb .mk-t { opacity: 1; transform: none; filter: blur(0); }

/* As in the app, the panel grows when Capture opens into its row of four and when Link Copied arrives, and settles
   back after (its parts ease open and shut, so its height follows: transitions.dev 01, card resize). */
#capture .pnl { position: relative; margin-top: 8px; padding: 10px; border-radius: 14px; background: var(--p-ground); box-shadow: var(--p-win);
  transition: opacity var(--duration-medium) var(--ease-smooth-out), transform var(--duration-medium) var(--ease-smooth-out), filter var(--duration-medium) var(--ease-smooth-out); }
/* While the bar is busy, the panel steps back (in the app it closes; here it stays in view so the link can land in it) */
#capture .mac.is-away .pnl { opacity: .4; filter: saturate(.8); }

#capture .p-title { display: flex; align-items: center; gap: 7px; padding: 2px 6px 0; }
#capture .p-title .mk { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--p-t1); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#capture .p-title b { font-size: 13px; font-weight: 700; }
#capture .p-title .host { margin-left: auto; font-size: 11px; color: var(--p-t3); white-space: nowrap; }

/* StackCard: white, a half-point edge and a soft shadow; no hairlines between rows on the site */
#capture .sc { padding: 4px; border-radius: 12px; background: var(--p-card); box-shadow: inset 0 0 0 .5px var(--p-card-edge), 0 1.5px 10px var(--p-card-shadow); }
#capture .p-blk { margin-top: 12px; }
#capture .sh { display: flex; align-items: center; gap: 8px; padding: 7px 8px; }
#capture .sh-w { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
#capture .sh-t { font-size: 13px; font-weight: 600; color: var(--p-t1); }
#capture .sh-v { font-size: 11px; color: var(--p-t2); white-space: nowrap; }
#capture .chev { width: 18px; height: 18px; display: grid; place-items: center; color: var(--p-t3); flex: none; }
#capture .chev svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#capture .sh + .rows, #capture .sh + .rw { margin-top: 2.5px; }

/* A row: 46 points, the glyph in an 18-point column, the title over one line of detail */
#capture .rows { display: flex; flex-direction: column; }
#capture .rw { display: grid; grid-template-rows: 1fr; opacity: 1; transform: none;
  transition: grid-template-rows var(--duration-medium) var(--ease-smooth-out), opacity var(--duration-fast) var(--ease-out), transform var(--duration-medium) var(--ease-smooth-out); }
#capture .rw > .rw-in { overflow: hidden; min-height: 0; }
#capture .rw.is-in, #capture .rw.is-out { grid-template-rows: 0fr; opacity: 0; transform: translateY(calc(var(--distance-micro) * -1)); }
#capture .rw.is-out { transition: grid-template-rows var(--duration-medium) var(--ease-smooth-out), opacity var(--duration-quick) var(--ease-out), transform var(--duration-medium) var(--ease-smooth-out); }
#capture .row { display: flex; align-items: center; gap: 11px; height: 46px; padding: 0 8px; border-radius: 8px; transition: background-color var(--duration-fast) var(--ease-smooth-out); }
#capture .row.is-new { background: var(--p-hover); }
#capture .ri { width: 18px; display: grid; place-items: center; flex: none; color: var(--p-glyph); }
#capture .ri svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
#capture .ri svg .f { fill: currentColor; stroke: none; }
#capture .rt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#capture .rt b { font-size: 12.5px; font-weight: 500; color: var(--p-t1); white-space: nowrap; }
#capture .rt small { font-size: 10.5px; color: var(--p-t2); white-space: nowrap; }
#capture .rt small em { font-style: normal; font-weight: 600; color: var(--p-accent); }

/* The upload card at the top: Link Copied and the link's name (uploadCard in MenuBarView.swift).
   It grows in from nothing and the cards below make room (transitions.dev 01, card resize). */
#capture .p-up { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-medium) var(--ease-smooth-out); }
#capture .p-up > div { overflow: hidden; min-height: 0; }
#capture .p-up .sc { margin-top: 12px; opacity: 0; transform: translateY(-6px); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-medium) var(--ease-smooth-out); }
#capture .mac.has-up .p-up { grid-template-rows: 1fr; }
#capture .mac.has-up .p-up .sc { opacity: 1; transform: none; transition-delay: 60ms; }
#capture .up { display: flex; align-items: center; gap: 11px; padding: 8px; }
#capture .up .ri { color: var(--p-accent); }
#capture .up .ri svg { width: 15px; height: 15px; }
#capture .up .ri .tk { fill: none; stroke: var(--p-card); stroke-width: 1.6; stroke-dasharray: 10; stroke-dashoffset: 10; }
#capture .mac.has-up .up .ri .tk { stroke-dashoffset: 0; transition: stroke-dashoffset var(--check-draw) var(--ease-smooth-out) 220ms; }
#capture .up b { font-weight: 600; }

/* The foot: Capture on a row of its own, then Open and Settings */
#capture .chev.shut svg { transform: rotate(-90deg); }
#capture .p-foot { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
#capture .ctrl { position: relative; border-radius: 10px; background: var(--p-card); box-shadow: inset 0 0 0 .5px var(--p-card-edge), 0 1.5px 10px var(--p-card-shadow);
  transition: transform var(--duration-quick) var(--ease-out), box-shadow var(--duration-quick) var(--ease-out); }
#capture .ctrl.is-hover { box-shadow: inset 0 0 0 1px rgba(127, 130, 140, .32), 0 1.5px 10px var(--p-card-shadow); }
#capture .ctrl.is-press { transform: scale(.97); transition-duration: var(--duration-micro); }
#capture .w { display: inline-flex; align-items: baseline; gap: 7px; font-size: 12px; font-weight: 600; color: var(--p-t1); white-space: nowrap; }
#capture .kh { display: inline-flex; align-items: baseline; gap: 1.5px; color: var(--p-t3); font-weight: 500; }
#capture .kh i { font-style: normal; font-size: 9.5px; font-weight: 600; }
#capture .kh span { font-size: 10.5px; }
#capture .fbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#capture .fb { display: grid; place-items: center; height: 32px; }

/* CaptureStrip: a click turns the button, in place, into a row of four; it grows to fit the row */
#capture .cstrip { height: 32px; transition: height var(--duration-slow) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-out), box-shadow var(--duration-quick) var(--ease-out); }
#capture .cstrip.is-open { height: 64px; transition: height var(--duration-slow) cubic-bezier(0.34, 1.36, 0.64, 1), transform var(--duration-quick) var(--ease-out); }
#capture .cs-btn { position: absolute; inset: 0; display: grid; place-items: center;
  transition: opacity var(--duration-fast) var(--ease-smooth-out) 80ms, transform var(--duration-fast) var(--ease-smooth-out) 80ms; }
#capture .cstrip.is-open .cs-btn { opacity: 0; transform: scale(.94); transition: opacity 120ms var(--ease-smooth-out), transform 120ms var(--ease-smooth-out); }
#capture .cs-btn .stop { display: none; color: var(--p-accent); }
#capture .mac.is-rec .cs-btn .go { display: none; }
#capture .mac.is-rec .cs-btn .stop { display: inline; }
#capture .tiles { position: absolute; inset: 0; display: flex; align-items: center; gap: 4px; padding: 4px 6px; pointer-events: none; }
#capture .tile { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 5px; border-radius: 6px;
  opacity: 0; transform: translateY(7px);
  transition: opacity 100ms var(--ease-smooth-out), transform 100ms var(--ease-smooth-out), background-color var(--duration-quick) var(--ease-smooth-out); }
#capture .cstrip.is-open .tile { opacity: 1; transform: none;
  transition: opacity var(--duration-medium) var(--ease-smooth-out) calc(50ms + var(--i) * 35ms), transform var(--duration-medium) cubic-bezier(0.34, 1.3, 0.64, 1) calc(50ms + var(--i) * 35ms), background-color var(--duration-quick) var(--ease-smooth-out); }
#capture .tile .tb { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--p-badge); color: var(--p-glyph);
  transition: transform var(--duration-quick) var(--ease-out); }
#capture .tile .tb svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
#capture .tile .tb svg .f { fill: currentColor; stroke: none; }
#capture .tile b { font-size: 10.5px; font-weight: 600; color: var(--p-t1); }
#capture .tile.rec .tb { background: var(--p-accent-badge); color: var(--p-accent); }
#capture .tile.rec b { color: var(--p-accent); }
#capture .tile.is-hover { background: var(--p-hover); }
#capture .tile.is-hover .tb { transform: scale(1.06); }
#capture .tile.is-press { transform: scale(.95) !important; transition-duration: var(--duration-micro) !important; }

/* ---------- Loop's bar ----------
   One size for every state of both takes, set by the script to fit the widest state (--bar-w). While Loop is not
   capturing it rests quietly; it comes alive when a capture starts. */
/* Each box carries its own copy of the bar under its words */
#capture .screen { position: relative; margin-top: 16px; -webkit-tap-highlight-color: transparent; }
#capture .rig { position: relative; max-width: 100%; }
#capture .bar { position: relative; z-index: 2; display: flex; align-items: center; gap: calc(8 * var(--u));
  width: var(--bar-w, auto); max-width: 100%; padding: calc(8 * var(--u));
  border-radius: calc(12 * var(--u)); background: var(--k-ground);
  box-shadow: inset 0 0 0 calc(1.25 * var(--u)) rgba(var(--k-accent-fill), .35), var(--k-pop);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-body); -webkit-font-smoothing: antialiased;
  line-height: 1; white-space: nowrap; color: var(--k-t1);
  transition: box-shadow var(--duration-fast) var(--ease-smooth-out), opacity var(--duration-medium) var(--ease-smooth-out), filter var(--duration-medium) var(--ease-smooth-out); }
#capture .kind[data-state="rec"] .bar, #capture .kind.is-picking .bar { box-shadow: inset 0 0 0 calc(1.25 * var(--u)) rgba(var(--k-accent-fill), .9), var(--k-pop); }

#capture .card { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; flex: 1 1 0; min-width: 0; height: var(--h); overflow: hidden;
  padding: 0 calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--k-card);
  box-shadow: inset 0 0 0 calc(.5 * var(--u)) var(--k-card-edge); }
#capture .tl { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: calc(8 * var(--u)); width: max-content;
  font-size: calc(12.5 * var(--u)); font-weight: 600; letter-spacing: -0.003em; color: var(--k-t1);
  opacity: 0; transform: translateY(var(--distance-micro)); filter: blur(var(--blur-small)); visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-in-out), transform var(--duration-fast) var(--ease-in-out), filter var(--duration-fast) var(--ease-in-out), visibility 0s linear var(--duration-fast); }
#capture .tl.on { opacity: 1; transform: none; filter: blur(0); visibility: visible;
  transition: opacity var(--duration-fast) var(--ease-in-out) 60ms, transform var(--duration-fast) var(--ease-in-out) 60ms, filter var(--duration-fast) var(--ease-in-out) 60ms, visibility 0s; }
#capture .tl.was { opacity: 0; transform: translateY(calc(var(--distance-micro) * -1)); filter: blur(var(--blur-small));
  transition: opacity var(--duration-quick) var(--ease-in-out), transform var(--duration-quick) var(--ease-in-out), filter var(--duration-quick) var(--ease-in-out), visibility 0s linear var(--duration-quick); }
#capture .bdg { display: grid; place-items: center; flex: none; width: calc(22 * var(--u)); height: calc(22 * var(--u));
  border-radius: calc(6 * var(--u)); background: var(--k-badge); color: var(--k-glyph); }
#capture .bdg.lit { background: var(--k-wash); color: var(--k-accent); }
#capture .bdg .g { width: calc(13 * var(--u)); height: calc(13 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#capture .g-rec .fill { fill: currentColor; stroke: none; }
#capture .t-rec.on .g-rec .fill { animation: cap-breathe 2600ms var(--ease-in-out) infinite; }
/* Held still at rest: no breathing, no ticking */
#capture .kind[data-state="still"] .t-rec .g-rec .fill { animation: none; }
@keyframes cap-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
#capture .g-done path { stroke-width: 1.9; stroke-dasharray: 15; stroke-dashoffset: 15; }
#capture .t-link.on .g-done path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--check-draw) var(--ease-smooth-out) 140ms; }
#capture .tx { display: inline; }
#capture .tx .ln { display: inline; }
#capture .rec-w { color: var(--k-accent); }
#capture .clk { display: inline-flex; font-weight: 500; font-variant-numeric: tabular-nums; }
#capture .clk .d { display: inline-block; }
#capture .clk .d.pop { animation: cap-digit var(--duration-medium) var(--ease-smooth-out) both; }
@keyframes cap-digit { 0% { transform: translateY(var(--distance-micro)); opacity: 0; filter: blur(var(--blur-small)); } 100% { transform: none; opacity: 1; filter: blur(0); } }
#capture .meter { display: inline-flex; align-items: flex-end; gap: calc(2 * var(--u)); height: calc(14 * var(--u)); }
#capture .meter i { display: block; width: calc(2 * var(--u)); height: calc(3 * var(--u)); border-radius: calc(1 * var(--u)); background: var(--k-accent); opacity: .75;
  transition: height var(--duration-micro) var(--ease-linear); }
#capture .t-link { font-size: calc(13 * var(--u)); }
#capture .t-link .dom { font-weight: 500; color: var(--k-t3); }
#capture .t-link .name { font-weight: 600; color: var(--k-t1); }

#capture .ctl { position: relative; flex: none; width: var(--ctl-w, auto); height: var(--h); transition: width var(--duration-slow) var(--ease-smooth-out); }
#capture .cl { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: calc(8 * var(--u)); width: max-content;
  opacity: 0; transform: scale(.97); filter: blur(var(--blur-small)); visibility: hidden;
  transition: opacity var(--duration-quick) var(--ease-out), transform var(--duration-quick) var(--ease-out), filter var(--duration-quick) var(--ease-out), visibility 0s linear var(--duration-quick); }
#capture .cl.on { opacity: 1; transform: none; filter: blur(0); visibility: visible;
  transition: opacity var(--duration-fast) var(--ease-smooth-out) 80ms, transform var(--duration-fast) var(--ease-smooth-out) 80ms, filter var(--duration-fast) var(--ease-smooth-out) 80ms, visibility 0s; }
#capture .btn, #capture .sw { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; height: var(--h);
  border-radius: calc(7 * var(--u)); transition: transform var(--duration-quick) var(--ease-out), background-color var(--duration-fast) var(--ease-smooth-out), box-shadow var(--duration-fast) var(--ease-smooth-out), color var(--duration-fast) var(--ease-smooth-out); }
#capture .btn { gap: calc(6 * var(--u)); padding: 0 calc(11 * var(--u)); background: var(--k-chip); color: var(--k-t1);
  box-shadow: inset 0 0 0 calc(.5 * var(--u)) var(--k-card-edge), 0 calc(.5 * var(--u)) calc(1.5 * var(--u)) var(--k-chip-shadow);
  font-size: calc(12 * var(--u)); font-weight: 600; letter-spacing: -0.003em; }
#capture .btn .sym { width: calc(11 * var(--u)); height: calc(11 * var(--u)); fill: currentColor; flex: none; }
#capture .btn.primary { background: var(--k-primary); color: #fff; box-shadow: none; }
#capture .btn.primary .sym { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
#capture .btn.copied { background: var(--k-wash); color: var(--k-accent); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(var(--k-accent-fill), .5); }
#capture .btn.is-hover { background: var(--k-hover); }
#capture .btn.is-hover.is-press { background: var(--k-down); }
#capture .sw { width: calc(34 * var(--u)); background: var(--k-chip); color: var(--k-t3); box-shadow: inset 0 0 0 calc(.5 * var(--u)) var(--k-card-edge); }
#capture .sw.is-on { background: var(--k-wash); color: var(--k-accent); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(var(--k-accent-fill), .5); }
#capture .sw .g { position: absolute; width: calc(14 * var(--u)); height: calc(14 * var(--u)); fill: currentColor;
  transition: opacity var(--duration-fast) cubic-bezier(0.2, 0, 0, 1), transform var(--duration-fast) cubic-bezier(0.2, 0, 0, 1), filter var(--duration-fast) cubic-bezier(0.2, 0, 0, 1); }
#capture .sw .g .cut { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
#capture .sw .g-on { opacity: 0; transform: scale(.25); filter: blur(4px); }
#capture .sw.is-on .g-on { opacity: 1; transform: none; filter: blur(0); }
#capture .sw.is-on .g-off { opacity: 0; transform: scale(.25); filter: blur(4px); }
#capture .bar .is-press { transform: scale(.96); transition-duration: var(--duration-micro); }

/* The pointer: one for the whole stage, from the panel to the bar */
#capture .ptr { position: absolute; z-index: 6; left: 0; top: 0; width: 22px; height: 22px; pointer-events: none;
  fill: #111; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35));
  opacity: 0; transform: translate(var(--px, 0px), var(--py, 0px));
  transition: opacity var(--duration-quick) var(--ease-out), transform var(--duration-very-slow) var(--ease-smooth-out); }
#capture .ptr.on { opacity: 1; }
#capture .ptr.is-down { transform: translate(var(--px, 0px), var(--py, 0px)) scale(.92); transition-duration: var(--duration-micro), var(--duration-micro); }

/* The camera bubble, beside the bar */
/* The camera bubble, on the bar's top right corner, where the box has room */
#capture .bubble { position: absolute; z-index: 3; right: -10px; bottom: calc(100% - 16px); width: 46px; height: 46px; border-radius: 50%;
  background: var(--k-rim); padding: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 12px 28px -8px rgba(20, 24, 40, .30);
  opacity: 0; transform: scale(.6); filter: blur(var(--blur-medium)); transform-origin: 70% 100%; pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), filter var(--duration-fast) var(--ease-out); }
#capture .kind.has-cam[data-state="rec"] .bubble { opacity: 1; transform: none; filter: blur(0);
  transition: opacity var(--duration-very-slow) var(--ease-smooth-out), transform var(--duration-very-slow) var(--ease-smooth-out), filter var(--duration-very-slow) var(--ease-smooth-out); }
#capture .bubble svg { display: block; width: 100%; height: 100%; border-radius: 50%; }
#capture .bubble .room-a { stop-color: var(--room-a); }
#capture .bubble .room-b { stop-color: var(--room-b); }
#capture .bubble .me { transform-origin: 50px 100px; }
#capture .kind.has-cam[data-state="rec"] .bubble .me { animation: cap-sway 3200ms var(--ease-in-out) infinite; }
@keyframes cap-sway { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(-1.6deg) translateY(.6px); } }

/* ---------- The two boxes: a title and one line each, an icon tile beside the words ---------- */
#capture .side { gap: 16px; }
#capture .kind { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 22px 24px;
  border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--duration-fast) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-out); }
#capture .kind::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 1.5px rgba(var(--k-accent-fill), .55); transition: opacity var(--duration-fast) var(--ease-smooth-out); }
#capture .kind[aria-pressed="true"] { box-shadow: var(--shadow-lift); }
#capture .kind[aria-pressed="true"]::before { opacity: 1; }
#capture .kind:active { transform: scale(.99); }
#capture .kind:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
#capture .kind-h { display: flex; align-items: center; gap: 16px; min-width: 0; }
#capture .kind-w { display: flex; flex-direction: column; min-width: 0; }
#capture .kind-t { font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink1); }
#capture .kind-p { margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--ink2); white-space: nowrap; }
#capture .kico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--card);
  box-shadow: 0 0 0 1px var(--ring), 0 1px 2px rgba(17, 22, 32, .05); color: var(--k-accent); }
#capture .kico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

#capture .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Phones ---------- */
@media (max-width: 720px) {
  #capture { --u: .86px; --h: calc(42 * var(--u)); }
  #capture .cap { gap: 28px; }
  /* The bar takes nearly the box's whole width on phones; the words keep their inset */
  #capture .kind { border-radius: 18px; padding: 18px 10px 10px; }
  #capture .kind-h { padding: 0 6px; }
  #capture .t-prompt .bdg { display: none; }
  #capture .side { gap: 12px; }
  #capture .screen { margin-top: 14px; }
  #capture .btn.cancel { display: none; }
  #capture .sw { width: calc(30 * var(--u)); }
  #capture .tx { display: flex; flex-direction: column; align-items: center; line-height: 1.3; text-align: center; }
  #capture .tx .ln { display: block; }
  #capture .bubble { right: -6px; width: 40px; height: 40px; }
}
@media (max-width: 360px) {
  #capture { --u: .75px; --pz: .9; }
  #capture .t-prompt .bdg { display: none; }
  #capture .kico { display: none; }
}

/* ---------- Desktop: the panel on the left, the two boxes on the right ----------
   The two boxes split the right column equally, and the column is exactly as tall as the panel at rest (with its
   slice of menu bar), measured by the script (--blk-h). The panel's column holds that resting height, so when the
   panel grows (Capture's row of four, Link Copied) it hangs down past it as in the app, and nothing on the page moves. */
@media (min-width: 900px) {
  .home #capture { --stage-w: 900px; --pz: .88; --u: .92px; --h: 34px; }
  .home #capture .cap { --z: 1; zoom: 1; max-width: var(--stage-w); margin-top: var(--head-gap); display: grid; column-gap: 32px; row-gap: 16px;
    grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: repeat(2, calc((var(--blk-h, 420px) - 16px) / 2)); }
  .home #capture .mac { grid-column: 1; grid-row: 1 / span 2; align-self: start; height: var(--blk-h, auto); }
  .home #capture .side { display: contents; }
  .home #capture .kind { grid-column: 2; min-height: 0; padding: 0 28px; box-sizing: border-box; }
  .home #capture .kind[data-mode="shot"] { grid-row: 1; }
  .home #capture .kind[data-mode="rec"] { grid-row: 2; }
  .home #capture .kind-t { font-size: var(--t-lg, 17px); }
  .home #capture .kind-p { font-size: var(--t-md, 15px); }
  .home #capture .screen { margin: 18px 0 0; }
  .home #capture .bar { padding: 14px calc(8 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  #capture *, #capture *::before { transition: none !important; }
  #capture .clk .d.pop, #capture .g-rec .fill, #capture .bubble .me { animation: none !important; }
}