/* 13 Missing a tool? It writes one. Demo first: one white card holds the request, the kit and the short it changes.
   Laptop: the request and the kit on the left (tiles in 5 × 2, the "next tool" slot first, right under the reply),
   the short on the right. Tablet: one column, the kit as a strip that starts with the slot. Phone: the request, then
   the count and the slot beside the short, then the other nine tools as a strip; the lead moves under the demo, so
   headline, request, writing, new tile and short share one screen at the natural stop. Tiles are buttons that open
   a small card; hover only tints, nothing moves. */

/* ---------- Head ---------- */
/* Keep the Russian heading on two lines with the lead beside it. */
.tl-hd { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s7); align-items: end; }
.tl-hd .lead { margin: 0; }

/* ---------- The stage card ---------- */
.tl-stage { margin-top: var(--s6); display: grid; grid-template-columns: minmax(0, 1fr) 244px; grid-template-areas: "ask proof" "kit proof"; grid-template-rows: auto 1fr; column-gap: var(--s6); row-gap: var(--s4); align-items: start; padding: var(--s5); border-radius: var(--r-card); background: var(--card); box-shadow: var(--sh-3); }
/* The request spans the kit column: my bubble on the right, the reply on the left, right above the slot it fills */
.tl-ask { grid-area: ask; --ask-max: none; }
.tl-kit { grid-area: kit; min-width: 0; }
.tl-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0 0 var(--s2); font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.tl-name { display: inline-flex; align-items: center; gap: 8px; }
.tl-name .ico { width: 20px; height: 20px; color: var(--green-3); }
.tl-count { font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.tl-n { display: inline-block; font-weight: 700; color: var(--ink); }
.tl-n.bump { animation: tl-bump .5s var(--ease); }
@keyframes tl-bump { 0% { transform: translateY(-40%); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- Tiles: an icon on top, the name at the bottom, all the same height ---------- */
.tl-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
.tl-tiles > li { display: grid; min-width: 0; }
.tl-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--s2); width: 100%; min-height: 116px; margin: 0; padding: 14px 12px 14px 14px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--bg); box-shadow: var(--sh-1); font: 600 16px/1.25 var(--font); color: var(--ink); text-align: left; cursor: pointer; transition: background-color .15s, border-color .15s; -webkit-tap-highlight-color: transparent; }
.tl-tile:hover { background: #fff; border-color: var(--line-2); }
.tl-tn { display: block; text-wrap: balance; }
.tl-ic { position: relative; width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-thumb); background: var(--green-soft); color: var(--green); }
.tl-ic .ico { width: 20px; height: 20px; grid-area: 1 / 1; }
.tl-tile em { position: absolute; top: 14px; right: 12px; font: 700 16px/24px var(--font); font-style: normal; padding: 0 9px; border-radius: var(--r-pill); background: var(--yellow); color: var(--ink); }

/* The slot: "Your next tool" (a quiet add tile) → while writing, a code icon and a line that fills → "Logo in the
   corner – New". The phone has its own copy beside the short (.tl-slot-m); both follow the stage's classes. */
.tl-slot > .tl-tile { grid-area: 1 / 1; }
.tl-slot-m { display: none; }
.tl-next { background: var(--soft); box-shadow: none; color: var(--ink-2); }
.tl-next:hover { background: var(--soft-2); border-color: var(--line-2); }
.tl-next .tl-ic { background: var(--card); color: var(--green-3); box-shadow: var(--sh-1); }
.tl-next .i-code, .tl-next .t-busy { display: none; }
.tl-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--green-soft); opacity: 0; transition: opacity .2s ease; }
.tl-prog::before { content: ""; display: block; height: 100%; background: var(--green-3); transform: scaleX(0); transform-origin: 0 50%; }
.tl-stage.is-writing .tl-next { border-color: var(--green-3); background: var(--card); color: var(--ink); }
.tl-stage.is-writing .tl-next .tl-ic { background: var(--green-soft); color: var(--green); box-shadow: none; }
.tl-stage.is-writing .tl-next .i-plus, .tl-stage.is-writing .tl-next .t-idle { display: none; }
.tl-stage.is-writing .tl-next .i-code { display: block; animation: tl-blink 1s ease-in-out infinite; }
.tl-stage.is-writing .tl-next .t-busy { display: inline; }
.tl-stage.is-writing .tl-prog { opacity: 1; }
.tl-stage.is-writing .tl-prog::before { animation: tl-fill var(--tl-write, 2400ms) linear forwards; }
.tl-stage[data-demo="paused"] .tl-prog::before, .tl-stage[data-demo="paused"] .i-code { animation-play-state: paused; }
@keyframes tl-fill { to { transform: scaleX(1); } }
@keyframes tl-blink { 50% { opacity: .35; } }
.tl-new { background: var(--yellow-soft); border-color: #e9cf73; padding-right: 12px; }
.tl-new:hover { background: #fdf5d8; border-color: #ddbd4c; }
.tl-new .tl-ic { background: var(--yellow); color: var(--ink); }
.tl-new .tl-tn { padding-right: 0; }
/* Without JS the kit shows its final state; with JS it starts before the request */
.js .tl-new { visibility: hidden; }
.tl-next { visibility: hidden; }
.js .tl-next { visibility: visible; }
.js .tl-stage.has-new .tl-next { visibility: hidden; }
.js .tl-stage.has-new .tl-new { visibility: visible; animation: tl-pop .6s var(--ease); }
@keyframes tl-pop { 0% { opacity: 0; transform: scale(.9); } 60% { opacity: 1; transform: scale(1.03); } 100% { transform: none; } }
.tl-hint { display: flex; align-items: center; gap: 8px; margin: var(--s3) 0 0; font-size: 16px; line-height: 1.35; font-weight: 500; color: var(--ink-2); }
.tl-hint .ico { width: 18px; height: 18px; color: var(--green-3); }
.tl-hint > span { flex: 1 1 0; min-width: 0; text-wrap: balance; }   /* two even lines beside the short on a phone (WebKit's "pretty" made three) */
.tl-hint .h-tap { display: none; }
@media (hover: none) { .tl-hint .h-click { display: none; } .tl-hint .h-tap { display: inline; } }

/* ---------- The short: the logo lands in its corner, well inside the rounded edge ---------- */
.tl-proof { grid-area: proof; position: relative; margin: 0; width: 100%; aspect-ratio: 9 / 16; border-radius: var(--r-short); overflow: hidden; background: #d9d4c6; box-shadow: var(--sh-2); }
.tl-proof img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The logo is the creator's own (a white "GT" badge and "grigory tal" on one dark lozenge), never Nightcut's: the
   request says "my logo". The lozenge keeps it readable on any picture; it sits 12px in from the top and right. */
.tl-logo { position: absolute; z-index: 2; top: 12px; right: 12px; width: min(72%, 156px); pointer-events: none; }
.tl-logo svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3)); }
.tl-mark-bg { fill: rgba(22, 21, 18, .9); }
.tl-mark circle { fill: #fff; }
.tl-mark text { font-family: var(--font); font-weight: 700; }
.tl-mark-m { font-size: 16px; fill: var(--ink); letter-spacing: -0.02em; }
.tl-mark-w { font-size: 22px; fill: #fff; }
.js .tl-stage .tl-logo svg, .tx-ba .tl-logo svg { opacity: 0; transform: scale(1.25) rotate(-4deg); transform-origin: 100% 50%; }   /* stamped in from its corner, never past the short's edge */
.js .tl-stage.is-stamped .tl-logo svg { opacity: 1; transform: none; transition: opacity .2s ease, transform .55s cubic-bezier(.3, 1.45, .5, 1); }
/* one short yellow flash round the lozenge where it lands */
.tl-proof .tl-logo::after { content: ""; position: absolute; inset: -5px; border-radius: var(--r-pill); box-shadow: 0 0 0 3px var(--yellow); opacity: 0; pointer-events: none; }
.js .tl-stage.is-stamped .tl-logo::after { animation: tl-flash .9s ease-out .15s; }
@keyframes tl-flash { 0% { opacity: 0; transform: scale(.9); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.08); } }

.tl-after { display: flex; align-items: flex-end; justify-content: flex-start; min-height: calc(var(--s3) + 44px); }

/* ---------- The stage clip ----------
   Its first frame is me beside the slide with my rule on it: the play button sits in the slide's empty lower half
   (data-play-pos in the part), not on its words. */
.tl-talk { margin-top: var(--s5); }

/* ---------- Narrower than a laptop: one column, the kit as a strip ---------- */
/* ---------- Tablet: the laptop's two columns, the kit as a strip (it starts with the slot) beside the short ---------- */
@media (max-width: 1099px) {
  .tl-hd { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .tl-stage { grid-template-columns: minmax(0, 1fr) 200px; column-gap: var(--s5); overflow: hidden; }
  .tl-tiles { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--s5); margin: 0 0 0 calc(-1 * var(--s5)); padding: 2px 0 6px var(--s5); scrollbar-width: none; }
  .tl-tiles::-webkit-scrollbar { display: none; }
  .tl-tiles > li { flex: none; width: 136px; scroll-snap-align: start; }
  /* The strip reads as a scroller, not as tiles sliced by the card: the tile that runs on past the edge fades out
     (and the one that ran off the start fades in once it is scrolled); js/13-tools.js sets .is-scrolled / .is-end. */
  .tl-tiles { --tl-fl: 0px; --tl-fr: 56px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--tl-fl), #000 calc(100% - var(--tl-fr)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--tl-fl), #000 calc(100% - var(--tl-fr)), transparent 100%); transition: --tl-fl .25s ease, --tl-fr .25s ease; }
  .tl-tiles.is-scrolled { --tl-fl: 40px; }
  .tl-tiles.is-end { --tl-fr: 0px; }
}
@property --tl-fl { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --tl-fr { syntax: "<length>"; inherits: false; initial-value: 0px; }
/* ---------- Phone: headline, then the demo; the lead after it ----------
   The card: the request on top; the count and the slot (it becomes the new tile) beside the short; the other nine
   tools as a strip that runs to the card's edges; the hint fills the room under the slot. */
@media (max-width: 719px) {
  .tl > .wrap { display: flex; flex-direction: column; }
  .tl-hd { display: contents; }
  .tl-stage { order: 1; }
  .tl-after { order: 2; }
  .tl-hd .lead { order: 3; margin: var(--s1) 0 0; }
  .tl-talk { order: 4; }
  .tl-stage { margin-top: var(--s4); padding: var(--s3); grid-template-columns: minmax(0, 1fr) 44%; grid-template-areas: "ask ask" "bar proof" "slot proof" "hint proof" "strip strip"; grid-template-rows: auto auto auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 0; border-radius: var(--r-card); }
  .tl-kit { display: contents; }
  .tl-ask { margin-bottom: var(--s3); }
  .tl-bar { grid-area: bar; display: grid; justify-items: start; gap: 0; margin: 0 0 10px; font-size: 16px; line-height: 1.3; }
  .tl-name .ico { display: none; }
  .tl-count { font-size: 16px; font-weight: 600; color: var(--ink-2); }   /* RU: «10 инструментов» fits the column at 375 (18px ran 8px over) */
  .tl-n { font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; }
  .tl-slot-m { grid-area: slot; display: grid; }
  .tl-tiles > .tl-slot-l { display: none; }
  .tl-hint { grid-area: hint; align-self: start; align-items: flex-start; margin: var(--s2) 0 0; }
  .tl-hint .ico { margin-top: 2px; flex: none; }
  /* RU: beside the short there is room for two short lines only, so the phone layout always shows the short hint
     («Открой любой: там пример.», true for a mouse too); the laptop's longer one ran to five lines in a narrow window */
  .tl-hint .h-click { display: none; }
  .tl-hint .h-tap { display: inline; }
  .tl-proof { grid-area: proof; align-self: start; justify-self: stretch; width: 100%; height: auto; }
  .tl-tiles { grid-area: strip; scroll-padding-inline: var(--s3); margin: var(--s3) calc(-1 * var(--s3)) 0; padding: 2px var(--s3) 4px; }
  .tl-tiles > li { width: calc((100% - 20px) / 2.45); }
  .tl-tile { min-height: 104px; padding: 12px; }
  .tl-tile em { top: 12px; right: 10px; }
  .tl-talk { margin-top: var(--s4); }
}
/* A short phone (375×667, 390×664 in Safari with its bars): a little less air round the request and inside the
   tiles, and the short no wider than at 375, so at the natural stop the whole card, the strip the hint points at
   included, ends above the fold */
@media (max-width: 719px) and (max-height: 760px) {
  .tl-stage { margin-top: 14px; padding-bottom: var(--s2); grid-template-columns: minmax(0, 1fr) min(44%, 134px); }
  .tl-ask { margin-bottom: var(--s2); }
  .tl-tiles { margin-top: 10px; }
  .tl-tile { gap: var(--s1); padding-top: 10px; padding-bottom: 10px; }
  .tl-tile em { top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .tl-stage.has-new .tl-new, .tl-n.bump, .tl-stage.is-writing .tl-next .i-code { animation: none; }
  .js .tl-stage.is-stamped .tl-logo svg { transition: none; }
  .js .tl-stage.is-stamped .tl-logo::after { animation: none; }
}

/* ---------- The cards behind the tiles (cloned into the shared sheet) ---------- */
.ex-fig .tx-arr { display: block; width: 28px; height: 28px; flex: none; color: var(--muted); }
/* Logo in the corner: before → after */
.tx-ba { display: flex; align-items: center; justify-content: center; gap: var(--s4); }
.tx-s { margin: 0; width: 132px; }
.tx-sv { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-short); overflow: hidden; background: #d9d4c6; box-shadow: var(--sh-2); }
.tx-sv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tx-s figcaption { margin-top: var(--s2); text-align: center; font-size: 16px; font-weight: 600; color: var(--ink-2); }
.tx-sv .tl-logo { top: 7px; right: 7px; width: 74%; }
.tx-ba.on .tl-logo svg { opacity: 1; transform: none; transition: opacity .2s ease, transform .55s cubic-bezier(.3, 1.45, .5, 1); }
/* Your next tool: ask → it writes → it stays */
.tx-flow { display: flex; align-items: flex-start; justify-content: center; gap: var(--s2); }
.ex-fig.tx-flow .tx-arr { margin-top: 10px; }
.tx-step { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 4px; text-align: center; font-size: 16px; line-height: 1.3; color: var(--ink-2); opacity: .35; transition: opacity .4s var(--ease); }
.tx-step b { font-size: 17px; color: var(--ink); text-wrap: balance; }
.tx-step.on { opacity: 1; }
.tx-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 4px; border-radius: var(--r-ctl); background: var(--card); color: var(--green-3); box-shadow: var(--sh-1); }
.tx-ic.y { background: var(--yellow); color: var(--ink); }
.tx-ic .ico { width: 24px; height: 24px; }
/* Cut the video: the script with the cuts struck out */
.tx-script { display: grid; gap: 10px; }
.tx-script p { margin: 0; font-size: 17px; line-height: 1.45; color: var(--ink); }
.tx-script s { text-decoration: none; background: linear-gradient(var(--red), var(--red)) 0 58% / 0 2px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .5s var(--ease), color .4s ease; }
.tx-script .x.on s { background-size: 100% 2px; color: var(--muted); }
.tx-script .why { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 6px; background: var(--red-soft); color: var(--red); font-size: 16px; line-height: 24px; font-weight: 600; white-space: nowrap; vertical-align: 1px; }
.tx-script .why.keep { background: var(--green-soft); color: var(--green-3); }
/* Switch cameras: three angles, a lane of who's on, a playhead */
.tx-cams { display: grid; gap: var(--s3); }
.tx-cam-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.tx-cam { margin: 0; }
.tx-cam img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-thumb); box-shadow: 0 0 0 0 transparent; transition: box-shadow .25s ease; }
.tx-cam figcaption { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--ink-2); }
.tx-cam figcaption::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--c); flex: none; }
.tx-cam.on img { box-shadow: 0 0 0 3px var(--yellow); }
.tx-cam.on figcaption { color: var(--ink); }
.tx-cams [data-cam="0"] { --c: var(--green-3); }
.tx-cams [data-cam="1"] { --c: var(--yellow); }
.tx-cams [data-cam="2"] { --c: #7b766a; }
.tx-lane { position: relative; display: flex; height: 16px; border-radius: 8px; overflow: hidden; gap: 2px; }
.tx-lane i { width: var(--w); background: var(--c); }
.tx-head { position: absolute; top: 0; bottom: 0; left: var(--x, 0%); width: 3px; margin-left: -1px; background: var(--ink); border-radius: 2px; }
/* Find the shorts: four readers, their finds, the total */
.tx-find { display: grid; gap: var(--s3); }
.tx-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.tx-lanes li { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 12px 8px; border-radius: var(--r-ctl); background: var(--card); box-shadow: var(--sh-1); text-align: center; font-size: 16px; line-height: 1.25; font-weight: 500; color: var(--ink-2); }
.tx-lanes .ico { width: 22px; height: 22px; color: var(--green-3); }
.tx-lanes b { font-size: 26px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.tx-sum { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 0; font-size: 18px; font-weight: 600; color: var(--ink-2); }
.tx-sum b { font-size: 40px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
/* Judge the shorts: three real verdicts against the bar */
.tx-judge { display: grid; gap: var(--s3); }
.tx-scores { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.tx-scores li { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; grid-template-areas: "img t n" "img bar n"; column-gap: var(--s3); row-gap: 6px; align-items: center; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--card); box-shadow: var(--sh-1); }
.tx-scores img { grid-area: img; width: 40px; height: 71px; object-fit: cover; border-radius: 6px; }
.tx-t { grid-area: t; font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.tx-bar { grid-area: bar; position: relative; display: block; height: 10px; border-radius: 5px; background: var(--soft-2); }
.tx-bar i { display: block; height: 100%; border-radius: 5px; background: var(--ok); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease); }
.tx-scores .no .tx-bar i { background: var(--red); }
.tx-bar::after { content: ""; position: absolute; left: 70%; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.tx-scores b { grid-area: n; justify-self: end; font-size: 20px; font-weight: 700; color: var(--ink); }
.tx-scores .no b { color: var(--red); }
.tx-judge.on .tx-bar i { transform: scaleX(var(--s)); }
.tx-verdict { opacity: 0; transition: opacity .5s ease; }
.tx-judge.on .tx-verdict { opacity: 1; transition-delay: .7s; }
.tx-verdict { display: flex; justify-content: center; gap: var(--s4); margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.tx-verdict span { display: inline-flex; align-items: center; gap: 8px; }
.tx-verdict i { width: 14px; height: 14px; border-radius: 50%; background: var(--ok); }
.tx-verdict .out { color: var(--muted); }
.tx-verdict .out i { background: var(--red); }
/* Frame the face: the wide shot with the vertical crop on it → the short */
.tx-face { display: flex; align-items: center; justify-content: center; gap: var(--s3); }
.tx-wide { position: relative; flex: 0 1 300px; min-width: 0; aspect-ratio: 16 / 9; border-radius: var(--r-thumb); overflow: hidden; }
.tx-wide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tx-crop { position: absolute; top: 0; bottom: 0; left: 38.2%; width: 31.6%; box-shadow: 0 0 0 3px var(--yellow), 0 0 0 999px rgba(0, 0, 0, .45); border-radius: 4px; }
.tx-tall { flex: none; width: 104px; aspect-ratio: 9 / 16; border-radius: var(--r-thumb); overflow: hidden; box-shadow: var(--sh-2); }
.tx-tall img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55.8% 50%; }
/* Captions: two styles, asked in one line each */
.tx-caps { display: flex; justify-content: center; gap: var(--s4); }
.tx-caps figure { margin: 0; width: 168px; }
.tx-caps img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-short); box-shadow: var(--sh-2); }
.tx-caps figcaption { margin-top: var(--s2); text-align: center; text-wrap: balance; font-size: 16px; font-weight: 600; color: var(--ink-2); }
/* Covers: three different ideas */
.tx-covers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.tx-covers img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-thumb); box-shadow: var(--sh-1); }
/* Posting: a week, best first */
.tx-post { display: grid; gap: var(--s3); }
.tx-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.tx-days li { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 16px; font-weight: 600; color: var(--ink-2); }
.tx-days img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-thumb); box-shadow: var(--sh-1); }
.tx-days .best img { box-shadow: 0 0 0 3px var(--yellow); }
.tx-days em { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font: 700 16px/24px var(--font); font-style: normal; padding: 0 9px; border-radius: var(--r-pill); background: var(--yellow); color: var(--ink); }
.tx-where { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; margin: 0; font-size: 16px; font-weight: 600; color: var(--ink-2); }
.tx-where .ico { width: 20px; height: 20px; color: var(--green-3); }
.tx-where > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Level the sound: an uneven wave becomes one level */
.tx-sound { display: grid; gap: var(--s2); }
.tx-wave { position: relative; display: flex; align-items: center; gap: 3px; height: 120px; }
.tx-wave i { flex: 1 1 0; min-width: 0; height: calc(var(--h) * 100%); border-radius: 3px; background: var(--green-3); transition: height .9s var(--ease), background-color .9s ease; }
.tx-wave i.q { background: #9cb8a9; }
.tx-wave i.l { background: var(--red); }
.tx-wave::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 2px dashed rgba(22, 21, 18, .25); opacity: 0; transition: opacity .6s ease; }
.tx-sound.on .tx-wave i { height: calc(var(--e) * 100%); background: var(--green-3); }
.tx-sound.on .tx-wave::after { opacity: 1; }
.tx-keys { position: relative; height: 24px; margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.tx-keys span { position: absolute; top: 0; transition: opacity .5s ease; white-space: nowrap; }
.tx-keys .q { left: 8%; color: #5d7f6d; }
.tx-keys .l { left: 58%; color: var(--red); }
.tx-keys .e { left: 50%; transform: translateX(-50%); color: var(--green-3); opacity: 0; }
.tx-sound.on .tx-keys .q, .tx-sound.on .tx-keys .l { opacity: 0; }
.tx-sound.on .tx-keys .e { opacity: 1; }
@media (max-width: 719px) {
  .tx-s { width: 112px; }
  .tx-ba { gap: var(--s3); }
  .tx-flow { flex-direction: column; gap: 6px; }
  .ex-fig.tx-flow .tx-arr { transform: rotate(90deg); width: 22px; height: 22px; margin: 0 0 0 11px; align-self: flex-start; }
  .tx-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "ic b" "ic s"; justify-items: start; column-gap: var(--s3); row-gap: 0; width: 100%; text-align: left; }
  .tx-step .tx-ic { grid-area: ic; width: 44px; height: 44px; margin: 0; }
  .tx-step b { grid-area: b; }
  .tx-step > span:last-child { grid-area: s; }
  .tx-script { gap: 8px; }
  .tx-script p { font-size: 16px; }
  .tx-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tx-lanes li { grid-template-columns: auto auto; grid-template-areas: "ic n" "s s"; justify-content: center; align-items: center; column-gap: 8px; padding: 10px 8px; }
  .tx-lanes .ico { grid-area: ic; }
  .tx-lanes b { grid-area: n; font-size: 24px; }
  .tx-lanes span { grid-area: s; }
  .tx-sum b { font-size: 34px; }
  .tx-scores li { column-gap: var(--s2); padding: 8px 10px; }
  .tx-face { gap: var(--s2); }
  .ex-fig.tx-face .tx-arr { width: 22px; height: 22px; }
  .tx-tall { width: 84px; }
  .tx-caps figure { width: 128px; }
  .tx-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tx-covers img:first-child { grid-column: 1 / -1; }
  .tx-days { gap: 6px; }
  .tx-days em { bottom: 6px; padding: 0 6px; }
  .tx-wave { height: 96px; gap: 2px; }
}
@media (max-width: 719px) and (max-height: 700px) {
  .tx-s { width: 96px; }
  .tx-caps figure { width: 104px; }
  .tx-wave { height: 80px; }
  .tx-scores img { height: 60px; }
  .tx-scores { gap: 6px; }                    /* RU: the thrown-out title runs to three lines; the card fits 375×667 unscrolled */
  .tx-scores li { padding-top: 6px; padding-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) { .tx-step { opacity: 1; } .tx-wave i, .tx-keys span, .tx-script s, .tx-bar i { transition: none !important; } }