/* /comment-to-dm (site-src/gen/dm/core.py, agent A): the signature, "public and private, at once", and the page's small
   step pictures. Class prefix cd-. Tokens from system.css; Instagram's colours only inside the phones (--ig-*). */

/* ───────────── the stage: the editor beside two phones, laid out at 1120 x 704 and scaled as one picture ───────────── */
.cd { margin: 0; }
/* an element shows from its beat. The first beat's elements are also there before the clock starts (before the script runs,
   before the scene scrolls into view), so the stage never paints empty and beat 0 moves nothing (H1); `gone` = past its data-x */
.cd [data-in]:not(.on):not([data-in='0']), .cd [data-in='0'].gone { display: none; }
.cd-box { position: relative; display: grid; justify-items: center; padding: var(--s-12) var(--s-6) var(--s-8); border-radius: var(--r-2xl); background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-card); overflow: clip; }
.cd-box::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-4) 32%, transparent) 1px, transparent 1.2px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); pointer-events: none; }
.cd-box { grid-template-columns: minmax(0, 1fr); }   /* the box names its column (KIT.md § 6.1); the kit's fit takes the padding off */
.cd-stage { font-family: var(--font); text-align: start; }
.cd.is-reset .cd-stage { opacity: 0.0; transition: opacity 0.6s var(--ease); }
.cd-stage > * { position: absolute; }
.cd-ed { left: 10px; top: 0; width: 420px; }
.cd-pa { left: 470px; top: 0; }
.cd-pb { left: 810px; top: 0; }
.cd-pcol { width: 300px; display: grid; gap: 12px; }
.cd-pl { margin: 0; height: 24px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 13px; font-weight: 650; color: var(--ink); white-space: nowrap; }
.cd-pl span { font-weight: 500; color: var(--ink-3); }
.cd-phone { width: 300px !important; height: 640px !important; padding: 10px; border-radius: 50px; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.14), inset 0 0 0 5px #0b0c0e, 0 30px 60px -22px rgb(15 23 42 / 0.42), 0 0 0 1px rgb(0 0 0 / 0.55); }
.cd-phone .ps-screen { border-radius: 41px; }
.cd-phone .ps-btn-a { top: 116px; } .cd-phone .ps-btn-b { top: 158px; } .cd-phone .ps-btn-c { top: 172px; }

/* the editor, drawn from the app's comment to DM editor: a head, then its steps; the step the story is on carries the
   accent rail and the rest step back */
.cd-ed { display: grid; gap: 7px; padding: 12px; border-radius: 16px; background: var(--canvas); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-pop); }
.cd-ed-h { display: flex; align-items: center; gap: 10px; padding: 2px 4px 6px; flex-wrap: wrap; }
.cd-ed-i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--step-violet) 12%, var(--surface)); color: var(--step-violet); }
.cd-ed-i .i { width: 16px; height: 16px; }
.cd-ed-h p { flex: 1; margin: 0; display: grid; line-height: 1.25; }
.cd-ed-h small { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.cd-ed-h b { font-size: 15px; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
.cd-live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.cd-sw { position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--accent); }
.cd-sw i { position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgb(15 23 42 / 0.25); }
.cd-st { position: relative; display: grid; gap: 7px; padding: 9px 12px 10px; border-radius: 12px; background: var(--surface); border: var(--hairline) solid var(--line); transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease); }
.cd-st::before { content: ''; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); opacity: 0; transition: opacity 0.35s var(--ease); }
/* the steps the story is not on step back: flat on the editor's ground, no fade, so every label keeps its contrast (H1) */
.cd-stage:has(.cd-on.on) .cd-st:not(:has(> .cd-on.on)) { background-color: transparent; border-color: var(--line-soft); }
.cd-st:has(> .cd-on.on) { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-lift); }
.cd-st:has(> .cd-on.on)::before { opacity: 1; }
.cd-on { display: none !important; }
.cd-st-h { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--ink); }
.cd-st-n { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--rail); font-size: 11px; font-weight: 700; color: var(--ink-3c); font-variant-numeric: tabular-nums; }
.cd-st.has-sw .cd-st-h::after { content: ''; margin-inline-start: auto; width: 28px; height: 16px; border-radius: 8px; background: var(--accent); box-shadow: inset -13px 0 0 -1px var(--accent), inset -14px 0 0 -2px var(--surface); }
.cd-st.has-sw .cd-st-h { position: relative; }
.cd-st.has-sw .cd-st-h::before { content: ''; position: absolute; right: 2px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--surface); z-index: 1; }
.cd-where { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px; border-radius: var(--r-pill); border: var(--hairline) solid var(--line); background: var(--surface); font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.cd-where img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.cd-seg { margin: 0; display: grid; grid-template-columns: 1.25fr 1.2fr 1fr; padding: 3px; border-radius: 9px; background: var(--rail); font-size: 11.5px; font-weight: 550; color: var(--ink-3c); text-align: center; }
.cd-seg span { padding: 5px 4px; border-radius: 7px; white-space: nowrap; }
.cd-seg .is-on { background: var(--surface); color: var(--ink); font-weight: 650; box-shadow: 0 1px 2px rgb(15 23 42 / 0.08); }
.cd-kws { margin: 0; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; border: var(--hairline) solid var(--line); }
.cd-kw { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.cd-kw-ph { font-size: 12px; color: var(--ink-3); }
/* who matched: one row that keeps its place (the lines share a cell, the ones not on hidden but measured), so the steps
   under it never jump when a line comes or goes (H1) */
.cd-hits { display: grid; }
.cd-hits > .cd-hit { grid-area: 1 / 1; }
.cd .cd-hits > .cd-hit:not(.on) { display: flex; visibility: hidden; }
.cd-hit { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.cd-hit.on { animation: cd-in 0.35s var(--ease) backwards; }
.cd-hit .i { width: 15px; height: 15px; padding: 2px; border-radius: 50%; flex: none; stroke-width: 3; }
.cd-hit.is-ok .i { background: var(--accent); color: var(--hero-ink); }
.cd-hit.is-no .i { background: var(--rail); color: var(--ink-3); }
.cd-hit.is-no { color: var(--ink-3); }
.cd-hit b { font-weight: 650; color: var(--ink); }
.cd-msg { display: grid; border-radius: 10px; border: var(--hairline) solid var(--line); overflow: hidden; }
.cd-msg p { margin: 0; padding: 8px 10px; font-size: 12.5px; line-height: 1.4; color: var(--ink); }
.cd-tok { display: inline-flex; padding: 0 5px; border-radius: 5px; background: var(--rail); font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.cd-msg-btn { border-top: var(--hairline) solid var(--line-soft); text-align: center; font-weight: 650 !important; color: var(--accent-ink) !important; }
.cd-msg-link { display: flex; align-items: center; gap: 7px; border-top: var(--hairline) solid var(--line-soft); font-weight: 600; white-space: nowrap; }
.cd-msg-link .i { width: 13px; height: 13px; color: var(--ink-3); flex: none; }
.cd-msg-link em { font-style: normal; font-weight: 500; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.cd-rule { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.cd-rule .i { width: 13px; height: 13px; flex: none; margin-top: 1px; color: var(--ink-4); }
.cd-vars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cd-vars li { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; border: var(--hairline) solid var(--line-soft); font-size: 12.5px; color: var(--ink-2); }
.cd-radio { width: 12px; height: 12px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.cd-pick { position: absolute; inset: -1px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--accent); background: color-mix(in srgb, var(--accent-soft) 60%, transparent); pointer-events: none; }
.cd-vars li:has(.cd-pick.on) .cd-radio { box-shadow: inset 0 0 0 3.5px var(--accent); }
.cd-vars li:has(.cd-pick.on) span { position: relative; color: var(--ink); font-weight: 600; }

/* ───────────── the phones ───────────── */
.cd .ig-status { color: #000; }
.cd-ch { position: absolute; inset: 44px 0 auto; height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid #efefef; color: #000; }
.cd-ch b { font-size: 15px; font-weight: 700; }
.cd-ch .ig-g { width: 22px; height: 22px; }
.cd-cap { position: absolute; inset: 86px 0 auto; display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #efefef; }
.cd-cap img { width: 30px; height: 30px; flex: none; border-radius: 50%; object-fit: cover; }
.cd-cap p { margin: 0; font-size: 12.5px; line-height: 1.38; color: #000; }
.cd-cap time { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ig-meta); }
.cd-cms { list-style: none; margin: 0; padding: 0; }
.cd-pa .cd-cms { position: absolute; inset: 186px 0 92px; padding: 2px 14px; overflow: hidden; display: flex; flex-direction: column; }
.cd-pa .cd-cms > li { flex: none; }
/* a longer list (translated replies) keeps the newest comment whole above the reactions row; the oldest slides under the caption (LF, 2026-10-10) */
html:is([lang='es'], [lang='fr'], [lang='pt-BR'], [lang='ar']) .cd-pa .cd-cms { justify-content: flex-end; }
html:is([lang='es'], [lang='fr'], [lang='pt-BR'], [lang='ar']) .cd-pa .cd-cms::after { content: ''; flex: 1 0 0px; }
/* the last moment (a comment without the keyword): the oldest comment steps out whole so the new one is on screen, not
   below the list's edge (it was wholly clipped at rest and under reduced motion; H1) */
.cd-pa .cd-cms:has(> .cd-cm:nth-child(5).on) > .cd-cm:nth-child(2) { display: none; }
/* the translated replies run a line longer each, so the oldest comment steps out one moment earlier there: when the second reply lands (LF, 2026-10-10) */
@media (min-width: 861px) { html:is([lang='es'], [lang='fr'], [lang='pt-BR'], [lang='ar']) .cd-pa .cd-cms:has(> .cd-cm:nth-child(4) .cd-rep.on) > .cd-cm:nth-child(2) { display: none; } }
/* Arabic's replies run two lines longer again ("صاحب المنشور" takes its own line): at the last moment the first keyword comment steps out too, as it already does on a phone */
@media (min-width: 861px) { html[lang='ar'] .cd-pa .cd-cms:has(> .cd-cm:nth-child(5).on) > .cd-cm:nth-child(3) { display: none; } }
.cd-cm { display: grid; grid-template-columns: 30px minmax(0, 1fr) 20px; gap: 10px; padding: 8px 0; }
.cd-cm.on { animation: cd-in 0.4s var(--ease) backwards; }
.cd-cm.is-new { background: color-mix(in srgb, var(--ig-blue) 5%, #fff); margin-inline: -14px; padding-inline: 14px; }
.cd-av { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--instagram) 13%, #fff); color: color-mix(in srgb, var(--instagram) 80%, var(--ink)); font-size: 12.5px; font-weight: 700; }
.cd-av.c2 { background: color-mix(in srgb, var(--step-blue) 13%, #fff); color: color-mix(in srgb, var(--step-blue) 80%, var(--ink)); }
.cd-av.c3 { background: color-mix(in srgb, var(--step-amber) 15%, #fff); color: color-mix(in srgb, var(--step-amber) 60%, var(--ink)); }
.cd-av.c4 { background: color-mix(in srgb, var(--step-teal) 14%, #fff); color: color-mix(in srgb, var(--step-teal) 65%, var(--ink)); }
.cd-av.c5 { background: color-mix(in srgb, var(--step-violet) 13%, #fff); color: var(--step-violet); }
.cd-cm-b { min-width: 0; }
.cd-cm-b p { margin: 0; }
.cd-cm-n { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #000; }
/* Arabic: a name row too long for its column ("northwind.coffee صاحب المنشور now") breaks between its pieces, never inside one (LF, 2026-10-10) */
[lang='ar'] .cd-cm-n { flex-wrap: wrap; row-gap: 0; }
[lang='ar'] .cd-cm-n > * { white-space: nowrap; }
.cd-cm-n b { font-weight: 650; }
.cd-cm-n time { color: var(--ig-meta); }
.cd-cm-t { font-size: 13px; line-height: 1.35; color: #000; overflow-wrap: anywhere; }
.cd-cm-t mark { padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--accent-bright) 22%, #fff); color: #000; font-weight: 650; }
.cd-cm-a { margin-top: 2px !important; font-size: 11.5px; font-weight: 600; color: var(--ig-meta); }
.cd-cm-l { display: grid; justify-items: center; padding-top: 6px; font-size: 11px; color: var(--ig-meta); }
.cd-cm-l .ig-g { width: 13px; height: 13px; }
.cd-rep { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; margin-top: 8px; animation: cd-in 0.45s var(--ease) backwards; }
.cd-rep img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.cd-author { color: var(--ig-meta); font-weight: 500; }
.cd-at { color: #00376b; }
.cd-emo { position: absolute; inset: auto 0 52px; margin: 0; display: flex; justify-content: space-around; padding: 8px 10px; border-top: 1px solid #efefef; font-size: 17px; }
.cd-add { position: absolute; inset: auto 0 14px; display: flex; align-items: center; gap: 9px; padding: 0 12px; }
.cd-add .ig-me { width: 26px; height: 26px; }
.cd-add p { flex: 1; min-width: 0; margin: 0; padding: 8px 13px; border: 1px solid #dbdbdb; border-radius: 22px; font-size: 12.5px; color: var(--ig-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* her DMs: the inbox, then the chat */
.cd-inbox { position: absolute; inset: 44px 0 0; padding: 4px 14px; color: #000; }
.cd-ih { display: flex; align-items: center; gap: 4px; height: 40px; }
.cd-ih b { font-size: 17px; font-weight: 700; }
.cd-ih .cd-down { width: 15px; height: 15px; transform: rotate(-90deg); }
.cd-sp { flex: 1; }
.cd-search { margin: 4px 0 12px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--ig-grey); font-size: 13px; color: var(--ig-meta); }
.cd-search .ig-g { width: 16px; height: 16px; }
.cd-tabs { margin: 0 0 6px; display: flex; justify-content: space-between; font-size: 14px; }
.cd-tabs b { font-weight: 700; }
.cd-tabs span { color: var(--ig-meta); font-weight: 600; }
.cd-chats { list-style: none; margin: 0; padding: 0; }
.cd-chat { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 0; }
.cd-chat img, .cd-chat .cd-av { width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: cover; font-size: 16px; }
.cd-chat p { flex: 1; min-width: 0; margin: 0; display: grid; font-size: 13px; line-height: 1.35; }
.cd-chat p span { color: var(--ig-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-chat.is-new { animation: cd-in 0.45s var(--ease) backwards; }
.cd-chat.is-new p span { color: #000; font-weight: 650; }
.cd-chat.is-new p b { font-weight: 700; }
.cd-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ig-blue); }
.cd-thread { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; animation: dmh-cut-in 0.45s var(--ease) backwards; }
.cd-th { padding-top: 10px !important; }
.cd-th .ig-ctx q { display: block; padding: 6px 12px; border-radius: 16px; background: var(--ig-grey); font-size: 12.5px; color: #000; quotes: none; }
.cd-th .ig-m.on { animation: cd-in 0.4s var(--ease) backwards; }
.cd-th .ig-btn { width: 100%; background: #fff; transition: transform 0.15s var(--ease), background 0.2s var(--ease); }
.cd-th .ig-btn.tap { transform: scale(0.96); background: var(--ig-grey); }

/* the caption line: the editor's step in one line, on a phone only */
.cd-line { display: none; }

@keyframes cd-in { from { opacity: 0; transform: translateY(6px); } }

/* ───────────── a phone: one phone, the side the story is on; the editor folds into the caption line ─────────────
   PLAN §2 (Anant: everything fits the viewport on a phone). Under 860px the stage is 260 wide and never scaled down, so
   the text keeps its size: the phone's screen alone (no frame, no status bar, no composer) at 260 x 316, its name under
   it, then the line that says what is happening. Agent S, 2026-10-07. */
@media (max-width: 860px) {
  .cd-box { padding: var(--s-4) var(--s-3) var(--s-3); border-radius: var(--r-xl); }
  .cd-box::before { display: none; }
  .cd-ed { display: none; }
  .cd-pa, .cd-pb { left: 0; top: 0; }
  .cd-pcol { width: 260px; gap: 8px; }
  .cd-pl { order: 2; height: auto; font-size: 11.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3c); }
  .cd-pl span { display: none; }
  .cd-phone { width: 260px !important; height: 316px !important; padding: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); background: #fff; }
  .cd-phone .ps-btn, .cd-phone .ig-status { display: none; }
  .cd-phone .ps-screen { border-radius: 16px; background: #fff; }
  .cd-stage .cd-pb { visibility: hidden; }
  .cd-stage:has(.cd-sb.on) .cd-pb { visibility: visible; }
  .cd-stage:has(.cd-sb.on) .cd-pa { visibility: hidden; }
  .cd-pcol.on, .cd-stage:has(.cd-sb.on) .cd-pb { animation: cd-in 0.35s var(--ease); }
  /* under the reel: the header, the caption in two lines, the newest comments, the comment field */
  .cd-ch { inset: 0 0 auto; height: 38px; padding: 0 12px; }
  .cd-ch b { font-size: 14px; }
  .cd-ch .ig-g { width: 20px; height: 20px; }
  .cd-cap { inset: 38px 0 auto; padding: 8px 12px; gap: 8px; }
  .cd-cap img { width: 26px; height: 26px; }
  .cd-cap p { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cd-cap time { display: none; }
  .cd-pa .cd-cms { inset: 92px 0 44px; padding: 0 12px; justify-content: flex-start; }
  html:is([lang='es'], [lang='fr'], [lang='pt-BR'], [lang='ar']) .cd-pa .cd-cms { justify-content: flex-end; }
  .cd-cm { gap: 8px; padding: 6px 0; grid-template-columns: 28px minmax(0, 1fr) 18px; }
  .cd-cm.is-new { margin-inline: -12px; padding-inline: 12px; }
  .cd-av { width: 28px; height: 28px; font-size: 12px; }
  .cd-cm-a { display: none; }
  .cd-cm-l { font-size: 11px; }
  .cd-rep { margin-top: 6px; }
  .cd-pa .cd-cms > .cd-cm:not([data-in]) { display: none; }   /* the hero's phone only: the rule also emptied step 1's small picture on a phone (H0, H1) */
  .cd-cms:has(> .cd-cm:nth-child(4) .cd-rep.on) > .cd-cm:nth-child(3),
  .cd-cms:has(> .cd-cm:nth-child(5).on) > .cd-cm:nth-child(3) { display: none; }
  .cd-emo { display: none; }
  .cd-add { inset: auto 0 8px; padding: 0 10px; }
  .cd-add p { font-size: 12px; padding: 7px 12px; }
  /* her DMs: the inbox (three chats), then the chat without its composer */
  .cd-inbox { inset: 0; padding: 2px 12px; }
  .cd-ih { height: 36px; }
  .cd-ih b { font-size: 15px; }
  .cd-search { margin: 2px 0 8px; padding: 6px 10px; font-size: 12px; }
  .cd-tabs { font-size: 13px; margin-bottom: 2px; }
  .cd-chat { padding: 6px 0; gap: 10px; }
  .cd-chat img, .cd-chat .cd-av { width: 40px; height: 40px; }
  .cd-chat p { font-size: 12.5px; }
  .cd-chats > .cd-chat:nth-child(n+4) { display: none; }
  .cd-phone .kit-ig-dmh { padding-top: 10px; padding-bottom: 8px; }
  .cd-phone .ig-comp { display: none; }
  .cd-th { padding: 8px 10px 10px !important; }
  .cd-th .ig-ctx { font-size: 11px; }
  .cd-th:has(> .ig-m:nth-of-type(3).on) > .ig-ctx, .cd-th:has(> .ig-m:nth-of-type(3).on) > .ig-m:first-of-type { display: none; }
  .cd-line { display: grid; justify-items: center; margin: var(--s-3) 0 0; min-height: 34px; }
  .cd-line-t { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding-block: 5px; padding-inline: 8px 14px; border-radius: 17px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-lift); font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--ink); text-align: center; }
  /* every line keeps its place in the one cell (hidden, still measured): the pill row is as tall as its longest line on every
     beat, so the page under the scene never moves when a sentence wraps (it grew and shrank 10 to 15px in the loop; H1) */
  .cd .cd-line .cd-line-t:not(.on) { display: inline-flex; visibility: hidden; }
  .cd .cd-line .cd-line-t[data-in='0']:not(.on):not(.gone) { visibility: visible; }
  .cd-line-t.on { animation: cd-in 0.35s var(--ease) backwards; }
  .cd-line-t .i { width: 20px; height: 20px; flex: none; padding: 4px; border-radius: 50%; background: var(--accent); color: var(--hero-ink); stroke-width: 2.6; }
}

/* a short phone (320 x 568: 413px under the header and the trial bar, QA §1.2): the same screen, 36px shorter */
@media (max-width: 860px) and (max-height: 620px) {
  .cd-fit { --kit-h: 310px !important; }
  .cd-phone { height: 280px !important; }
  .cd-cap { display: none; }
  .cd-pa .cd-cms { top: 38px; }
}

/* ───────────── how it runs: the small pictures ───────────── */
.cd-mini { width: 100%; max-width: 250px; display: grid; gap: 8px; font-family: var(--font); color: #000; }
.cd-mini .cd-cms { display: grid; }
.cd-mini .cd-cm { padding: 5px 8px; margin: 0; border-radius: 10px; }
.cd-mini .cd-cm.is-new { margin-inline: 0; }
.cd-mini-k { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cd-mini-k span { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 6px; border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.cd-mini-k .i { width: 14px; height: 14px; }
.cd-mini-k .i:not([class*=brand]) { color: var(--ink-3); }
.cd-mini-dm { gap: 6px; }
.cd-mini-dm .ig-ctx { margin: 0; align-self: center; display: grid; justify-items: center; gap: 4px; font-size: 11px; color: var(--ig-meta); text-align: center; }
.cd-mini-dm .ig-ctx q { padding: 4px 10px; border-radius: 14px; background: var(--ig-grey); color: #000; quotes: none; font-size: 12px; }
.cd-mini-dm .ig-b { font-size: 12.5px; padding: 7px 11px; }
.cd-mini-dm .ig-btn { width: 100%; padding: 7px 10px; font-size: 12.5px; background: #fff; }
.cd-mini-dm .ig-m-av { width: 22px; height: 22px; }
.cd-pressed { background: var(--ig-grey) !important; transform: scale(0.97); }
.cd-window { margin: 4px 0 0; justify-self: center; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px 0 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 650; }
.cd-window .i { width: 14px; height: 14px; }
.cd-mflow { list-style: none; margin: 0; padding: 0; gap: 8px; }
.cd-mflow > li { display: grid; }
.cd-mnode.kit-node { width: 100%; }
.cd-mnode > .kit-dot { display: none; }   /* a strip of steps, not a wired canvas: no dots waiting for a wire */

@media (prefers-reduced-motion: reduce) { .cd *, .cd-line-t { animation: none !important; transition: none !important; } }

/* right to left (KIT.md § 6.15, 16): the kit keeps the picture left to right; the line under it is page text and follows the page */
[dir='rtl'] :is(.cd-line, .cd-pl) { direction: rtl; }

/* phones, round 2 (QA2 P-2; agent S, 2026-10-07): a surface switch is a cross-fade over a solid surface, never through a
   blank stage: the surface that leaves stays in place under the one that arrives until it is fully in (0.3s). */
@media (max-width: 860px) {
  .cd-stage .cd-pa, .cd-stage .cd-pb { z-index: 0; transition: visibility 0s linear 0.3s, z-index 0s linear 0.3s; }
  .cd-stage:has(.cd-sb.on) .cd-pb, .cd-stage:not(:has(.cd-sb.on)) .cd-pa { transition-delay: 0s; z-index: 2; animation: cd-xf 0.3s linear; }
  /* hold, then cut (QA pass 3 L-1 and pass 4; agent F2, 2026-10-08, the same rule as the flow-builder sheets). An opacity
     cross-fade let the leaving surface read through the arriving one for 0.3s (two surfaces on top of each other), and an
     arriving surface that covers at once is an empty box while its own parts fade in. So the leaving surface stays ON
     TOP, whole, for 0.3s while the arriving one draws underneath it, then it is gone in one frame. */
  @keyframes cd-xf { from, to { z-index: 1; } }
  /* the loop's restart: no fade to nothing on a phone (the stage was blank for about half a second), and the page's
     script marks the root is-first for the first beat, drawn in the same task that clears the last one. Nothing eases
     in that moment, so the last picture is replaced by the complete first one in one frame. */
  .cd.is-reset .cd-stage { opacity: 1; transition: none; }
  .cd.is-first, .cd.is-first *, .cd.is-first *::before, .cd.is-first *::after { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  /* a screen that REPLACES another inside one phone (the chat over the reel's comments) arrives whole: the one it
     replaces leaves in the same frame, so an entrance from nothing was a blank screen for a frame or two */
  .cd .ps-phone .cd-thread { animation: none !important; }
}