/* 04 – the long edit, the page's signature. A laptop: words on the left (headline, the request, the whole talk's numbers
   and the explainer link), the clip on the right with one time bar under it and Before / After under that. A phone: the
   same top to bottom, the request right above the clip so both share the screen.
   The bar has two rows. Row 1: the 29 raw seconds as segments with real gaps; the red ones are what was cut. Row 2:
   outlined chips that say what each red piece is. When the edit plays, the red pieces fall into their chips and fill
   them, and row 1 closes up to 14 s; the logo's yellow stick marks the joint. Every box is placed by
   js/04-longedit.js (--x / --y / --w / --rot per piece), which also plays every move frame by frame so that no two
   pieces ever touch on the way. The fallen pieces lie level, exactly in their chips (art director, v12).
   RU (2026-10-04): the Russian headline now reads «Сам монтирует длинный ролик.» and holds two balanced lines on
   laptop and phone; the run line keeps two lines. */
.lx-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.lx-top h2 { max-width: 14ch; }
.lx-top .lead { max-width: 26em; }
.lx-ask { margin-top: var(--s4); }
.lx-demo { margin-top: var(--s4); min-width: 0; }
.lx-bot { margin-top: var(--s4); }
@media (min-width: 980px) {
  .lx-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; grid-template-areas: "top demo" "ask demo" "bot demo"; column-gap: var(--s7); }
  .lx-top { grid-area: top; }
  .lx-ask { grid-area: ask; justify-self: end; }
  .lx-bot { grid-area: bot; align-self: start; }
  .lx-demo { grid-area: demo; align-self: center; margin-top: 0; }
}

/* The clip */
.lx-v { aspect-ratio: 16 / 9; border-radius: var(--r-media); box-shadow: var(--sh-3); }
.lx-v .tag span { display: inline-block; transition: opacity .2s ease; }
.lx-v .tag.is-swap span { opacity: 0; transition: none; }
.lx-v .tag { transition: background-color .2s ease, color .2s ease; }
.lx-v .tag.is-cutpart { background: var(--red); color: #fff; }
/* The cut: the logo's yellow slash (19°, solid) sweeps across the frame at every switch between raw and edit */
.lx-cut { position: absolute; top: -12%; bottom: -12%; left: 0; width: 9%; z-index: 4; pointer-events: none; background: var(--yellow); transform: translateX(-260%) skewX(-19deg); }
.lx-v.is-cutting .lx-cut { animation: lx-sweep .7s cubic-bezier(.7, 0, .3, 1) both; }
@keyframes lx-sweep { from { transform: translateX(-260%) skewX(-19deg); } to { transform: translateX(1400%) skewX(-19deg); } }
.lx-sound { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 16px/1 var(--font); color: #fff; background: rgba(17, 18, 16, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 0; border-radius: var(--r-pill); padding: 0 16px 0 13px; cursor: pointer; transition: background-color .2s; }
.lx-sound:hover { background: rgba(17, 18, 16, .82); }
.lx-sound .ico { width: 18px; height: 18px; }
/* RU: the talk is English. With sound on, Russian captions (media/v12-ru-04-take.vtt, read by js/04) sit over the frame
   in the talk card's caption look (base.css .tc-cc), one row above the sound button so neither covers the other. */
.lx-cc { position: absolute; left: 50%; bottom: 64px; z-index: 2; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); margin: 0; color: #fff; font: 600 clamp(16px, 1.5vw, 20px)/1.6 var(--font); text-align: center; text-wrap: balance; pointer-events: none; }
.lx-cc > span { padding: 3px 10px 4px; border-radius: 7px; background: rgba(0, 0, 0, .74); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lx-cc:empty { display: none; }

/* The bar: row 1 the time line, row 2 the chips. --bh a row's height, --rg the gap between the rows. */
.lx-tl { --bh: 52px; --rg: 14px; position: relative; height: calc(var(--bh) * 2 + var(--rg)); margin-top: 26px; }
.lx-pc, .lx-chip, .lx-ghost { position: absolute; left: 0; top: 0; height: var(--bh); box-sizing: border-box; }
.lx-pc { width: var(--w, 0px); border-radius: 6px; display: grid; place-items: center;
  transform: translate(var(--x, 0px), calc(var(--y, 0px) + var(--lift, 0px))) rotate(var(--rot, 0deg)); transition: background-color .25s ease; will-change: transform, width; }
.lx-pc.k { background: var(--green-3); z-index: 1; }
.lx-pc.k1 { border-radius: 12px 6px 6px 12px; }
.lx-pc.k2 { border-radius: 6px 12px 12px 6px; }
.lx-tl.is-cut .lx-pc.k1 { border-radius: 12px 0 0 12px; }
.lx-tl.is-cut .lx-pc.k2 { border-radius: 0 12px 12px 0; }
.lx-pc.x { background: var(--red); color: #fff; z-index: 2; cursor: pointer; }
/* A red piece (or its chip) plays that stumble in the raw take; the hit area is at least 44 × 44 px however short the
   bar or narrow the piece (the false start is 35–38 px wide in the open bar on a phone), centred on what you see.
   The narrow false start widens only to its left, over the kept green piece (nothing to press there), so Dead air
   beside it keeps a whole 44 px too (centred, the false start took 2 px of it: 42 px at 375, QA r3). */
.lx-pc.x.lx-narrow { z-index: 3; }
.lx-pc.x::after, .lx-chip::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.lx-pc.x.lx-narrow::after { left: auto; right: 0; transform: translateY(-50%); }
.lx-pc.x:hover { background: #a9311f; }
.lx-pc.x:focus-visible, .lx-chip:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.lx-pc.x.is-down { border-radius: var(--r-thumb); box-shadow: var(--sh-2); }
/* A piece's words show only once it lies in its chip (wide enough for them); in the bar the chip below says it */
.lx-lb { display: block; padding: 0 12px; font: 600 16px/1 var(--font); white-space: nowrap; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.lx-pc.is-label .lx-lb { opacity: 1; }
.lx-tl .ls { display: none; }
/* While the raw take plays, the piece under the playhead lifts and its chip lights up */
.lx-pc.x.is-now { --lift: -5px; background: #a9311f; }
/* The chips: where each red piece will lie, outlined, with its name */
.lx-chip { display: grid; place-items: center; width: var(--w, 0px); border: 2px dashed rgba(194, 61, 42, .5); border-radius: var(--r-thumb); color: var(--red);
  transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--rot, 0deg)); transition: opacity .2s ease, background-color .25s ease, border-color .25s ease; }
.lx-chip b { display: block; padding: 0 12px; font: 600 16px/1 var(--font); white-space: nowrap; }
.lx-chip { cursor: pointer; }
.lx-chip:hover { border-color: var(--red); }
.lx-chip.is-now { background: var(--red-soft); border-color: var(--red); }
.lx-tl.is-down .lx-chip { opacity: 0; }
/* Closed: a dashed ghost keeps the old length, and the logo's yellow stick marks the joint where the cut was. The
   ghost's opacity follows the green end as it closes up (set frame by frame in js/04-longedit.js). */
.lx-ghost { width: var(--gw, 0px); border: 2px dashed var(--line-2); border-radius: 12px; opacity: 0; }
.lx-join { position: absolute; left: -3px; top: -7px; width: 6px; height: calc(var(--bh) + 14px); background: var(--yellow); z-index: 3; transform: translateX(var(--jx, 0px)) rotate(19deg) scaleY(0); transition: transform .3s var(--ease); pointer-events: none; }
.lx-tl.is-closed .lx-join { transform: translateX(var(--jx, 0px)) rotate(19deg); }
/* The bar's length, at its right end: 29 s, then 14 s. They hand over while the bar closes up (opacity set frame by
   frame with the width in js/04-longedit.js), so the bar never reads 29 s at 14 s long. */
.lx-end { position: absolute; left: 0; top: 0; height: var(--bh); display: grid; align-items: center; padding-left: 14px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; transform: translateX(var(--ex, 0px)); }
.lx-end span { grid-area: 1 / 1; }
.lx-end .e-cut { opacity: 0; color: var(--green-3); }
/* Playhead: driven by the video's clock. It stands 8 px above the bar (its knob on top) and only 3 px below it, so it
   never reaches the chips or the fallen pieces in row 2 (--rg is 12–14 px). */
.lx-head { position: absolute; left: -1.5px; top: -8px; width: 3px; height: calc(var(--bh) + 11px); border-radius: 2px; background: var(--ink); z-index: 4; pointer-events: none; opacity: 0; transform: translateX(var(--hx, 0px)); transition: opacity .3s ease; }
.lx-head::before { content: ""; position: absolute; left: -4.5px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.lx-tl.is-live .lx-head { opacity: 1; }
.lx-tl.is-moving .lx-head { opacity: 0; transition-duration: .1s; }

/* Before / After, with the logo's yellow stick between them instead of an arrow */
.lx-ba { display: flex; align-items: center; gap: 16px; margin-top: var(--s4); }
.lx-ba button { display: flex; align-items: center; gap: 10px; min-height: 56px; min-width: 150px; padding: 0 20px; border-radius: var(--r-ctl); border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.lx-ba button:hover { border-color: var(--ink-2); }
.lx-ba .k { font-size: 17px; font-weight: 600; color: var(--muted); transition: color .2s; }
.lx-ba b { font-size: 28px; line-height: 1; letter-spacing: -0.03em; font-weight: 700; white-space: nowrap; }
.lx-ba button.is-on { border-color: var(--green); background: var(--green); color: var(--green-ink); }
.lx-ba button.is-on .k { color: rgba(246, 244, 238, .78); }
.lx-slash { width: 6px; height: 44px; background: var(--yellow); transform: rotate(19deg); flex: none; }

/* The whole video, one line: the proof that it isn't a trick of 29 seconds */
.lx-run { display: grid; gap: 6px; margin: 0; max-width: 27em; }   /* RU: 27em (EN 24em) – «Это 29 секунд моего выступления в Тель-Авиве,» keeps one line on a laptop */
.lx-run b { font-size: clamp(30px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 750; color: var(--ink); white-space: nowrap; }
.lx-run > span { font-size: 18px; line-height: 1.4; font-weight: 500; color: var(--ink-2); text-wrap: pretty; }   /* > : text-wrap would undo .nw inside */
.lx-bot .link { margin-top: var(--s1); }

/* For the curious: the 29 seconds as a script, and the same 29 seconds as a small bar under it. Opened, the cuts are
   struck through one by one and each lights its red piece of the bar; the retake is kept; then the red pieces close
   up and the bar goes from 29 s to 14 s, the logo's yellow stick at the joint (NC.explain in js/04-longedit.js).
   Without the animation (no JS, reduced motion) it shows the struck script and the open bar at once. */
.lx-x { display: grid; gap: 10px; }
.lx-lines > * { text-wrap: pretty; }
.lx-xl { margin: 0; font-size: 17px; line-height: 1.42; color: var(--ink); }
.lx-xl .q { background-image: linear-gradient(var(--red), var(--red)); background-repeat: no-repeat; background-size: 0 2px; background-position: 0 58%; transition: background-size .55s var(--ease), color .3s ease; }
.lx-xl.x .q { background-size: 100% 2px; color: var(--muted); }
.lx-xl .why { display: inline-block; margin-left: 0; padding: 2px 10px; border-radius: var(--r-pill); background: var(--red-soft); color: var(--red); font-size: 16px; font-weight: 600; white-space: nowrap; transition: opacity .3s ease, transform .3s var(--ease); }
.lx-xl .why.keep { background: var(--green-soft); color: var(--green); }
.lx-x.is-anim .lx-xl.x:not(.is-struck) .q { background-size: 0 2px; color: var(--ink); }
.lx-x.is-anim .lx-xl:not(.is-struck):not(.is-kept) .why { opacity: 0; transform: translateY(4px); }
/* The bar: each piece as long as its seconds (--g), 3 px of card between pieces; the label follows its end */
.lx-xb { --u: calc((100cqw - 72px) / 29.443); container-type: inline-size; display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.lx-xbar { display: flex; flex: none; height: 30px; }
.lx-xbar i { flex: none; height: 100%; width: calc(var(--g) * var(--u)); margin-left: 3px; border-radius: 5px; transition: width .6s var(--ease), margin .6s var(--ease), opacity .4s ease, background-color .25s ease; }
.lx-xbar i:first-child { margin-left: 0; border-radius: 9px 5px 5px 9px; }
.lx-xbar i:last-child { position: relative; border-radius: 5px 9px 9px 5px; }
.lx-xbar i.k { background: var(--green-3); }
.lx-xbar i.x { background: var(--red); }
.lx-x.is-anim .lx-xbar i.x:not(.is-on) { background: rgba(194, 61, 42, .22); }
.lx-x.is-closed .lx-xbar i.x { width: 0; margin-left: 0; opacity: 0; }
.lx-xbar i:last-child::before { content: ""; position: absolute; left: -4px; top: -5px; width: 5px; height: calc(100% + 10px); background: var(--yellow); transform: rotate(19deg) scaleY(0); transition: transform .3s var(--ease) .55s; }
.lx-x.is-closed .lx-xbar i:last-child::before { transform: rotate(19deg); }
.lx-xb b { display: grid; font-size: 20px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
/* 29 s leaves as the bar starts to close and 14 s comes in while it is still closing: never both at once */
.lx-xb b span { grid-area: 1 / 1; transition: opacity .2s ease; }
.lx-xb .e-cut { opacity: 0; color: var(--green-3); }
.lx-x.is-closed .lx-xb .e-raw { opacity: 0; }
.lx-x.is-closed .lx-xb .e-cut { opacity: 1; transition: opacity .25s ease .22s; }

@media (max-width: 979px) {
  .lx-top h2 { max-width: 18ch; }
  .lx-br { display: none; }
}
@media (max-width: 719px) {
  /* A little room for the Russian headline at narrow widths. */
  .lx-top h2 { margin-right: -6px; }
  .lx-demo { margin-top: var(--s3); }
  .lx-tl { --bh: 44px; --rg: 12px; margin-top: 22px; }
  .lx-end { font-size: 20px; padding-left: 10px; }
  .lx-tl .lf { display: none; } .lx-tl .ls { display: inline; }
  .lx-chip b, .lx-lb { padding: 0 10px; }
  .lx-ba { gap: 12px; margin-top: var(--s3); }
  .lx-ba button { flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; justify-content: center; }
  .lx-ba .k { font-size: 16px; }
  .lx-ba b { font-size: 24px; }
  .lx-slash { height: 40px; }
  .lx-bot { margin-top: var(--s4); }
  .lx-xl { font-size: 16px; line-height: 1.38; }
  .lx-xbar { height: 26px; }
}
@media (max-width: 340px) {
  /* RU: the three chips («Фальстарт», «Тишина», «Кликер») with 10 px sides are 294 px with their gaps; a 320 phone has
     280. 7 px sides keep the row inside the column. */
  .lx-chip b, .lx-lb { padding: 0 7px; }
}
@media (max-width: 719px) and (max-height: 760px) {
  /* A short phone (375×667, or a 390 phone under Safari's bars): at the natural stop the headline, the request, its
     reply and the whole demo – clip, bar, chips and Before / After – share the screen. The lead goes (the chips and
     the reply say the same), the headline steps down to 32 px; the bar keeps its 44 px rows, so every red piece and
     chip stays a full tap target. */
  .lx-top h2 { font-size: 32px; }
  .lx-top .lead { display: none; }
  .lx-ask { margin-top: var(--s3); }
  .lx-demo { margin-top: var(--s2); }
  .lx-tl { margin-top: 14px; }
  .lx-ba { margin-top: var(--s2); }
}
@media (max-width: 719px) and (max-height: 700px) {
  /* the explainer sheet on a short phone: the script and its bar on one sheet */
  .lx-x { gap: 4px; }
  .lx-xl .why { padding: 1px 8px; }
  .lx-xb { margin-top: 2px; }
  .lx-xbar { height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-pc, .lx-chip, .lx-head, .lx-join, .lx-ghost, .lx-lb, .lx-xl .q, .lx-xl .why, .lx-xbar i, .lx-xbar i::before, .lx-xb b span { transition: none !important; }
  .lx-cut { display: none; }
}