/* 01 Hero (v12.4, Russian: variant A, "the real app, compact", the founder's pick; the English hero's css/01-hero.css
   (1ad0858) with the Russian fits below). The line and one session in the buyer's app. A stranger who never saw Claude
   Code reads it as a plain chat: the file and one message on the right, the assistant's name and its to-dos on the
   left (in Russian: what it is doing now, then his «Готово: ролик, шортсы и обложки.»), a divider for the time that passed («Через 40
   минут», the clock's hands turn while it works), then one reply with four labelled rows, each a link to the chapter
   that shows how. People who use the app recognise its quiet chrome, which stays English as the app shows it: the
   title bar with the collapsed sidebar, the session's name and its folder, the input box with "Type / for commands"
   and its model controls (Codex: white, rounder, a dark send button, GPT-5.5). The layout is reserved from the start
   (the final state is the markup), so nothing reflows while it plays: things only appear and land.
   Laptop (1000 px and up): the line, the lead, the helper link, the button, the trust line and the app switch in the
   left column; the window on the right as tall as the screen allows, its media shrinking with the height so the whole
   conversation fits. One column: headline, the sub, the window (on the first screen with the headline and the sub,
   down to 375x667 and 390x664 by the compact path), then the switch and «Ещё раз», the lead, the link, the button and
   the trust line. Russian lengths: the last block of this file. */

section.ch.hero { padding: clamp(14px, 2.4vh, 28px) 0 var(--pad-y); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "h1" "sub" "app" "ctl" "lead" "what" "cta" "proof"; align-items: start; }
.hero h1 { grid-area: h1; margin: 0; font-size: clamp(38px, 10.8vw, 68px); line-height: .98; }
/* The sub under the headline (one column only): what it is and what it costs, before the window (round 2 fix). Gated
   by width only (round 3: Safari's 390x664 with its bars hid it); short phones pay for it with the compact path below,
   never by hiding it. The lead then drops its first sentence, which says the same. */
.hero .h-sub { grid-area: sub; margin: 8px 0 0; font-size: clamp(16px, 4.36vw, 19px); line-height: 1.3; font-weight: 500; color: var(--ink-2); }
.hero .h-sub b { font-weight: 700; color: var(--ink); }
.hero .lead { grid-area: lead; max-width: 36em; margin: var(--s5) 0 0; font-size: 18px; line-height: 1.45; }
.hero .lead b { font-weight: 700; color: var(--ink); }
.hero .lead-what { display: none; }
.hero .nw { white-space: nowrap; }
.hero .h-what { grid-area: what; justify-self: start; margin-top: var(--s2); }
.hero .cta { grid-area: cta; margin-top: var(--s4); flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
.hero .cta .btn { white-space: nowrap; }
.hero .cta-fine { line-height: 1.35; }
.hero-proof { grid-area: proof; display: flex; align-items: center; gap: 14px; max-width: 34em; margin: var(--s5) 0 0; font-size: 17px; line-height: 1.4; font-weight: 500; color: var(--ink-2); text-wrap: pretty; }
.hero-proof b { font-weight: 700; color: var(--ink); }   /* whose channel: the name leads (round 2 fix) */
.hero-proof img { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line-2); }
.hero-stage { grid-area: app; min-width: 0; margin-top: 12px; }

/* Which app (the switch) and Replay: under the window in one column, under the trust line on a laptop */
.hero-ctl { grid-area: ctl; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); margin-top: var(--s5); }
/* The white thumb is sized and placed from the selected button itself (js/01-hero.js sets --sk-x / --sk-w and adds
   .sk-js), so it always covers its label whatever the columns come out as (RU fix round 2: on phones the halves came
   out 137 and 95 px and «Claude Code» ran past a 50 % thumb). Without JS the selected button paints itself. */
.app-skin { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: var(--r-ctl); background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.app-skin::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--sk-w, calc(50% - 4px)); transform: translateX(var(--sk-x, 4px)); border-radius: 10px; background: var(--card); box-shadow: var(--sh-1); }
.app-skin.sk-on::before { transition: transform .35s var(--ease), width .35s var(--ease); }
.app-skin:not(.sk-js)::before { display: none; }
.app-skin:not(.sk-js) button[aria-selected="true"] { background: var(--card); box-shadow: var(--sh-1); }
.app-skin button { position: relative; min-height: 44px; padding: 0 20px; white-space: nowrap; border: 0; border-radius: 10px; background: none; font: 600 16px/1 var(--font); color: var(--muted); cursor: pointer; transition: color .2s; }
.app-skin button:hover, .app-skin button[aria-selected="true"] { color: var(--ink); }
.hero:not(.skin-cx) [data-cx], .hero.skin-cx [data-cc] { display: none !important; }

@media (min-width: 720px) {
  .hero .cta { flex-direction: row; align-items: center; gap: var(--s4); text-align: left; }
  .hero .cta-fine { max-width: 12em; }
}

/* ---------- Laptop: two columns, the window as tall as the screen allows ---------- */
@media (min-width: 1000px) {
  .hero-in { grid-template-columns: minmax(0, clamp(380px, 34vw, 470px)) minmax(0, 1fr); column-gap: clamp(36px, 3.8vw, 60px);
    grid-template-rows: 1fr auto auto auto auto auto auto 1.2fr;
    grid-template-areas: ". app" "h1 app" "lead app" "what app" "cta app" "proof app" "ctl app" ". app"; }
  .hero h1 { font-size: clamp(54px, 4.7vw, 70px); line-height: .95; }
  .hero .h-sub { display: none; }
  .hero .lead-what { display: inline; }
  .hero .lead { margin-top: var(--s4); font-size: clamp(18px, 1.4vw, 20px); }
  .hero .h-what { margin-top: 6px; }
  .hero .cta { margin-top: var(--s3); }
  .hero-proof { margin-top: var(--s5); }
  .hero-ctl { justify-content: flex-start; margin-top: var(--s4); }
  .hero-stage { margin-top: 0; }
  .hero .app { --app-h: clamp(560px, calc(100svh - var(--head) - 44px), 760px); height: var(--app-h); }
}

/* ---------- The window ---------- */
.app { --w-bg: #faf9f5; --w-line: #e8e6e0; --w-card: #fff; --w-soft: #f3f2ee; --w-t0: #141413; --w-t2: #3d3d3a; --w-t4: #66655e; --w-accent: #d97757; --w-ok: var(--ok);
  --mh: 54px;      /* the height of a result row's media */
  --lab: 186px;    /* the rows' label column (laptops, tablets) */
  position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--w-bg); color: var(--w-t0); border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 34px 70px -34px rgba(40, 34, 20, .34), 0 4px 14px rgba(0, 0, 0, .04);
  font: 400 15px/1.45 var(--app-font); -webkit-font-smoothing: antialiased; }
.skin-cx .app { --w-bg: #fff; --w-line: #ececec; --w-soft: #f4f4f4; --w-t0: #1a1c1f; --w-t2: #4d4d4d; --w-t4: #7c7c7c; --w-accent: #1a1c1f; }
.app .ico { width: 16px; height: 16px; stroke-width: 1.7; flex: none; }
.app .glyph-cc, .app .glyph-cx { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; }
.app .glyph-cc { color: #d97757; }
.app .glyph-cx { color: #1a1c1f; }

/* Title bar: the lights and the collapsed sidebar, the session's name and the folder it works in. Nothing else. */
.app .a-bar { flex: none; display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 16px; color: var(--w-t4); }
.app .a-left { display: flex; align-items: center; gap: 16px; flex: none; }
.app .lights { display: flex; gap: 8px; }
.app .lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18); }
.app .lights i:nth-child(2) { background: #febc2e; } .app .lights i:nth-child(3) { background: #28c840; }
.app .a-side { width: 18px; height: 18px; color: #9a988f; }
.app .a-nav { display: flex; gap: 10px; color: #7a7a7a; } .app .a-nav .off { color: #c4c4c4; }
.app .a-title { display: flex; align-items: center; gap: 9px; min-width: 0; margin: 0 0 0 4px; font-size: 14px; white-space: nowrap; }
.app .a-title b { font-weight: 500; color: var(--w-t0); overflow: hidden; text-overflow: ellipsis; }
.skin-cx .app .a-title b { font-weight: 600; }
.app .a-lap { color: var(--w-t4); }
.app .a-dir { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 6px; background: rgba(31, 30, 29, .055); font-size: 13px; color: var(--w-t4); }
.app .a-dir .ico { width: 14px; height: 14px; }
.skin-cx .app .a-dir { background: none; padding: 0 0 0 2px; }

/* The conversation */
.app .chat { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 6px 28px 8px; }
.app .col { width: 100%; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; }

/* Your side: the file you attached and one message, right-aligned in the app's grey bubble (base.css tokens) */
.app .h-you { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 92%; transform-origin: 100% 100%; }
/* «Ты»: who wrote it, a quiet label on the file chip's row (Codex's version had it; it costs no height) */
.app .h-you-hd { display: flex; align-items: center; gap: 10px; }
.app .who-me { font-size: 14px; font-weight: 600; color: var(--w-t2); }
.app .att { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 9px; border-radius: 9px; background: var(--w-card); box-shadow: 0 0 0 1px rgba(31, 30, 29, .13); font-size: 14px; white-space: nowrap; }
.app .att .ico { color: #d97757; }
.skin-cx .app .att { border-radius: 999px; }
.skin-cx .app .att .ico { color: #1a1c1f; }
.app .att b { font-weight: 500; }
.app .att > span { margin-left: 2px; color: var(--w-t4); }
.app .chat .me { margin: 0; max-width: 100%; padding: 9px 15px; border-radius: 14px 14px 4px 14px; font-size: 16px; line-height: 1.45; font-weight: 500; text-wrap: pretty; }
.skin-cx .app .chat .me { border-radius: 18px 18px 6px 18px; }
.app .me.sent { animation: h01-sent 1s var(--ease) both; }
@keyframes h01-sent { 0% { box-shadow: 0 0 0 0 rgba(217, 119, 87, .5); } 45% { box-shadow: 0 0 0 6px rgba(217, 119, 87, .2); } 100% { box-shadow: 0 0 0 11px rgba(217, 119, 87, 0); } }
.skin-cx .app .me.sent { animation-name: h01-sent-cx; }
@keyframes h01-sent-cx { 0% { box-shadow: 0 0 0 0 rgba(26, 28, 31, .35); } 100% { box-shadow: 0 0 0 11px rgba(26, 28, 31, 0); } }

/* Its side: the name, and one line: while it works, what it is doing and the count («Вырезаю дубли и паузы… 1 из 5»);
   when it is done, the check and his sentence «Готово: ролик, шортсы и обложки.» in its place (Codex's reply, kept) */
.app .h-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; min-height: 26px; margin-top: 14px; }
.app .who { margin: 0; font-size: 14px; font-weight: 600; color: var(--w-t0); }
.app .who span { display: inline-flex; align-items: center; gap: 7px; }
.app .h-todo { display: flex; align-items: center; gap: 7px; height: 26px; margin: 0; font-size: 14px; color: var(--w-t4); white-space: nowrap; }
.app .t-ic { position: relative; width: 16px; height: 16px; flex: none; }
.app .t-ok { position: absolute; inset: 0; width: 16px; height: 16px; fill: none; stroke: var(--w-ok); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app .t-spin { display: none; position: absolute; inset: 1px; border-radius: 50%; border: 2px solid #e3e1da; border-top-color: var(--w-accent); animation: h01-turn .8s linear infinite; }
.app .h-ai.working .t-ok { display: none; }
.app .h-ai.working .t-spin { display: block; }
.app .h-ai.working .who .glyph-cc { animation: h01-turn 1.6s linear infinite; }   /* Claude Code: its own mark turns while it works */
.app .t-step, .app .t-n { display: none; }
.app .t-n { margin-left: 3px; }
.app .t-step { color: var(--w-t2); }   /* js gives it the widest line's width, so the count after it never moves */
.app .h-ai.working .t-step:not(:empty) { display: inline-block; }
.app .h-ai.working .t-n { display: inline; }
.app .h-ai.working .t-done { display: none; }
.app .t-done { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--w-t0); }
@keyframes h01-turn { to { transform: rotate(360deg); } }

/* The divider: the time that passed while you were out (the minutes count while it works) */
.app .h-later { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; font-size: 14px; color: var(--w-t2); }
.app .h-later::before, .app .h-later::after { content: ""; flex: 1; height: 1px; background: var(--w-line); }
.app .h-later-in { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 13px 0 10px; border-radius: 999px; background: rgba(31, 30, 29, .045); white-space: nowrap; }
.app .h-clock { width: 16px; height: 16px; fill: none; stroke: var(--w-t2); stroke-width: 1.8; stroke-linecap: round; flex: none; }
.app .h-clock path { transform-origin: 12px 12px; }
.app .h-later.spin .hand-m { animation: h01-turn .5s linear infinite; }
.app .h-later.spin .hand-h { animation: h01-turn 6s linear infinite; }
.app .h-later b { display: inline-block; min-width: 1.25em; font-weight: 700; color: var(--w-t0); text-align: right; }   /* the count keeps its width: the divider doesn't twitch */

/* What came back: four labelled rows in one card. Each row is a link to the chapter that shows how (a quiet chevron
   after its name; hover tints the row and warms the chevron, nothing moves). */
.app .h-res { position: relative; isolation: isolate; display: flex; flex-direction: column; margin-top: 12px; padding: 0; }
/* the card itself is a layer under the rows, as tall as the rows that have landed (--rh, set while it plays), so it
   grows with them, its ring and corners whole, instead of showing an empty white box under the first row */
.app .h-res::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: var(--rh, 100%); border-radius: 12px; background: var(--w-card); box-shadow: 0 0 0 1px rgba(31, 30, 29, .1), 0 1px 2px rgba(31, 30, 29, .04); }
.skin-cx .app .h-res::before { box-shadow: 0 0 0 1px rgba(0, 0, 0, .09); }
.js .app .h-res::before { transition: height .34s var(--ease); }
.app .r { position: relative; display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); align-items: center; column-gap: 16px; padding: 10px 14px; color: inherit; text-decoration: none; cursor: pointer; transition: background-color .2s; }
.app .r:first-child { border-radius: 12px 12px 0 0; } .app .r:last-child { border-radius: 0 0 12px 12px; }
.app .r + .r::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: var(--w-line); }
.app .r:hover { background-color: rgba(31, 30, 29, .03); }
.app .r:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: 10px; }
.app .r-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.app .r-txt > b { display: flex; align-items: center; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--w-t0); }
.app .r-txt > span { display: flex; align-items: center; flex-wrap: wrap; gap: 0 5px; font-size: 13.5px; line-height: 1.35; color: var(--w-t4); }
.app .r-go { width: 15px; height: 15px; margin-left: 1px; stroke-width: 2.2; color: #a19f97; transition: color .2s; }
.app .r:hover .r-go, .app .r:focus-visible .r-go { color: var(--w-accent); }
.app .r-m { height: var(--mh); min-width: 0; }
.app .r img { display: block; object-fit: cover; }

/* 1. The edit: the video plays; beside it the length counts down while a playhead runs along the real cut map of the
   47-minute recording and marks each cut in red as it passes (the long ones at their true width, the many short
   retakes and pauses only in the count); then the old length gets the logo's yellow slash. It rests as a timeline
   with cuts all through it, not as a bar filled to 70 % (round 2 fix). */
.app .r-edit { grid-template-columns: var(--lab) auto minmax(0, 1fr); }
.app .r-vid { width: calc(var(--mh) * 16 / 9); height: var(--mh); border-radius: 7px; box-shadow: 0 0 0 1px rgba(31, 30, 29, .1); }
.app .r-vid.is-loading::before { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-width: 2px; }
.app .r-vid.needs-tap::after { width: 28px; height: 28px; margin: -14px 0 0 -14px; background-size: 13px; }
.app .r-cut { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.app .r-len { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; line-height: 1.2; color: var(--w-t0); }
.app .r-len .ico { width: 14px; height: 14px; color: var(--w-t4); }
.app .r-len s { position: relative; text-decoration: none; color: var(--w-t4); }
.app .r-len s::after { content: ""; position: absolute; left: -1px; right: -1px; top: 50%; height: 2.5px; margin-top: -1px; border-radius: 2px; background: var(--yellow); transform: rotate(-19deg) scaleX(var(--cut, 1)); transform-origin: 50% 50%; transition: transform .35s var(--ease) .25s; }
.app .r-to { display: inline-block; font-size: 17px; font-weight: 700; text-align: right; }
.app .r-map { --hair: 1.5px; position: relative; display: block; height: 8px; border-radius: 4px; background: var(--green-3); overflow: hidden; }
.app .r-map i { position: absolute; top: 0; bottom: 0; }
.app .r-map .x { background: var(--red); transform-origin: 0 50%; }
.app .r-map .ph { width: 2px; margin-left: -1px; background: var(--yellow); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25); opacity: 0; }
/* not drawn by the script (no JS): the cuts of 12 s or more at their real places */
.app .r-map:empty { background: linear-gradient(to right, var(--red) 0.0% 4.2%, var(--green-3) 4.2% 4.6%, var(--red) 4.6% 5.0%, var(--green-3) 5.0% 5.9%, var(--red) 5.9% 6.3%, var(--green-3) 6.3% 8.9%, var(--red) 8.9% 9.8%, var(--green-3) 9.8% 18.1%, var(--red) 18.1% 19.0%, var(--green-3) 19.0% 23.3%, var(--red) 23.3% 23.8%, var(--green-3) 23.8% 24.9%, var(--red) 24.9% 25.4%, var(--green-3) 25.4% 31.7%, var(--red) 31.7% 32.3%, var(--green-3) 32.3% 35.6%, var(--red) 35.6% 36.5%, var(--green-3) 36.5% 39.9%, var(--red) 39.9% 40.6%, var(--green-3) 40.6% 41.8%, var(--red) 41.8% 42.5%, var(--green-3) 42.5% 43.1%, var(--red) 43.1% 44.1%, var(--green-3) 44.1% 53.3%, var(--red) 53.3% 54.4%, var(--green-3) 54.4% 56.2%, var(--red) 56.2% 57.5%, var(--green-3) 57.5% 62.5%, var(--red) 62.5% 63.0%, var(--green-3) 63.0% 66.9%, var(--red) 66.9% 68.6%, var(--green-3) 68.6% 69.4%, var(--red) 69.4% 71.5%, var(--green-3) 71.5% 72.3%, var(--red) 72.3% 73.5%, var(--green-3) 73.5% 74.2%, var(--red) 74.2% 75.0%, var(--green-3) 75.0% 84.1%, var(--red) 84.1% 84.7%, var(--green-3) 84.7% 88.0%, var(--red) 88.0% 89.5%, var(--green-3) 89.5% 90.2%, var(--red) 90.2% 90.7%, var(--green-3) 90.7% 93.2%, var(--red) 93.2% 94.2%, var(--green-3) 94.2% 96.3%, var(--red) 96.3% 98.5%, var(--green-3) 98.5%); }

/* 2. The shorts: the real keepers, best first, as many whole frames as the row holds (the count is in the label) */
.app .r-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--mh) * 9 / 16), 1fr)); grid-template-rows: var(--mh); grid-auto-rows: var(--mh); gap: 6px; overflow: hidden; }
.app .r-strip img { width: 100%; height: var(--mh); border-radius: 5px; background: #e6e3da; }
/* the count of the rest over the last whole frame (Codex's «+30»): js places it on the last frame the row holds and
   counts the rest from data-total (8 frames on a laptop: «+25»; 3 on a phone: «+30»), so the 33 reads at a glance */
.app .r-strip { position: relative; }
.app .r-more { display: none; position: absolute; place-items: center; border-radius: 5px; background: rgba(20, 20, 19, .56); font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: -.01em; color: #fff; }
.app .r-strip.has-more .r-more { display: grid; }

/* 3. The covers: three different ideas, dealt from one pile; on a laptop a row (the look-alike two apart, the main
   pick in the middle), on a phone a fanned deck with the main pick on top */
/* the row spreads to both ends of the media column, on the strip's and the slots' lines (review: it stopped 7 px short
   at 1440 and 1512), but never by more than 24 px gaps: a wide, short window (1280x720) keeps the three together */
.app .r-cv { display: flex; justify-content: space-between; gap: 8px; max-width: calc(var(--mh) * 16 / 9 * 3 + 48px); }
.app .r-cv img { flex: 0 1 calc(var(--mh) * 16 / 9); min-width: 0; height: auto; max-height: var(--mh); aspect-ratio: 16 / 9; align-self: center; border-radius: 6px; box-shadow: 0 0 0 1px rgba(31, 30, 29, .1); }
.app .r-cv img:nth-child(1) { order: 2; } .app .r-cv img:nth-child(2) { order: 1; } .app .r-cv img:nth-child(3) { order: 3; }

/* 4. The posts, at chapter 12's hours (three a day, best first): each slot with its short, its time and its real
   title, and a tick once it is set. The list is as tall as the other media; a narrow row drops the titles rather than
   cutting one (a container query), never a cut title. */
.app .po-logo { flex: none; }
.app .po-logo.yt { width: 18px; height: 13px; }
.app .po-logo.ig { width: 14px; height: 14px; margin-right: 1px; }
.app .r-post .r-txt > span { flex-wrap: nowrap; gap: 0 4px; white-space: nowrap; }   /* the logos stay with their words */
.app .r-days { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); container: h01d / inline-size; }
.app .d { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 9px; min-height: 0; }
.app .d img { height: calc(var(--mh) / 3 - 3px); width: auto; aspect-ratio: 9 / 16; border-radius: 2px; background: #e6e3da; }
.app .d-at { font-size: 13px; font-weight: 600; color: var(--w-t2); white-space: nowrap; }
.app .d-day { font-weight: 500; color: var(--w-t4); }
.app .d-t { min-width: 0; font-size: 13px; font-weight: 500; color: var(--w-t0); white-space: nowrap; overflow: hidden; }
.app .d-ok { width: 14px; height: 14px; color: var(--w-ok); }
@container h01d (max-width: 300px) { .app .d { grid-template-columns: auto minmax(0, 1fr) auto; } .app .d-t { display: none; } }

/* The input box at the bottom, as in the app: the file attached, "Type / for commands", and the quiet row of controls
   under it (Claude Code: Auto, +, mic … Opus 5, Max; Codex: one card with the controls inside, GPT-5.5, Medium) */
.app .composer { flex: none; padding: 6px 28px 12px; }
.app .composer .col { gap: 6px; }
.app .c-box { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px 6px 12px; background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px rgba(31, 30, 29, .13), 0 1px 2px rgba(31, 30, 29, .04); font-size: 16px; }
.app .c-att { display: none; flex: none; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 8px; border-radius: 8px; background: #f3f2ee; box-shadow: 0 0 0 1px rgba(31, 30, 29, .08); font-size: 14px; font-weight: 500; }
.app .c-att .ico { width: 14px; height: 14px; color: #d97757; }
.app .composer.has-att .c-att { display: inline-flex; }
.app .c-in { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.app .c-typed { flex: none; color: var(--w-t0); }
.app .c-car { display: none; flex: none; width: 2px; height: 20px; margin: 0 1px; background: var(--w-t0); }
.app .composer.focus .c-car { display: block; animation: ask-blink 1s steps(1) infinite; }
.app .composer.is-typing .c-car { animation: none; }
.app .c-ph { color: #a3a198; }
.app .composer.is-typing .c-ph { display: none; }
.app .c-enter { flex: none; color: #b3b1aa; transition: color .2s; }
.app .composer.is-typing .c-enter { color: var(--w-t0); }
.app .c-row { display: flex; align-items: center; gap: 14px; height: 24px; padding: 0 8px 0 12px; font-size: 14px; color: var(--w-t2); white-space: nowrap; }
.app .c-row .ico { color: var(--w-t4); }
.app .c-sp { flex: 1; }
.app .c-ring { flex: none; width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(#2f7cf6 0 13%, #d6dae0 13% 100%); -webkit-mask: radial-gradient(circle, transparent 4.6px, #000 5.1px); mask: radial-gradient(circle, transparent 4.6px, #000 5.1px); }
.app .c-loc { display: inline-flex; align-items: center; gap: 6px; color: var(--w-t4); }
.app .c-send { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #8e8e8e; color: #fff; display: grid; place-items: center; transition: background .2s; }
.app .c-send .ico { width: 15px; height: 15px; color: #fff; stroke-width: 2.3; }
.app .composer.is-typing .c-send { background: #1a1c1f; }
.app .c-send-in { display: none; }
/* Codex: one white card, the line you type in on top, the controls inside it */
.skin-cx .app .composer .col { gap: 2px; padding: 4px 8px 4px 12px; background: #fff; border-radius: 20px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 2px 8px rgba(0, 0, 0, .04); }
.skin-cx .app .c-box { min-height: 40px; padding: 4px 4px 4px 2px; background: none; box-shadow: none; border-radius: 0; }
.skin-cx .app .c-att { border-radius: 999px; background: #f4f4f4; }
.skin-cx .app .c-att .ico { color: #1a1c1f; }
.skin-cx .app .c-row { height: 26px; padding: 0 0 0 2px; color: #8a8a8a; }
.skin-cx .app .c-row .ico { color: #8a8a8a; }

/* The laptop window: its media shrink with its height, so the whole conversation always fits it */
@media (min-width: 1000px) {
  .hero .app { --mh: clamp(46px, calc((var(--app-h) - 412px) / 4), 82px); --lab: clamp(180px, 13.4vw, 190px); }
}
@media (min-width: 1000px) and (max-width: 1180px) {
  .hero .app .chat, .hero .app .composer { padding-left: 20px; padding-right: 20px; }
  .hero .app .r { column-gap: 12px; }
  /* a narrow left column: the switch a little tighter and Replay the round arrow alone (its word stays for screen
     readers), so the row never wraps when Replay appears */
  .hero-ctl { gap: var(--s2) var(--s3); }
  .app-skin button { padding: 0 14px; }
  .hero-ctl .app-again { width: 44px; justify-content: center; border-radius: 50%; background: var(--soft); text-decoration: none; }
  .hero-ctl .app-again .ag-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero-ctl .app-again .ico { width: 20px; height: 20px; }
}
/* Short laptop screens (1366x768, 1280x720 with the browser's bars): the controls row under the box goes */
@media (min-width: 1000px) and (max-height: 760px) {
  .hero .app .c-row { display: none; }
  .hero .app { --mh: clamp(44px, calc((var(--app-h) - 384px) / 4), 66px); }
}

/* ---------- Playing it: with JS the final state is hidden and each piece appears in order (js/01-hero.js) ---------- */
.js .app [data-h] { transition: opacity .45s var(--ease), transform .5s var(--ease); }
.js .app .r[data-h] { transition: opacity .45s var(--ease), transform .5s var(--ease), background-color .2s; }
.js .app .r[data-h].on + .r[data-h].on, .js .app .r[data-h].on ~ .r[data-h].on { transition-delay: .12s, .12s, 0s; }   /* a row comes in once the card has grown under it */
.js .app:not(.h-shown) [data-h]:not(.on) { opacity: 0; transform: translateY(10px); pointer-events: none; }
/* the shorts come in one after another, best first */
.js .app .r-strip img { transition: opacity .35s ease, transform .45s var(--ease); }
.js .app:not(.h-shown) .r-shorts:not(.on) .r-strip img { opacity: 0; transform: translateX(10px); }
.js .app .r-shorts.on .r-strip img:nth-child(2) { transition-delay: 50ms; } .js .app .r-shorts.on .r-strip img:nth-child(3) { transition-delay: 100ms; }
.js .app .r-shorts.on .r-strip img:nth-child(4) { transition-delay: 150ms; } .js .app .r-shorts.on .r-strip img:nth-child(5) { transition-delay: 200ms; }
.js .app .r-shorts.on .r-strip img:nth-child(6) { transition-delay: 250ms; } .js .app .r-shorts.on .r-strip img:nth-child(7) { transition-delay: 300ms; }
.js .app .r-shorts.on .r-strip img:nth-child(n+8) { transition-delay: 350ms; }
.js .app .r-more { transition: opacity .3s ease .4s; }
.js .app:not(.h-shown) .r-shorts:not(.on) .r-more { opacity: 0; transition-delay: 0s; }
/* the covers: one pile on the main pick, then dealt to their places */
.js .app .r-cv img { transition: opacity .3s var(--ease), transform .55s var(--ease); }
.js .app:not(.h-shown) .r-covers:not(.on) .r-cv img { opacity: 0; }
.js .app:not(.h-shown) .r-covers:not(.dealt) .r-cv img { transform: translate(var(--dx, 0), var(--dy, 0)) scale(var(--ps, 1)); }
.js .app .r-covers.dealt .r-cv img:nth-child(3) { transition-delay: .08s; }
/* the posts fill slot by slot, each gets its tick */
.js .app .d { transition: opacity .35s var(--ease), transform .45s var(--ease); }
.js .app .d-ok { transition: opacity .25s var(--ease), transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.js .app:not(.h-shown) .r-post:not(.on) .d { opacity: 0; transform: translateY(5px); }
.js .app:not(.h-shown) .r-post:not(.on) .d-ok { opacity: 0; transform: scale(.3); }
.js .app .r-post.on .d:nth-child(1) { transition-delay: .1s; } .js .app .r-post.on .d:nth-child(2) { transition-delay: .26s; } .js .app .r-post.on .d:nth-child(3) { transition-delay: .42s; }
.js .app .r-post.on .d:nth-child(1) .d-ok { transition-delay: .26s; } .js .app .r-post.on .d:nth-child(2) .d-ok { transition-delay: .42s; } .js .app .r-post.on .d:nth-child(3) .d-ok { transition-delay: .58s; }
/* the edit: the length counts at its place; the old length and the arrow appear after, and the slash strikes it */
.js .app .r-len s, .js .app .r-len .ico { transition: opacity .3s var(--ease); }
.js .app:not(.h-shown) .r-edit:not(.cut-done) .r-len s, .js .app:not(.h-shown) .r-edit:not(.cut-done) .r-len .ico { opacity: 0; }
.js .app:not(.h-shown) .r-edit:not(.cut-done) .r-len s { --cut: 0; }
.app.h-snap, .app.h-snap *, .app.h-snap .h-res::before { transition: none !important; }   /* reset: one cut, no fading leftovers (* does not reach the card's ::before: without it the card glided from full height to its first row while fading in) */
@media (prefers-reduced-motion: reduce) { .js .app .h-res::before, .js .app [data-h], .js .app .r-strip img, .js .app .r-more, .js .app .r-cv img, .js .app .d, .js .app .d-ok, .js .app .r-len *, .app .r-len s::after, .app .me.sent, .app-skin::before, .app .h-clock path { transition: none !important; animation: none !important; } }

/* ---------- One column, phones: the window's rows as compact two-column rows (the media left, the words right) ---------- */
@media (max-width: 719px) {
  section.ch.hero { padding-top: 14px; }
  .hero h1 { font-size: clamp(38px, 10.8vw, 46px); }
  .hero-ctl { margin-top: var(--s4); }
  .hero .lead { margin-top: var(--s4); }

  .app { --mh: 52px; --mc: clamp(100px, 28vw, 112px); }
  .app .a-bar { height: 38px; gap: 10px; padding: 0 12px; }
  .app .lights { gap: 6px; } .app .lights i { width: 10px; height: 10px; }
  .app .a-side, .app .a-lap, .app .a-nav { display: none; }
  .app .a-title { gap: 8px; margin-left: 2px; }
  .app .a-dir { height: 22px; padding: 0 7px; font-size: 13px; }   /* the folder stays: it names the product (round 2 fix) */
  .skin-cx .app .a-dir { padding: 0; }
  .app .chat { padding: 4px 12px 4px; }
  .app .h-you { gap: 5px; max-width: 95%; }
  .app .att { height: 28px; font-size: 13px; padding: 0 10px 0 8px; gap: 6px; }
  .app .chat .me { padding: 8px 13px; font-size: 16px; line-height: 1.4; }
  .app .h-ai { gap: 0 12px; margin-top: 10px; min-height: 24px; }
  .app .h-todo { height: 24px; }
  .app .h-later { gap: 10px; margin-top: 8px; font-size: 13.5px; }
  .app .h-later-in { height: 26px; padding: 0 11px 0 8px; gap: 6px; }
  .app .h-clock { width: 15px; height: 15px; }
  .app .h-res { margin-top: 8px; }
  .app .r, .app .r-edit { grid-template-columns: var(--mc) minmax(0, 1fr); column-gap: 12px; padding: 7px 12px; }
  .app .r + .r::before { left: 12px; right: 12px; }
  .app .r-txt { grid-column: 2; grid-row: 1; }
  .app .r-m { grid-column: 1; grid-row: 1; }
  .app .r-txt > b { font-size: 15.5px; }
  /* the edit: the video left over both lines; the name, then the lengths and the map on the right */
  .app .r-edit .r-vid { grid-column: 1; grid-row: 1 / span 2; width: 100%; }
  .app .r-edit .r-txt { grid-row: 1; align-self: end; }
  .app .r-edit .r-txt > span { display: none; }
  .app .r-edit .r-cut { grid-column: 2; grid-row: 2; align-self: start; gap: 6px; padding-top: 3px; }
  .app .r-len { font-size: 14px; } .app .r-to { font-size: 15px; }
  .app .r-map { --hair: 1px; height: 6px; border-radius: 3px; }
  /* the shorts: the best three */
  .app .r-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .app .r-more { font-size: 14px; border-radius: 5px; }
  /* the covers: a fanned deck, the main pick on top; the two behind peek out at the top left, where their pictures
     are (a peeking right edge would show a fragment of their words) */
  .app .r-cv { position: relative; display: block; max-width: none; --cw: min(var(--mc) - 16px, (var(--mh) - 8px) * 16 / 9); }
  .app .r-cv img { position: absolute; left: 16px; top: calc((var(--mh) - var(--cw) * 9 / 16 - 8px) / 2 + 8px); width: var(--cw); max-height: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 3px 8px -3px rgba(0, 0, 0, .45); }
  .app .r-cv img:nth-child(1) { z-index: 3; }
  .app .r-cv img:nth-child(2) { z-index: 2; left: 8px; margin-top: -4px; }
  .app .r-cv img:nth-child(3) { z-index: 1; left: 0; margin-top: -8px; }
  /* the posts: three slots, Monday's hours over their shorts, each with its tick (the words say "3 a day, from Monday") */
  .app .r-days { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2px; container-type: normal; --tw: calc((var(--mh) - 16px) * 9 / 16); }
  .app .d { position: relative; grid-template-columns: none; grid-template-rows: auto minmax(0, 1fr); justify-items: center; row-gap: 3px; }
  .app .d-at { grid-row: 1; font-size: 11.5px; line-height: 13px; font-weight: 600; letter-spacing: -.01em; }
  .app .d-day, .app .d-t { display: none; }
  .app .d img { grid-row: 2; height: calc(var(--mh) - 16px); border-radius: 3px; }
  .app .d-ok { position: absolute; left: 50%; bottom: 0; width: 13px; height: 13px; margin-left: calc(var(--tw) / 2 - 8px); border-radius: 50%; box-shadow: 0 0 0 1.5px var(--w-card); }

  .app .composer { padding: 8px 10px 10px; }   /* the card and the input box don't touch (review: 8 px at 390x844) */
  .app .c-box { min-height: 44px; padding: 5px 12px 5px 10px; gap: 8px; }
  .app .c-att { height: 28px; font-size: 13px; padding: 0 8px 0 6px; }
  .app .c-row { display: none !important; }   /* a phone shows the box alone (the desktop app's controls don't fit) */
  .skin-cx .app .composer .col { padding: 0; border-radius: 24px; }
  .skin-cx .app .c-box { min-height: 46px; padding: 5px 6px 5px 12px; }
  .skin-cx .app .c-send-in { display: grid; width: 32px; height: 32px; }
}
@media (max-width: 374px) { .app .a-dir .ico { display: none; } }   /* narrow phones: the folder's name alone (RU: «Монтаж нового ролика» needs the room from 374 px down) */

/* ---------- Short phones (375x667, and 390x664: an iPhone in Safari with its bars): the headline, the sub and the
   whole window still on the first screen, tighter. RU: up to 820 px tall (the English stops at 780), because the
   Russian headline and message run longer – 360x800 needs this path too. ---------- */
@media (max-width: 719px) and (max-height: 820px) {
  section.ch.hero { padding-top: 10px; }
  .hero h1 { font-size: clamp(34px, 9.8vw, 40px); }
  .hero .h-sub { margin-top: 6px; font-size: 16px; line-height: 1.25; }
  .hero-stage { margin-top: 10px; }
  .app { --mh: 44px; }
  .app .a-bar { height: 32px; }
  .app .chat { padding: 2px 10px 2px; }
  .app .h-you { gap: 4px; }
  .app .att { height: 26px; }
  .app .chat .me { padding: 6px 12px; font-size: 15px; }
  .app .h-ai { margin-top: 5px; min-height: 22px; }
  .app .h-todo { height: 22px; }
  .app .h-later { margin-top: 3px; } .app .h-later-in { height: 22px; }
  .app .h-res { margin-top: 3px; }
  .app .r, .app .r-edit { padding: 5px 10px; column-gap: 10px; }
  .app .r + .r::before { left: 10px; right: 10px; }
  .app .r-edit .r-cut { gap: 4px; padding-top: 1px; }
  .app .r-txt > span { font-size: 13px; }
  .app .d-at { font-size: 11px; line-height: 12px; }
  .app .composer { padding: 8px 8px 6px; }   /* the card stays clear of the input box (review: 4 px); the room comes from the divider's and the card's margins */
  .app .c-box, .skin-cx .app .c-box { min-height: 38px; }
  .app .c-att { height: 26px; }
  .skin-cx .app .c-send-in { width: 30px; height: 30px; }
}

/* ---------- "New to Claude Code?": what these apps are, as a picture (the explainer sheet, base.js) ---------- */
.h01x { display: grid; gap: var(--s4); }
.h01x-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.15fr) 28px minmax(0, 1fr); align-items: stretch; gap: 6px; }
.h01x-node { display: grid; justify-items: center; align-content: start; gap: 4px; padding: var(--s3) 12px; border-radius: var(--r-ctl); background: var(--card); box-shadow: var(--sh-1); text-align: center; font-size: 16px; line-height: 1.3; color: var(--muted); }
.h01x-node b { margin-top: 6px; font-size: 17px; line-height: 1.25; color: var(--ink); }
.h01x-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--soft-2); color: var(--ink); }
.h01x-ic .ico { width: 22px; height: 22px; }
.h01x-app .h01x-ic { background: #f6e3da; color: #b9583a; }
.h01x-kit .h01x-ic { background: var(--green-soft); color: var(--green-3); }
.h01x-arrow { align-self: center; display: grid; place-items: center; color: var(--muted); }
.h01x-arrow .ico { width: 22px; height: 22px; }
.h01x-tools { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.h01x-tools li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--card); box-shadow: var(--sh-1); font-size: 16px; font-weight: 500; color: var(--ink-2); }
.h01x-tools .ico { width: 18px; height: 18px; color: var(--green-3); }
.js .h01x .h01x-node, .js .h01x .h01x-arrow, .js .h01x .h01x-tools li { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.js .h01x.go .h01x-node, .js .h01x.go .h01x-arrow, .js .h01x.go .h01x-tools li { opacity: 1; transform: none; }
.h01x.go .h01x-row > :nth-child(2) { transition-delay: .25s; } .h01x.go .h01x-row > :nth-child(3) { transition-delay: .4s; }
.h01x.go .h01x-row > :nth-child(4) { transition-delay: .65s; } .h01x.go .h01x-row > :nth-child(5) { transition-delay: .8s; }
.h01x.go .h01x-tools li { transition-delay: 1.05s; }
.h01x.go .h01x-tools li:nth-child(2) { transition-delay: 1.12s; } .h01x.go .h01x-tools li:nth-child(3) { transition-delay: 1.19s; }
.h01x.go .h01x-tools li:nth-child(4) { transition-delay: 1.26s; } .h01x.go .h01x-tools li:nth-child(5) { transition-delay: 1.33s; }
.h01x.go .h01x-tools li:nth-child(6) { transition-delay: 1.4s; }
@media (max-width: 719px) {
  .h01x { gap: var(--s2); }
  .h01x-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .h01x-node { grid-template-columns: 36px minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 12px; row-gap: 0; padding: 8px 12px; text-align: left; font-size: 16px; }
  .h01x-node b { margin: 0; font-size: 16px; }
  .h01x-node .h01x-ic { grid-row: 1 / 3; width: 36px; height: 36px; }
  .h01x-ic .ico { width: 19px; height: 19px; }
  .h01x-arrow { justify-self: start; height: 18px; margin-left: 20px; }
  .h01x-arrow .ico { width: 18px; height: 18px; rotate: 90deg; }
  .h01x-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .h01x-tools li { min-height: 32px; padding: 0 8px; gap: 5px; }
  .h01x-tools .ico { width: 16px; height: 16px; }
}
@media (max-width: 719px) and (max-height: 700px) { .h01x-node { padding: 5px 12px; } .h01x-arrow { height: 16px; } }
@media (prefers-reduced-motion: reduce) { .js .h01x * { transition: none !important; } }

/* ---------- Russian lengths (the English layout, re-fitted: Cyrillic in Onest sets about 10% wider) ----------
   Laptop: «Nightcut смонтирует.» never fits the 470 px column on one line, so the headline is three lines («Сними
   видео.» / «Nightcut» / «смонтирует.»), as on the founder's page before; it is set a size smaller, the lead a hair
   smaller, the line under the button two lines beside it and the trust line at 16 px, so the column (headline to the
   switch) still sits inside the window's height with air above and below at 1440x820 and 1512x860. */
@media (min-width: 1000px) {
  .hero h1 { font-size: clamp(48px, 4vw, 60px); }
  .hero .lead { margin-top: var(--s4); font-size: clamp(17px, 1.3vw, 19px); }   /* 24 px under the three-line headline, as the English page (review: 16 looked tight) */
  .hero .cta-fine { max-width: 15em; }
  .hero-proof { margin-top: var(--s4); font-size: 16px; }
  .hero-ctl { margin-top: var(--s3); }
}
/* a narrow left column (1000–1180 px): «Забронировать место» leaves the line beside it a 100 px sliver (five lines),
   so the line goes under the button */
@media (min-width: 1000px) and (max-width: 1180px) {
  .hero .cta { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero .cta-fine { max-width: none; }
}
/* The line while it works: the founder's status line and «2 из 5» beside the name. On a phone the line has no room
   for both (it would wrap and push the reply down mid-play), so the count stays out; the minutes on the divider
   carry the progress. */
@media (max-width: 719px) {
  .app .h-ai { flex-wrap: nowrap; }
  .app .h-todo { min-width: 0; }
  .app .h-ai.working .t-step:not(:empty) + .t-n { display: none; }
  /* Done, on a phone: his sentence needs the whole line beside the name (232 px of the 315 at 375 px), so the check
     goes and «Готово:» says it; the line never wraps under the name (that would push the card past the fold) */
  .app .h-ai:not(.working) .t-ic { display: none; }
  .app .t-done { font-size: 13.5px; font-weight: 400; }
}
@media (max-width: 374px) { .app .h-todo, .app .t-done { font-size: 13px; } .app .h-ai { column-gap: 8px; } }
/* Short phones (375x667, 390x664, 360x800): three headline lines and a three-line message would push the window's
   bottom past the fold, so the headline is set to keep «Nightcut смонтирует.» on one line (two lines in all), and the whole
   window is on the first screen with the headline and the sub, as on the English page. */
@media (max-width: 719px) and (max-height: 820px) {
  section.ch.hero { padding-top: 8px; }
  .hero h1 { font-size: clamp(28px, 8.7vw, 35px); }
  .hero-stage { margin-top: 8px; }
  /* the message is three lines in Russian (two in English): the window gives back those ~14 px – the title bar 2 px
     lower, the message's lines a hair closer, the results' media 1 px lower – and ends about 20 px above the fold */
  .app { --mh: 43px; }
  .app .a-bar { height: 30px; }
  .app .chat .me { line-height: 1.32; }
}
/* The explainer on a phone: the six Russian tool names need two rows, as the English, so the sheet still fits
   375x667 and 390x664 without scrolling inside it: under 400 px the pills drop their icons (the three steps above
   keep theirs) */
@media (max-width: 400px) {
  .h01x-tools { gap: 6px 5px; }
  .h01x-tools li { padding: 0 9px; }
  .h01x-tools .ico { display: none; }
}
/* The explainer sheet on phones: the founder's two lines under the figure are eleven lines in Russian (Codex pass,
   2026-10-04), so the figure gives back room and the sheet fits under its 85svh cap without scrolling inside – a
   tighter gap above the pills, shorter arrows, 30 px pills (390x844: 8 px were missing); on short phones (375x667,
   390x664: about 60 px) and the narrowest (360x800) the six tool pills stay out of the sheet: the Nightcut step above them and the line «Nightcut –
   папка с инструментами для монтажа» say what they said. Scoped to the sheet: the FAQ's copy of this figure
   (js/16-faq.js) keeps its pills and spacing. */
@media (max-width: 719px) and (max-height: 900px) {
  dialog.sheet .h01x { gap: 8px; }
  dialog.sheet .h01x-arrow { height: 14px; }
  dialog.sheet .h01x-arrow .ico { width: 16px; height: 16px; }
  dialog.sheet .h01x-tools li { min-height: 30px; }
}
@media (max-width: 719px) and (max-height: 700px), (max-width: 374px) {
  dialog.sheet .h01x-tools { display: none; }
}