/* Tool-card previews (v28): count-ups, captions, thumbnail maker, remove pauses. */
/* ---- counts: graphics.css ---- */
/* Animated graphics card: "+212%" counts up from +0% every loop, written by assets/cards/graphics.js.
   The old CSS counter (content: "+" counter(n) "%" driven by an animated @property --tcn) is switched off:
   Safari never repaints it. */
.prow-ui .tcard[href$="graphics.html"] .tprev.tv .tv-gx .n {
  display: inline-grid; justify-self: start; animation: none; counter-reset: none;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.prow-ui .tcard[href$="graphics.html"] .tprev.tv .tv-gx .n::before { content: none; }
/* the hidden "+212%" reserves the final width, so the callout box never changes size while counting */
.prow-ui .tcard[href$="graphics.html"] .tprev.tv .tc-graphics-n > span { grid-area: 1 / 1; text-align: left; }
.prow-ui .tcard[href$="graphics.html"] .tprev.tv .tc-graphics-size { visibility: hidden; }
/* like the Virality card (v21): the loop starts from the beginning each time the card comes into view,
   so the callout arrives, the bars rise and the number counts on screen. Reduced motion keeps the payoff frame. */
@media (prefers-reduced-motion: no-preference) {
  .prow-ui .tcard[href$="graphics.html"] .tprev.tv .tv-gx { animation-delay: 0s; }
  .prow-ui .tcard[href$="graphics.html"] .tprev.tv .tv-gx .bars i { animation-delay: calc(var(--i) * .12s); }
  .prow-ui .tcard[href$="graphics.html"] .tprev.tv:not(.inview) .tv-gx,
  .prow-ui .tcard[href$="graphics.html"] .tprev.tv:not(.inview) .tv-gx .bars i { animation: none; }
}

/* ---- counts: virality.css ---- */
/* Virality card: the score counts 0 -> 98 every loop, written by assets/cards/virality.js.
   The old CSS counter (content: counter(n) driven by an animated @property --tcn) is switched off here:
   Safari never repaints that counter, so the number just appeared. */
.prow-ui .tcard[href$="virality.html"] .tprev.tv .tv-vnum .n {
  display: inline-grid; animation: none; counter-reset: none; opacity: 1; transform: none;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.prow-ui .tcard[href$="virality.html"] .tprev.tv .tv-vnum .n::after { content: none; }
/* the hidden "98" reserves the final width, so "/100" never shifts while the digits change */
.prow-ui .tcard[href$="virality.html"] .tprev.tv .tc-virality-n > span { grid-area: 1 / 1; text-align: right; }
.prow-ui .tcard[href$="virality.html"] .tprev.tv .tc-virality-size { visibility: hidden; }

/* ---- captions: captions.css ---- */
/* AI captions tool card: the Lacy clip captioned word by word, synced to the video's own playhead
   (same words and timings as features/captions.html), plus three real style tiles. The style on the clip
   changes every loop (Beast, Karaoke, Boxed) and the matching tile lights up with a pink ring and a
   progress line. Driven by assets/cards/captions.js; everything is scoped to this card. */

/* the phone keeps the shared .tv-ph.l geometry; a soft bottom shade keeps the caption legible */
.tcard[href$="captions.html"] .tc-captions-ph::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.42), transparent 34%); }

/* caption on the clip: lower third (centre at 76% of the frame), below his chin */
.tcard[href$="captions.html"] .tc-captions-cap { position: absolute; z-index: 3; left: 3%; right: 3%; top: 76%; transform: translateY(-50%); text-align: center; white-space: nowrap; pointer-events: none; }
.tcard[href$="captions.html"] .tc-captions-ch { display: none; }
.tcard[href$="captions.html"] .tc-captions-ch.is-cur { display: block; }
.tcard[href$="captions.html"] .tc-captions-w { display: inline-block; margin: 0 .1em; transition: opacity .12s, transform .32s cubic-bezier(.2,1.7,.4,1), color .12s, background-color .12s; }

/* the three styles, as in Prow (assets/tools/captions.css), sized in card units.
   Clip caption: 7cqi = 18.5px on the 264px desktop card, 11.3px on the 162px phone card. */
.tcard[href$="captions.html"] .tc-captions-beast { font-family: var(--font); font-weight: 900; font-size: 7cqi; line-height: 1.05; text-transform: uppercase; letter-spacing: -.02em; color: #fff; -webkit-text-stroke: .15em #000; paint-order: stroke fill; text-shadow: 0 .1em 0 #000; }
.tcard[href$="captions.html"] .tc-captions-beast .tc-captions-w { margin: 0 .16em; opacity: 0; transform: scale(.45) translateY(.3em); }
.tcard[href$="captions.html"] .tc-captions-beast .tc-captions-w.is-in { opacity: 1; transform: none; }
.tcard[href$="captions.html"] .tc-captions-beast .tc-captions-w.is-on { color: #ff3b3b; transform: scale(1.14) rotate(-2deg); }

.tcard[href$="captions.html"] .tc-captions-karaoke { font-family: "Montserrat", var(--font); font-weight: 800; font-size: 6.9cqi; line-height: 1.12; color: #fff; text-shadow: 0 .06em .22em rgba(0,0,0,.9), 0 0 .07em rgba(0,0,0,.8); }
.tcard[href$="captions.html"] .tc-captions-karaoke .tc-captions-w.is-in { color: #ffd400; }
.tcard[href$="captions.html"] .tc-captions-karaoke .tc-captions-w.is-on { transform: scale(1.08); }

.tcard[href$="captions.html"] .tc-captions-boxed { font-family: var(--font); font-weight: 800; font-size: 6.8cqi; line-height: 1.5; color: #fff; }
.tcard[href$="captions.html"] .tc-captions-boxed .tc-captions-w { padding: .1em .32em; margin: 0 .04em; border-radius: .22em; background: rgba(0,0,0,.86); }
.tcard[href$="captions.html"] .tc-captions-boxed .tc-captions-w.is-on { background: #fff; color: #000; transform: scale(1.07); }

/* style tiles: the same real frame (him saying "stream") with "my stream" in each style */
.tcard[href$="captions.html"] .tc-captions-tiles { position: absolute; z-index: 3; left: 56.5cqi; right: 5cqi; top: 8cqi; bottom: 8cqi; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 2.6cqi; }
.tcard[href$="captions.html"] .tc-captions-tile { position: relative; overflow: hidden; border-radius: 2.8cqi; background: #000 center 30% / cover no-repeat; box-shadow: 0 0 0 .3cqi rgba(255,255,255,.1), 0 2cqi 6cqi -2cqi rgba(0,0,0,.8); opacity: .55; filter: saturate(.75); transition: opacity .45s var(--ease-out-soft), filter .45s var(--ease-out-soft), box-shadow .45s var(--ease-out-soft), transform .5s var(--ease-swift); }
.tcard[href$="captions.html"] .tc-captions-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.5), transparent 55%); }
.tcard[href$="captions.html"] .tc-captions-tile.is-act { opacity: 1; filter: none; box-shadow: 0 0 0 .55cqi var(--accent), 0 0 7cqi -1cqi rgba(255,143,180,.55), 0 2cqi 6cqi -2cqi rgba(0,0,0,.8); transform: scale(1.03); }
.tcard[href$="captions.html"] .tc-captions-tile .tc-captions-cap { top: auto; bottom: 9%; transform: none; left: 2%; right: 2%; }
.tcard[href$="captions.html"] .tc-captions-tile .tc-captions-beast { font-size: 5.1cqi; }
.tcard[href$="captions.html"] .tc-captions-tile .tc-captions-karaoke { font-size: 5.1cqi; }
.tcard[href$="captions.html"] .tc-captions-tile .tc-captions-boxed { font-size: 4.9cqi; }
/* playhead progress along the bottom of the style that is playing */
.tcard[href$="captions.html"] .tc-captions-tile::after { content: ""; position: absolute; left: 0; bottom: 0; height: .8cqi; width: calc(var(--p, 0) * 100%); background: var(--accent); opacity: 0; transition: opacity .3s; }
.tcard[href$="captions.html"] .tc-captions-tile.is-act::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tcard[href$="captions.html"] .tc-captions-w, .tcard[href$="captions.html"] .tc-captions-tile { transition: none !important; }
  .tcard[href$="captions.html"] .tc-captions-tile::after { display: none; }
}

/* ---- thumbs: thumbs.css ---- */
/* Thumbnail maker card: the real clip plays on a 16:9 canvas while a playhead runs along its frames;
   it stops on the frame at 0:02, the grey studio drops away to the cut-out, and the same frame becomes the
   tool page's thumbnail ("It's on me?!", ring on the bug). Then the frame at 0:03 becomes "Don't move". */
.prow-ui .tc-thumbs-stage { position: absolute; z-index: 2; left: 4cqi; right: 4cqi; top: 10cqi; aspect-ratio: 16 / 9; border-radius: 2.6cqi; overflow: hidden; isolation: isolate; container-type: inline-size; background: #111; box-shadow: 0 0 0 .35cqi rgba(255,255,255,.14), 0 4cqi 12cqi -2cqi rgba(0,0,0,.85); transition: transform .5s var(--ease-out-soft); }
.prow-ui .tcard:hover .tc-thumbs-stage { transform: translateY(-1cqi); }

/* shared geometry: the tool page's subject box (right -2%, 112% tall, 420:455). The cut-out fills it; the
   clip and the still are placed so the cut-out lands exactly on the person (frame x1.175, y -83.7px) */
.prow-ui .tc-thumbs-box { position: absolute; right: -2%; bottom: 0; height: 112%; aspect-ratio: 420 / 455; }
.prow-ui .tc-thumbs-box > video, .prow-ui .tc-thumbs-box > .tc-thumbs-still { position: absolute; left: 0; top: -18.396%; width: 111.905%; height: 195.75%; max-width: none; object-fit: fill; }

/* layer 1: transparency checker, seen for a beat once the background is gone */
.prow-ui .tc-thumbs-chk { position: absolute; inset: 0; z-index: 1; background: repeating-conic-gradient(#262626 0 25%, #1a1a1a 0 50%) 0 0 / 5cqi 5cqi; }

/* thumbnails (styles from tools/thumbs: sunburst, white-edged cut-out, red ring, Montserrat 900) */
.prow-ui .tc-thumbs-t { position: absolute; inset: 0; z-index: 2; }
.prow-ui .tc-thumbs-t.b { z-index: 3; clip-path: circle(0% at 74% 52%); }
.prow-ui .tc-thumbs-bg { position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 72% 50%, rgba(255,255,255,.11) 0deg 5deg, transparent 5deg 15deg), radial-gradient(circle at 72% 46%, #ffe066 0%, #ff9a1f 34%, #e5470c 70%, #8f1d03 100%); clip-path: circle(0% at 74% 52%); }
.prow-ui .tc-thumbs-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(0,0,0,.28), transparent 60%), linear-gradient(to top, rgba(0,0,0,.25), transparent 40%); }
.prow-ui .tc-thumbs-t.b .tc-thumbs-bg { clip-path: none; background: repeating-conic-gradient(from 0deg at 72% 50%, rgba(255,255,255,.1) 0deg 5deg, transparent 5deg 15deg), radial-gradient(circle at 72% 46%, #b5ddff 0%, #4b86ff 36%, #2134c9 72%, #0d1567 100%); }
.prow-ui .tc-thumbs-t .tc-thumbs-box > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 0 0 rgba(255,255,255,0)) drop-shadow(0 0 0 rgba(255,255,255,0)) drop-shadow(0 0 0 rgba(0,0,0,0)); }
.prow-ui .tc-thumbs-ring { position: absolute; z-index: 2; left: 31%; top: 59%; width: 15cqi; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1.2cqi solid #ff2626; box-shadow: 0 0 0 .5cqi #fff, inset 0 0 0 .5cqi #fff, 0 0 4cqi rgba(255,30,30,.7); opacity: 0; transform: scale(.3); }
.prow-ui .tc-thumbs-t.b .tc-thumbs-ring { left: 28%; }
.prow-ui .tc-thumbs-ttl { position: absolute; z-index: 3; left: 4.5%; top: 50%; width: 56%; margin: 0; translate: 0 -50%; rotate: -3deg; font-family: "Montserrat", var(--font); font-weight: 900; font-size: 11.5cqi; line-height: .92; letter-spacing: -.01em; text-transform: uppercase; color: #fff; -webkit-text-stroke: 1.5cqi #000; paint-order: stroke fill; text-shadow: 0 1.2cqi 0 #000; opacity: 0; transform: scale(1.35); }
.prow-ui .tc-thumbs-ttl > span, .prow-ui .tc-thumbs-ttl > em { display: block; }
.prow-ui .tc-thumbs-ttl em { font-style: normal; color: #ffe14d; }
.prow-ui .tc-thumbs-t::after { content: ""; position: absolute; z-index: 2; inset: auto 0 0 0; height: 26%; background: linear-gradient(to top, rgba(0,0,0,.32), transparent); opacity: 0; pointer-events: none; }

/* layer 4: the source clip on a plate matching its grey studio wall, feathered so the 9:16 frame
   reads as one wide shot */
.prow-ui .tc-thumbs-src { position: absolute; inset: 0; z-index: 4; background: linear-gradient(180deg, #66737a 0%, #77868c 25%, #85949b 55%, #889599 100%); }
.prow-ui .tc-thumbs-src video { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); }
.prow-ui .tc-thumbs-still { opacity: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); }
.prow-ui .tc-thumbs-flash { position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; }

.prow-ui .tc-thumbs-chip { position: absolute; z-index: 6; left: 2.6cqi; top: 2.6cqi; display: inline-flex; align-items: center; gap: 1.4cqi; height: 8.8cqi; padding: 0 3cqi; border-radius: 99px; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 5cqi; font-weight: 650; white-space: nowrap; transition: opacity .3s, background-color .25s, color .25s; }
.prow-ui .tc-thumbs-chip .spin { width: 3.4cqi; height: 3.4cqi; border-radius: 50%; border: .55cqi solid rgba(255,255,255,.3); border-top-color: #fff; }
.prow-ui .tc-thumbs-chip svg { display: none; width: 4.2cqi; height: 4.2cqi; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

/* frames Prow looked at: 7 real frames, one a second from 0:00 to 0:06 */
.prow-ui .tc-thumbs-strip { position: absolute; z-index: 2; left: 4cqi; right: 4cqi; top: 67.25cqi; display: flex; gap: 1.2cqi; }
.prow-ui .tc-thumbs-strip > i { flex: 1 1 0; aspect-ratio: 400 / 758; border-radius: 1.2cqi; background-color: #222; background-repeat: no-repeat; background-size: 700% 100%; background-position: calc(var(--f) * 100% / 6) 0; opacity: .38; box-shadow: inset 0 0 0 .25cqi rgba(255,255,255,.1); transition: opacity .25s, transform .4s var(--ease-swift), box-shadow .25s; }
.prow-ui .tc-thumbs-strip > i.seen { opacity: .8; }
.prow-ui .tc-thumbs-strip > i.pk { opacity: 1; transform: translateY(-1.6cqi); box-shadow: inset 0 0 0 .3cqi #fff, 0 0 0 .55cqi var(--accent), 0 2cqi 4cqi -1cqi rgba(255,143,180,.6); }
.prow-ui .tc-thumbs-head { position: absolute; z-index: 2; top: -2.6cqi; bottom: -1.2cqi; left: var(--hx, 0%); width: .55cqi; margin-left: -.275cqi; border-radius: 99px; background: #fff; box-shadow: 0 0 2cqi rgba(255,143,180,.9); }
.prow-ui .tc-thumbs-head::before { content: ""; position: absolute; left: 50%; top: 0; width: 2.2cqi; height: 2.2cqi; translate: -50% -40%; border-radius: 50%; background: #fff; }

/* ---- states (set by assets/cards/thumbs.js) ---- */
.prow-ui .tc-thumbs.k-pick .tc-thumbs-still { opacity: 1; }
.prow-ui .tc-thumbs.k-pick .tc-thumbs-chip { background: var(--accent); color: #2a0614; }
.prow-ui .tc-thumbs.k-pick .tc-thumbs-chip .spin { display: none; }
.prow-ui .tc-thumbs.k-pick .tc-thumbs-chip svg { display: block; }
.prow-ui .tc-thumbs-src { transition: opacity .5s var(--ease-out-soft); }
.prow-ui .tc-thumbs.k-cut .tc-thumbs-src { opacity: 0; }
.prow-ui .tc-thumbs.k-build .tc-thumbs-chip { opacity: 0; }
.prow-ui .tc-thumbs.k-build .tc-thumbs-t.a .tc-thumbs-bg { clip-path: circle(120% at 74% 52%); }
.prow-ui .tc-thumbs.k-build .tc-thumbs-t.a::after, .prow-ui .tc-thumbs.k-b .tc-thumbs-t.b::after { opacity: 1; }
.prow-ui .tc-thumbs.k-build .tc-thumbs-t.a .tc-thumbs-box > img, .prow-ui .tc-thumbs-t.b .tc-thumbs-box > img { filter: drop-shadow(0 0 .5cqi #fff) drop-shadow(0 0 .3cqi #fff) drop-shadow(0 2cqi 3cqi rgba(0,0,0,.45)); }
.prow-ui .tc-thumbs.k-build .tc-thumbs-t.a .tc-thumbs-ttl, .prow-ui .tc-thumbs.k-b .tc-thumbs-t.b .tc-thumbs-ttl { opacity: 1; transform: none; }
.prow-ui .tc-thumbs.k-build .tc-thumbs-t.a .tc-thumbs-ring, .prow-ui .tc-thumbs.k-b .tc-thumbs-t.b .tc-thumbs-ring { opacity: 1; transform: none; }
.prow-ui .tc-thumbs.k-b .tc-thumbs-t.b { clip-path: circle(120% at 74% 52%); }
/* reset: the clip comes back over the finished thumbnail before anything underneath is cleared */
.prow-ui .tc-thumbs.k-reset .tc-thumbs-src { opacity: 1; }
.prow-ui .tc-thumbs.k-reset .tc-thumbs-still { opacity: 0; }
.prow-ui .tc-thumbs.k-snap *, .prow-ui .tc-thumbs.k-snap *::before, .prow-ui .tc-thumbs.k-snap *::after, .prow-ui .tc-thumbs.done * { transition: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .prow-ui .tc-thumbs-chip .spin { animation: rot .8s linear infinite; }
  .prow-ui .tc-thumbs.k-pick:not(.k-cut) .tc-thumbs-flash { animation: tc-thumbs-flash .5s ease-out; }
  .prow-ui .tc-thumbs-t.a .tc-thumbs-bg { transition: clip-path .6s cubic-bezier(.5,0,.2,1); }
  .prow-ui .tc-thumbs-t .tc-thumbs-box > img { transition: filter .45s ease-out; }
  .prow-ui .tc-thumbs-t::after { transition: opacity .4s; }
  .prow-ui .tc-thumbs-ttl { transition: opacity .2s ease-out .3s, transform .45s cubic-bezier(.2,1.5,.4,1) .3s; }
  .prow-ui .tc-thumbs-ring { transition: opacity .2s ease-out .65s, transform .45s cubic-bezier(.2,1.6,.4,1) .65s; }
  .prow-ui .tc-thumbs-t.b { transition: clip-path .6s cubic-bezier(.5,0,.2,1); }
  .prow-ui .tc-thumbs-t.b .tc-thumbs-box { transform: translateX(6%); transition: transform .6s var(--ease-out-soft); }
  .prow-ui .tc-thumbs.k-b .tc-thumbs-t.b .tc-thumbs-box { transform: none; }
  .prow-ui .tc-thumbs-t.b .tc-thumbs-ttl { transition-delay: .42s, .42s; }
  .prow-ui .tc-thumbs-t.b .tc-thumbs-ring { transition-delay: .72s, .72s; }
}
/* title sizes as the tool page fits them (74 / longest line, max 11.5) */
.prow-ui .tc-thumbs-t.a .tc-thumbs-ttl { font-size: 10cqi; }
/* on the way back to the clip the words and ring go first, so nothing ghosts through the fade */
.prow-ui .tc-thumbs.k-reset .tc-thumbs-t.tc-thumbs-t .tc-thumbs-ttl, .prow-ui .tc-thumbs.k-reset .tc-thumbs-t.tc-thumbs-t .tc-thumbs-ring { opacity: 0; transition: opacity .15s !important; }
.prow-ui .tc-thumbs.k-reset .tc-thumbs-src { transition-duration: .4s; transition-delay: .1s; }
@keyframes tc-thumbs-flash { 0% { opacity: .5; } 100% { opacity: 0; } }

/* ---- pauses: pauses.css ---- */
/* Remove pauses card: the podcast line from features/pauses.html over its own footage. The ums and long pauses get
   marked as the playhead reads the clip, then collapse out of the line and the waveform; the saved time opens up
   on the right of the track and the length ticks 0:10.3 -> 0:07.0 (the page's own per-word timing, Tight level).
   Pink = filler words, amber = pauses, green = time saved: the same colours as the tool page. */
.prow-ui .tcard[href$="pauses.html"] .tprev > video { object-position: 50% 8%; }
.prow-ui .tc-pauses-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0) 26%, rgba(0,0,0,.5) 44%, rgba(0,0,0,.86) 70%, rgba(0,0,0,.92) 100%); }

/* the transcript */
.prow-ui .tc-pauses-tx { position: absolute; z-index: 3; left: 5cqi; right: 5cqi; bottom: 24.5cqi; margin: 0; color: #fff; font-size: 5.7cqi; font-weight: 600; line-height: 1.46; letter-spacing: -.01em; text-shadow: 0 .3cqi 1.2cqi rgba(0,0,0,.6); text-wrap: pretty; }
.prow-ui .tc-pauses-tx i { display: inline-block; vertical-align: -.3em; max-width: 6em; overflow: hidden; white-space: nowrap; margin-right: .26em; padding: 0 .32em; border-radius: .32em; font-style: normal; line-height: 1.32; text-shadow: none; text-decoration: line-through; text-decoration-thickness: .5cqi; text-decoration-color: transparent;
  transition: max-width .55s cubic-bezier(.65,0,.35,1), padding .55s cubic-bezier(.65,0,.35,1), margin .55s cubic-bezier(.65,0,.35,1), opacity .35s ease, background-color .25s ease, text-decoration-color .25s ease, color .25s ease; transition-delay: calc(var(--n) * 90ms); }
.prow-ui .tc-pauses-tx i.tc-pauses-f { color: rgba(255,143,180,.9); background-color: rgba(255,143,180,.12); box-shadow: inset 0 0 0 .25cqi rgba(255,143,180,.32); }
.prow-ui .tc-pauses-tx i.tc-pauses-p { font-size: .72em; font-weight: 700; vertical-align: -.1em; font-variant-numeric: tabular-nums; color: #ffd08a; background: repeating-linear-gradient(135deg, rgba(255,171,36,.3) 0 .9cqi, rgba(255,171,36,.1) .9cqi 1.8cqi); box-shadow: inset 0 0 0 .25cqi rgba(255,171,36,.42); }
.prow-ui .tc-pauses-tx i.on { text-decoration-color: currentColor; transition-delay: 0s; }
.prow-ui .tc-pauses-tx i.tc-pauses-f.on { color: #ff8fb4; background-color: rgba(255,143,180,.24); }
.prow-ui .tc-pauses-tx i.tc-pauses-p.on { color: #ffc35c; }
.prow-ui .tc-pauses.cut .tc-pauses-tx i { max-width: 0; padding-inline: 0; margin-right: 0; opacity: 0; transition-delay: calc(var(--n) * 90ms); }

/* the clip's waveform: speech in white, fillers pink, pauses amber; cut segments close up and the saved time
   opens on the right */
.prow-ui .tc-pauses-track { position: absolute; z-index: 3; left: 5cqi; right: 5cqi; bottom: 13cqi; height: 8.4cqi; padding: .9cqi; box-sizing: border-box; border-radius: 1.8cqi; background: rgba(0,0,0,.55); box-shadow: inset 0 0 0 .25cqi rgba(255,255,255,.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.prow-ui .tc-pauses-strip { position: relative; display: flex; height: 100%; overflow: hidden; border-radius: 1cqi; }
.prow-ui .tc-pauses-strip > i { flex: 0 0 var(--w); min-width: 0; height: 100%; display: flex; align-items: center; justify-content: space-around; overflow: hidden; transition: flex-basis .7s cubic-bezier(.65,0,.35,1), opacity .4s ease; }
.prow-ui .tc-pauses-strip > i > b { flex: none; width: .75cqi; height: var(--h); border-radius: 99px; background: rgba(248,250,252,.9); }
.prow-ui .tc-pauses-strip > i.tc-pauses-f { background: repeating-linear-gradient(135deg, rgba(255,143,180,.5) 0 .7cqi, rgba(255,143,180,.14) .7cqi 1.4cqi); border-radius: .6cqi; }
.prow-ui .tc-pauses-strip > i.tc-pauses-f > b { background: #ff8fb4; }
.prow-ui .tc-pauses-strip > i.tc-pauses-p { background: repeating-linear-gradient(135deg, rgba(255,171,36,.5) 0 .7cqi, rgba(255,171,36,.14) .7cqi 1.4cqi); border-radius: .6cqi; }
.prow-ui .tc-pauses-strip > i.on { box-shadow: inset 0 0 0 .3cqi rgba(255,255,255,.75); }
.prow-ui .tc-pauses.cut .tc-pauses-strip > i[data-k] { flex-basis: 0; opacity: 0; transition-delay: calc(var(--n) * 90ms); }
.prow-ui .tc-pauses-saved { position: absolute; top: .9cqi; bottom: .9cqi; right: .9cqi; width: 0; display: grid; place-items: center; box-sizing: border-box; border-radius: 1cqi; border: .25cqi dashed rgba(140,217,140,.6); background: rgba(140,217,140,.08); color: #8cd98c; font-size: 3.5cqi; font-weight: 700; white-space: nowrap; overflow: hidden; opacity: 0; font-variant-numeric: tabular-nums; transition: width .7s cubic-bezier(.65,0,.35,1), opacity .3s ease; }
.prow-ui .tc-pauses.cut .tc-pauses-saved { width: calc((100% - 1.8cqi) * var(--saved) / 100); opacity: 1; }
.prow-ui .tc-pauses-head { position: absolute; z-index: 2; top: .2cqi; bottom: .2cqi; left: calc(.9cqi + (100% - 1.8cqi) * var(--p, 0)); width: .45cqi; margin-left: -.22cqi; border-radius: 99px; background: #fff; box-shadow: 0 0 1.2cqi rgba(255,255,255,.7); opacity: 0; transition: opacity .25s ease; }
.prow-ui .tc-pauses.play .tc-pauses-head { opacity: 1; }

/* length, bottom right, level with the NEW badge */
.prow-ui .tc-pauses-dur { position: absolute; z-index: 4; right: 3cqi; bottom: 3cqi; height: 7cqi; padding: 0 2.4cqi; display: inline-flex; align-items: center; border-radius: 1.8cqi; background: rgba(0,0,0,.6); box-shadow: inset 0 0 0 .25cqi rgba(255,255,255,.14); color: #fff; font-size: 3.9cqi; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; transition: color .3s ease, box-shadow .3s ease; }
.prow-ui .tc-pauses.done .tc-pauses-dur { color: #8cd98c; box-shadow: inset 0 0 0 .25cqi rgba(140,217,140,.45); }

/* loop seam: the overlay fades out at the end of the 6s loop and comes back on the original line */
.prow-ui .tc-pauses-tx, .prow-ui .tc-pauses-track { transition: opacity .35s ease; }
.prow-ui .tc-pauses.out .tc-pauses-tx, .prow-ui .tc-pauses.out .tc-pauses-track { opacity: 0; }
.prow-ui .tc-pauses.nt *, .prow-ui .tc-pauses.nt { transition: none !important; }

@media (prefers-reduced-motion: reduce) { .prow-ui .tc-pauses, .prow-ui .tc-pauses * { transition: none !important; } }