/* The HTTP request family and the templates (site-src/gen/dm/http.py, agent K): the four signatures and their small
   pictures. Class prefix hx-. Tokens from system.css; Instagram's colours only inside the phones (--ig-*). */

.hx-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; color: var(--ink); word-break: break-all; direction: ltr; unicode-bidi: isolate; }
.hx-mono mark { background: var(--accent-soft); color: var(--accent-ink); border-radius: 3px; padding: 0 2px; }
.hx-mono.is-v { padding: 0 5px; border-radius: 5px; background: var(--rail); }
.hx-var { display: inline-flex; align-items: center; padding: 0 5px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; font-weight: 600; white-space: nowrap; direction: ltr; }
.hx-k { margin: 0; font-size: 12px; font-weight: 650; color: var(--ink-3); }
.hx-k span { font-weight: 500; color: var(--ink-3); }
.f-start { --g: var(--accent); } .f-send { --g: var(--step-blue); } .f-collect { --g: var(--step-violet); }
.f-logic { --g: var(--step-amber); } .f-action { --g: var(--step-teal); } .f-comment { --g: var(--step-pink); }
.hx-tile { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--g, var(--step-teal)) 12%, var(--surface)); color: var(--g, var(--step-teal)); }
.hx-tile .i { width: 16px; height: 16px; }
.hx-meth { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; flex: none; background: color-mix(in srgb, var(--step-amber) 14%, var(--surface)); color: color-mix(in srgb, var(--step-amber) 62%, var(--ink)); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 700; }
.hx-meth.is-get { background: var(--accent-soft); color: var(--accent-ink); }
.hx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; height: 34px; padding: 0 14px; border-radius: 9px; background: var(--accent); color: var(--hero-ink); font-size: 13px; font-weight: 650; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18); }
.hx-btn .i { width: 13px; height: 13px; }
.hx-btn.is-sm { height: 28px; padding: 0 11px; font-size: 12px; }
.hx-ok { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); }
.hx-ok .i, .hx-ready .i, .hx-err .i { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.hx-ready { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--accent-ink); }
.hx-err { margin: 0; display: flex; gap: 7px; padding: 8px 10px; border-radius: 9px; background: var(--danger-soft); color: var(--danger-ink); font-size: 12.5px; line-height: 1.45; }

/* ───────────── a stage: product surfaces drawn at a fixed size and scaled as one picture (the kit's fit) ───────────── */
.hx { margin: 0; }
.hx [data-in]:not(.on) { display: none; }
.hx-on { display: none !important; }
.hx-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; }
.hx-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; }
.hx-stage { font-family: var(--font); text-align: start; font-size: 13px; color: var(--ink); }
.hx.is-reset .hx-stage { opacity: 0; transition: opacity 0.6s var(--ease); }
.hx-stage > div { position: absolute; top: 0; display: grid; gap: 12px; align-content: start; }
.hx-col-l { 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; }
.hx-col-l span { font-weight: 500; color: var(--ink-3); }
.hx-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); }
.hx-phone .ps-screen { border-radius: 41px; display: flex; flex-direction: column; }
.hx-phone .ps-btn-a { top: 116px; } .hx-phone .ps-btn-b { top: 158px; } .hx-phone .ps-btn-c { top: 172px; }
.hx-th { padding-bottom: 12px; }
.hx .ig-m.on, .hx .hx-ev.on, .hx .hx-ai.on, .hx .hx-keepc.on, .hx .hx-sum.on, .hx .hx-ready.on, .hx .hx-req.on, .hx .hx-res.on, .hx .hx-kept.on, .hx .hx-way.on, .hx .hx-fill.on, .hx .hx-sreq.on, .hx .hx-sreq > .on { animation: hx-in 0.4s var(--ease) backwards; }
.hx-typing .ig-b { display: inline-flex; gap: 4px; padding: 12px 14px; }
.hx-typing .ig-b i { width: 7px; height: 7px; border-radius: 50%; background: var(--ig-meta); animation: hx-dot 1s infinite; }
.hx-typing .ig-b i:nth-child(2) { animation-delay: 0.15s; } .hx-typing .ig-b i:nth-child(3) { animation-delay: 0.3s; }
@keyframes hx-dot { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
@keyframes hx-in { from { opacity: 0; transform: translateY(6px); } }
.hx-line { display: none; }

/* the HTTP step's panel, drawn from the app's inspector */
.hx-panel { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-pop); }
.hx-ph { display: flex; align-items: center; gap: 10px; }
.hx-ph p, .hx-aih p { margin: 0; display: grid; line-height: 1.25; }
.hx-ph b, .hx-aih b { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.hx-ph small, .hx-aih small { font-size: 12px; color: var(--ink-3); }
.hx-door { margin: 0; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 11px; border: var(--hairline) solid var(--accent-line); background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.hx-door > .i { width: 18px; height: 18px; flex: none; color: var(--accent-ink); }
.hx-door span { display: grid; gap: 1px; min-width: 0; }
.hx-door b { font-size: 13px; font-weight: 650; color: var(--accent-ink); }
.hx-door small { font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.hx-url { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 5px 6px; border-radius: 9px; border: var(--hairline) solid var(--line); background: var(--surface); }
.hx-addr { min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; word-break: break-all; direction: ltr; }
.hx-addr em, .hx-sec em { font-style: normal; font-family: var(--font); color: var(--ink-3); }
.hx-tabs { margin: 0; display: flex; gap: 14px; border-bottom: var(--hairline) solid var(--line); font-size: 12.5px; font-weight: 550; color: var(--ink-3); }
.hx-tabs span { padding: 6px 0 8px; margin-bottom: -1px; }
.hx-sec { display: grid; gap: 5px; }
.hx-in, .hx-map { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 32px; padding: 4px 9px; border-radius: 8px; border: var(--hairline) solid var(--line); font-size: 12px; }
.hx-arrow { color: var(--ink-3); }
.hx-to { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.hx-fields { margin: 0; display: flex; flex-wrap: wrap; gap: 5px; font-size: 12px; }
.hx-set { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.hx-set .i { width: 14px; height: 14px; }
.hx-set b { font-weight: 650; color: var(--ink-2); }
.hx-ports { display: grid; border-top: var(--hairline) solid var(--line-soft); margin: 0 -14px -14px; }
.hx-port { position: relative; margin: 0; display: flex; align-items: baseline; gap: 8px; padding: 8px 28px 8px 14px; font-size: 12px; color: var(--ink-3); }
.hx-port + .hx-port { border-top: var(--hairline) solid var(--line-soft); }
.hx-port:last-child { border-radius: 0 0 16px 16px; }
.hx-port b { font-weight: 650; color: var(--ink); }
.hx-dot { position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.hx-port.is-fail .hx-dot { background: var(--danger); }
.hx-port.is-ok:has(.hx-on.on) { background: var(--accent-soft); }
.hx-port.is-ok:has(.hx-on.on) b { color: var(--accent-ink); }

/* the call: what was sent, the answer, the kept value */
.hx-call { display: grid; gap: 10px; align-content: start; min-height: 420px; padding: 12px; border-radius: 16px; background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-pop); }
.hx-req, .hx-res { display: grid; gap: 8px; }
.hx-sent { margin: 0; display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.5; }
.hx-sent .hx-mono { min-width: 0; }
.hx-hdr { margin: 0; font-size: 11.5px; color: var(--ink-3); }
.hx-hdr .hx-mono { color: var(--ink-3); }
.hx-wait { margin: 40px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.hx-wait .i { width: 15px; height: 15px; }
.hx-status { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.hx-200 { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; }
.hx-way { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; color: var(--accent-ink); }
.hx-way .i { width: 13px; height: 13px; }
.hx-json { margin: 0; padding: 9px 11px; border-radius: 10px; background: var(--canvas); border: var(--hairline) solid var(--line-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.65; color: var(--ink-2); white-space: pre-wrap; direction: ltr; text-align: left; overflow: hidden; }
.hx-jl { display: block; padding-left: calc(var(--d) * 14px); }
.hx-res.on .hx-jl { animation: hx-in 0.3s var(--ease) backwards; animation-delay: calc(var(--i) * 70ms); }
.hx-jk { color: var(--ink); }
.hx-js { color: var(--accent-ink); }
.hx-jhit { border-radius: 4px; }
.hx-res:has(.hx-kept.on) .hx-jhit, .hx-mini .hx-jhit { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); }
.hx-kept { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px 9px; border-radius: 9px; border: var(--hairline) solid var(--accent-line); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); font-size: 12px; }
.hx-kept b { font-weight: 700; color: var(--ink); }

/* /flow-builder/http-request: the step, the call, her DMs (1120 x 700) */
.hx-live .hx-c1 { left: 0; width: 450px; }
.hx-live .hx-c2 { left: 476px; width: 300px; }
.hx-live .hx-c3 { left: 806px; width: 300px; }

/* /ai-builder: the chat beside the step it fills (1120 x 680) */
.hx-aib .hx-a1 { left: 0; width: 540px; }
.hx-aib .hx-a2 { left: 580px; width: 500px; }
.hx-aip { display: flex; flex-direction: column; height: 628px; border-radius: 16px; background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-pop); overflow: hidden; }
.hx-aih { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: var(--hairline) solid var(--line-soft); }
.hx-mode { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px 0 11px; border-radius: var(--r-pill); border: var(--hairline) solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.hx-mode .i { width: 12px; height: 12px; transform: rotate(90deg); color: var(--ink-3); }
.hx-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px; overflow: hidden; }
.hx-intro { margin: auto 0; display: grid; gap: 6px; justify-items: center; text-align: center; font-size: 13px; line-height: 1.5; color: var(--ink-3); padding: 0 24px; }
.hx-intro b { font-size: 15px; color: var(--ink); }
.hx-owner { margin: 0; align-self: flex-end; max-width: 86%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--rail); font-size: 13px; line-height: 1.45; color: var(--ink); }
.hx-work { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.hx-work i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: hx-spin 0.8s linear infinite; }
@keyframes hx-spin { to { transform: rotate(1turn); } }
.hx-ev { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 12.5px; color: var(--ink-2); }
.hx-ev > .i { width: 14px; height: 14px; flex: none; color: var(--ink-3); }
.hx-ev > span:not(.hx-peek) { flex: 1 1 0; min-width: 0; }
.hx-ev.is-ok > .i { color: var(--accent); }
.hx-ev.is-bad > .i { color: var(--danger); }
.hx-peek { flex-basis: 100%; display: grid; gap: 3px; margin-inline-start: 21px; padding: 6px 9px; border-radius: 8px; background: var(--canvas); border: var(--hairline) solid var(--line-soft); }
.hx-peek span { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.hx-peek b { font-weight: 650; }
.hx-ai { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink); }
.hx-keepc { display: grid; gap: 7px; padding: 10px 11px; border-radius: 11px; border: var(--hairline) solid var(--line); }
.hx-keepc > p:first-child { margin: 0; display: grid; gap: 2px; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.hx-keepc > p:first-child b { font-size: 12.5px; color: var(--ink); }
.hx-keeps { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hx-keeps span { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); border: var(--hairline) solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.hx-keeps .is-kept { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.hx-keeps .i { width: 12px; height: 12px; }
.hx-sum { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 12px; color: var(--ink-3); }
.hx-sum span:not(:last-child)::after { content: '·'; margin: 0 6px; color: var(--ink-3); }
.hx-sum .is-ok { color: var(--accent-ink); font-weight: 650; }
.hx-comp { display: grid; gap: 6px; padding: 10px 14px 12px; border-top: var(--hairline) solid var(--line-soft); }
.hx-comp p { margin: 0; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 6px 0 12px; border-radius: 11px; border: var(--hairline) solid var(--line); font-size: 13px; color: var(--ink-3); }
.hx-comp p span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-comp p > .i { width: 16px; height: 16px; color: var(--ink-3); }
.hx-send { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--rail); }
.hx-send .i { width: 14px; height: 14px; color: var(--ink-3); transform: rotate(-90deg); }
.hx-comp small { font-size: 11.5px; color: var(--ink-3); }

/* /services: the list, the call, the chat (1120 x 660) */
.hx-svcs .hx-s1 { left: 0; width: 400px; }
.hx-svcs .hx-s2 { left: 424px; width: 336px; }
.hx-svcs .hx-s3 { left: 790px; width: 300px; }
.hx-svcs .hx-phone { height: 620px !important; }
.hx-svl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hx-sv { position: relative; display: grid; gap: 2px; padding: 8px 10px; border-radius: 11px; border: var(--hairline) solid var(--line); background: var(--surface); }
/* the lit service: a ring that fades in as its own layer; the others step back onto the canvas, their words still AA */
.hx-sv::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-pop); opacity: 0; transition: opacity 0.3s var(--ease); pointer-events: none; }
/* which service is answering, unmistakably (QA pass 3): the lit one takes the accent edge, a tinted ground and a filled
   tile; the call beside it carries the same tile and its name, and the same accent edge */
.hx-sv { grid-template-columns: minmax(0, 1fr) auto; }
.hx-sv > b, .hx-sv > small { grid-column: 1; }
.hx-sv-t { grid-column: 2; grid-row: 1 / span 2; align-self: start; width: 22px; height: 22px; display: none; place-items: center; border-radius: 7px; background: var(--accent); color: var(--hero-ink); }
.hx-sv-t .i { width: 13px; height: 13px; }
.hx-sv:has(.hx-on.on) { background: var(--accent-soft); }
.hx-sv:has(.hx-on.on) > b { color: var(--accent-ink); }
.hx-sv:has(.hx-on.on) .hx-sv-t, .hx-sname .hx-sv-t { display: grid; }
.hx-svcs .hx-scall { border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-pop); }
.hx-sname { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.hx-sname b { font-weight: 650; color: var(--accent-ink); }
.hx-sv b { font-size: 13px; font-weight: 650; }
.hx-sv small { font-size: 11.5px; line-height: 1.35; color: var(--ink-3); }
.hx-svl:has(.hx-on.on) .hx-sv:not(:has(.hx-on.on)) { background: var(--canvas); border-color: var(--line-soft); }
.hx-sv:has(.hx-on.on)::after { opacity: 1; }
.hx-scall { min-height: 0; }
.hx-sreq { display: grid; gap: 9px; }

/* ───────────── phones: ONE surface at a time (site-src/dm/PLAN §2; Anant: everything fits the viewport on a phone) ─────────────
   Under 860px the stage is 260 wide and never scaled down, so text keeps its size: the surface the story is on (the
   phone's bare screen, the call, the step's panel or the AI chat) at 260 x 316 (272 on a short screen), its name under
   it, then the line that says what is happening. The beat markers .hx-mN (views() in http.py) pick the column .hx-kN.
   Agent S's helper, 2026-10-07. */
@media (max-width: 860px) {
  .hx { --hx-sh: 316px; }
  .hx-box { padding: var(--s-4) var(--s-3) var(--s-3); border-radius: var(--r-xl); }
  .hx-box::before { display: none; }
  .hx-stage { display: grid; grid-template-columns: 260px; align-content: start; }
  .hx .hx-stage > div { position: static; grid-area: 1 / 1; width: 260px; display: none; grid-template-rows: var(--hx-sh) auto; gap: 8px; }
  .hx-stage:not(:has(> .hx-vm.on)) > .hx-kd, .hx-stage:has(> .hx-m1.on) > .hx-k1, .hx-stage:has(> .hx-m2.on) > .hx-k2, .hx-stage:has(> .hx-m3.on) > .hx-k3 { display: grid; animation: hx-in 0.35s var(--ease); }
  .hx-vm { display: none !important; }
  .hx-col-l { order: 2; height: 16px; font-size: 11.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3c); }
  .hx-col-l span { display: none; }
  .hx-stage .hx-var { font-size: max(11.5px, 0.9em); }
  .hx-line { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; margin: 8px 0 0; min-height: 46px; }
  .hx-line-t { grid-area: 1 / 1; min-width: 0; max-width: 100%; display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 6px; min-height: 30px; padding: 5px 12px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-lift); font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--ink); text-align: center; overflow-wrap: anywhere; animation: hx-in 0.35s var(--ease) backwards; }
  .hx-line-t .hx-mono { min-width: 0; font-size: 12px; color: var(--ink-3); word-break: normal; overflow-wrap: anywhere; }

  /* the phone: its screen alone */
  .hx .hx-phone { width: 260px !important; height: var(--hx-sh) !important; padding: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); }
  .hx-phone .ps-btn, .hx-phone .ig-status, .hx-phone .ig-comp { display: none; }
  .hx-phone .ps-screen { border-radius: 16px; }
  .hx-phone .kit-ig-dmh { padding-top: 10px; padding-bottom: 8px; }
  .hx-live .hx-th:has(> .hx-typing.on, > .ig-m:last-child.on) > .ig-m:first-child { display: none; }

  /* the step's panel: the address, the response, the kept value, the two ways out */
  .hx-panel { height: var(--hx-sh); display: flex; flex-direction: column; gap: 10px; overflow: hidden; box-shadow: none; }
  .hx-panel .hx-door, .hx-panel .hx-tabs, .hx-panel .hx-sec:has(> .hx-in), .hx-panel .hx-sec:has(> .hx-fields), .hx-panel .hx-set, .hx-panel .hx-dot { display: none; }
  .hx-panel .hx-ports { margin-top: auto; }
  .hx-panel .hx-port { padding: 8px 14px; flex-wrap: wrap; }

  /* the call: what was sent, then the answer in its place */
  .hx-live .hx-call { height: var(--hx-sh); min-height: 0; overflow: hidden; box-shadow: none; }
  .hx-live .hx-call:not(:has(> .hx-res.on)) { align-content: center; }
  .hx-live .hx-call { padding: 10px; }
  .hx-live .hx-call:has(> .hx-res.on) > .hx-req, .hx-live .hx-hdr { display: none; }
  .hx-live .hx-json { padding: 8px; line-height: 1.5; }
  .hx-live .hx-jl { padding-left: calc(var(--d) * 10px); }
  .hx-live .hx-jl:nth-child(2), .hx-live .hx-jl:nth-child(3), .hx-live .hx-jl:nth-child(7) { display: none; }
  .hx-live .hx-kept > .hx-mono, .hx-live .hx-kept > .hx-arrow { display: none; }

  /* the AI chat: the newest lines, older ones leave as new ones land */
  .hx .hx-aip { height: var(--hx-sh); box-shadow: none; }
  .hx-aib .hx-mode, .hx-aib .hx-comp { display: none; }
  .hx-aih { padding: 10px 12px; }
  .hx-chat { padding: 12px; }
  .hx-chat:has(> .hx-ai.on) > :is(.hx-owner, .hx-ev) { display: none; }
  .hx-chat:has(> .hx-keepc.on) > .hx-ai { display: none; }
  .hx-chat:has(> .hx-sum.on) > .hx-ev { display: none; }

  /* /services: the chat carries the story; the list and the call are named in the line */
  .hx-svcs .hx-s1, .hx-svcs .hx-s2 { display: none !important; }
}

/* ───────────── how it runs: the small pictures ───────────── */
.hx-mini { width: 100%; max-width: 260px; display: grid; gap: 7px; font-family: var(--font); font-size: 12px; color: var(--ink); }
.hx-mini-card { padding: 10px; border-radius: 12px; background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-lift); }
.hx-mini-dm { color: #000; }
.hx-mini-dm .ig-b { font-size: 12.5px; padding: 7px 11px; }
.hx-mini-dm .ig-m-av { width: 22px; height: 22px; }
.hx-mini .hx-json { font-size: 11.5px; padding: 7px 9px; }
.hx-mini-n { margin: 0; display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); }
.hx-mini-n .i { width: 13px; height: 13px; flex: none; }
.hx-chipline { margin: 0; justify-self: center; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.hx-chipline .i { width: 14px; height: 14px; color: var(--step-violet); }
.hx-mini .kit-node { width: 100%; min-width: 0; }
.kit-step:has(.hx-node), .hx-mini { min-width: 0; }   /* the full card's one-line address must not widen its step's column */
/* the flow on the canvas: three compact cards and the HTTP request's full card stand in one row inside the wrap */
.hx-cv { min-width: 0; }
@media (min-width: 861px) { .hx-cv .kit-canvas-in { padding-inline: var(--s-4); } .hx-cv .hx-node { --w: 256px; } }
@media (min-width: 861px) and (max-width: 1180px) { .hx-cv .kit-canvas-in { gap: 36px; } .hx-cv .kit-node { --w: 196px; } .hx-cv .hx-node { --w: 232px; } }
.hx-mini .hx-owner { font-size: 12px; }
.hx-mini .hx-ev { font-size: 12px; }
.hx-mini .hx-ev.is-bad { color: var(--ink-3); }
.hx-mini-url { margin: 0; font-size: 12px; padding: 5px 8px; border-radius: 7px; border: var(--hairline) solid var(--line); }
.hx-mini-tc b { font-size: 13px; line-height: 1.35; }

/* ───────────── the spot pictures ───────────── */
.hx-test, .hx-curl, .hx-teaser, .hx-keyv, .hx-shotv { width: 100%; max-width: 520px; justify-self: center; display: grid; gap: 10px; padding: var(--s-5, 20px); border-radius: var(--r-xl); background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-card); font-size: 13px; color: var(--ink); text-align: start; }
.hx-test-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hx-test-h b { font-size: 15px; font-weight: 650; margin-inline-end: auto; }
.hx-test-h span { font-size: 12px; color: var(--ink-3); }
.hx-test-h .hx-mono { padding: 3px 8px; border-radius: 7px; border: var(--hairline) solid var(--line); font-size: 12px; }
.hx-test .hx-btn { justify-self: start; }
.hx-tt { margin: 0; display: flex; gap: 14px; border-bottom: var(--hairline) solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.hx-tt span { padding: 6px 0 8px; margin-bottom: -1px; }
.hx-keep { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; margin-inline-start: 6px; border-radius: 5px; border: var(--hairline) solid var(--line); background: var(--surface); font-family: var(--font); font-size: 11px; font-weight: 650; color: var(--ink-2); vertical-align: 1px; }
.hx-help { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.hx-help .i { width: 14px; height: 14px; flex: none; }
.hx-code { margin: 0; padding: 12px 14px; border-radius: 11px; background: var(--ink); color: var(--hero-ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.65; white-space: pre-wrap; word-break: break-all; direction: ltr; text-align: left; }
.hx-secret { padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--step-amber) 30%, transparent); }
.hx-owner .hx-secret { background: color-mix(in srgb, var(--step-amber) 22%, transparent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.hx-curl .hx-btn { justify-self: start; }
.hx-built { display: grid; gap: 9px; padding: 12px; border-radius: 12px; border: var(--hairline) solid var(--accent-line); background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface)); }
.hx-kv { margin: 0; display: grid; gap: 7px; }
.hx-kv div { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: baseline; font-size: 12.5px; }
.hx-kv dt { font-weight: 650; color: var(--ink-3); }
.hx-kv dd { margin: 0; line-height: 1.7; }
.hx-sealed { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 8px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--rail); font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.hx-sealed .i { width: 12px; height: 12px; }
.hx-door.is-big { padding: 12px 14px; }
.hx-teaser .hx-owner { font-size: 13px; }
.hx-svc-mini { list-style: none; margin: 4px 0 0; padding: 10px 0 0; border-top: var(--hairline) solid var(--line-soft); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hx-svc-mini li { display: grid; gap: 1px; padding: 7px 9px; border-radius: 9px; border: var(--hairline) solid var(--line); }
.hx-svc-mini b { font-size: 12.5px; }
.hx-svc-mini span { font-size: 11.5px; color: var(--ink-3); }
.hx-keybox { display: grid; gap: 6px; padding: 11px 12px; border-radius: 12px; border: var(--hairline) solid var(--line); background: var(--canvas); }
.hx-kin { margin: 0; display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 11px; border-radius: 9px; border: var(--hairline) solid var(--line); background: var(--surface); font-size: 13px; letter-spacing: 0.08em; color: var(--ink-2); }
.hx-kin span { flex: 1; min-width: 0; overflow: hidden; }
.hx-kin .hx-btn { letter-spacing: 0; }
.hx-keybox small { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); }
.hx-keybox small .i { width: 13px; height: 13px; flex: none; }
.hx-att { display: grid; gap: 8px; justify-items: end; }
.hx-doc { width: 82%; padding: 10px 12px; border-radius: 10px; border: var(--hairline) solid var(--line); background: var(--surface); box-shadow: var(--shadow-lift); transform: rotate(-1deg); }
.hx-doc-h { margin: 0 0 6px; display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.hx-doc-h span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--accent-ink); }
.hx-doc table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.hx-doc th { width: 64px; padding: 4px 0; text-align: start; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }
.hx-doc td { padding: 4px 0; color: var(--ink-3); border-top: var(--hairline) solid var(--line-soft); }
.hx-doc tr:first-child td, .hx-doc tr:first-child th { border-top: 0; }
.hx-doc th { border-top: var(--hairline) solid var(--line-soft); }

/* ───────────── /services: every service as a card ───────────── */
.hx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: var(--s-4); }
.hx-card { display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-card); scroll-margin-top: 120px; min-width: 0; }
.hx-card-h h3 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.hx-card-h p { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-3); }
.hx-card .hx-sent { padding: 7px 9px; border-radius: 9px; background: var(--canvas); border: var(--hairline) solid var(--line-soft); font-size: 11.5px; }
.hx-card-chat { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid #efefef; color: #000; }
.hx-card-chat .ig-b { font-size: 13px; }
.hx-card-chat .ig-m.them .kit-ig-col { max-width: 88%; }
.hx-card-t { margin: 0; display: flex; gap: 6px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.hx-card-t .i { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.hx-table td { line-height: 1.5; }
.hx-left { list-style: none; margin: 0 auto; padding: 0; max-width: 880px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--s-3); }
.hx-left li { display: grid; gap: 3px; padding: 14px 16px; border-radius: var(--r-md); border: var(--hairline) solid var(--line); background: var(--surface); }
.hx-left b { font-size: 15px; font-weight: 650; }
.hx-left span { font-size: 14px; line-height: 1.5; color: var(--ink-3); }

/* ───────────── /templates: the cards and the flow a click opens ───────────── */
.hx-tpl { display: grid; gap: var(--s-4); padding: var(--s-6); border-radius: var(--r-2xl); background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-card); text-align: start; }
.hx-tpl.is-fb .hx-tc:not([data-on~="fb"]), .hx-tpl.is-fb .only-ig, .hx-tpl.is-ig .only-fb { display: none !important; }
.hx-tpl-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.hx-seg { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--rail); }
.hx-seg button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-3c); cursor: pointer; }
.hx-seg button .i { width: 16px; height: 16px; }
.hx-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(15 23 42 / 0.1); }
.hx-seg button:focus-visible, .hx-tb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hx-tpl-n { margin: 0; font-size: 13px; color: var(--ink-3); }
.hx-tpl-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--s-6); align-items: start; }
.hx-tpl-l, .hx-tpl-r { display: grid; gap: var(--s-3); min-width: 0; }
.hx-tcs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hx-tc { display: grid; }
.hx-tb { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; padding: 14px; border-radius: 14px; border: var(--hairline) solid var(--line); background: var(--surface); font: inherit; text-align: start; color: var(--ink); cursor: pointer; }
.hx-tb::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: var(--hairline) solid var(--ink-4); box-shadow: var(--shadow-lift); opacity: 0; transition: opacity var(--t-micro) var(--ease); pointer-events: none; }
.hx-tb:hover::after { opacity: 1; }
.hx-tb[aria-pressed="true"] { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.hx-tb[aria-pressed="true"]::after { opacity: 0; }
/* the chosen card, not by colour alone: its arrow becomes a filled badge */
.hx-tb[aria-pressed="true"] .hx-go { width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--accent); color: var(--hero-ink); }
.hx-tb[aria-pressed="true"] .hx-go .i { width: 13px; height: 13px; }
.hx-tsee, .hx-tback { display: none; }
.hx-k .hx-tpl-kt { font-weight: inherit; color: inherit; }
.hx-tc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.hx-go { color: var(--accent-ink); display: grid; }
.hx-go .i { width: 16px; height: 16px; }
.hx-tb b { font-size: 14px; font-weight: 650; line-height: 1.35; letter-spacing: -0.01em; }
.hx-ts { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.hx-tchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.hx-tchip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); border: var(--hairline) solid var(--line); background: var(--surface); font-size: 11.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.hx-tchip .i { width: 11px; height: 11px; }
.hx-tchip.is-fill { border-style: dashed; color: var(--ink-3); }
.hx-strip { display: inline-flex; align-items: center; }
/* the strip of a template's steps: the kit's tile with the app's own drawing of each step, a little smaller */
.hx-gt { width: 26px; height: 26px; border-radius: 7px; }
.hx-gw { width: 10px; height: 1.5px; background: var(--line); flex: none; }
.hx-tpl-r { position: sticky; top: calc(var(--nav-stack, 96px) + 16px); }
.hx-tp { display: grid; gap: 12px; padding: 14px; border-radius: var(--r-lg); border: var(--hairline) solid var(--line); background-color: var(--canvas); background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-4) 45%, transparent) 1px, transparent 1.2px); background-size: 16px 16px; }
.hx-tp[hidden] { display: none; }
.hx-tp:not([hidden]) { animation: hx-in 0.3s var(--ease); }
.hx-tp-h { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hx-tp-h p { margin: 0; display: grid; }
.hx-tp-h small { font-size: 11.5px; color: var(--ink-3); }
.hx-tp-h b { font-size: 15px; font-weight: 650; }
.hx-draft { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--step-amber) 14%, var(--surface)); color: color-mix(in srgb, var(--step-amber) 62%, var(--ink)); font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.hx-pns { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hx-pn { position: relative; display: grid; gap: 6px; justify-items: start; }
.hx-pn .kit-node { width: 100%; }
.hx-pn .kit-node-t small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hx-pn .kit-dot { display: none; }
.hx-pn .kit-port { padding-inline: 12px; }
.hx-pn .hx-tchip { margin-inline-start: 12px; }

.hx-tpg { display: none; }
@media (max-width: 860px) {
  /* a phone (PLAN §2): ONE surface at a time at a fixed size, so nothing moves when it switches: a template's card,
     stepped with the pager, or (a tap on the card) the flow it opens as one-line steps; Back to the card returns (H4) */
  .hx-tpl { --hx-th: 304px; padding: var(--s-4) var(--s-3); border-radius: var(--r-xl); gap: 10px; }
  .hx-tpl-in { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hx-tpl-l, .hx-tpl-r { display: contents; }
  .hx-tpl-k { order: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
  .hx-tcs, .hx-tp { order: 2; }
  .hx-tpg { order: 3; }
  .hx-tpl:not(.is-flow) .hx-tpl-r > *, .hx-tpl.is-flow .hx-tpl-l > .hx-tpl-k, .hx-tpl.is-flow .hx-tcs { display: none; }
  .hx-tcs { display: block; }
  .hx-tc:not(:has(> .hx-tb[aria-pressed="true"])) { display: none; }
  .hx-tb { height: var(--hx-th); box-shadow: none !important; }
  .hx-tb::after, .hx-tb .hx-go { display: none; }
  .hx-tsee { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 6px; font-size: 12.5px; font-weight: 650; color: var(--accent-ink); }
  .hx-tchips + .hx-tsee { margin-top: 0; }
  .hx-tsee .i { width: 14px; height: 14px; }
  .hx-tback { position: relative; flex: none; display: inline-flex; align-items: center; gap: 3px; height: 26px; white-space: nowrap; padding: 0 10px 0 6px; border: var(--hairline) solid var(--line); border-radius: var(--r-pill); background: var(--surface); font: inherit; font-size: 12px; font-weight: 650; color: var(--ink-2); cursor: pointer; }
  .hx-tback .i { width: 13px; height: 13px; transform: rotate(90deg); }
  .hx-tback:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .hx-tp { height: var(--hx-th); padding: 10px 12px; gap: 6px; grid-template-columns: minmax(0, 1fr); align-content: start; overflow: hidden; }
  .hx-tp-h p, .hx-pns, .hx-pn, .hx-pn .kit-node { min-width: 0; }
  .hx-tp:not([hidden]), .hx-tpl:not(.is-flow) .hx-tb { animation: hx-sw 0.25s var(--ease); }
  .hx-tp-h b { font-size: 13.5px; line-height: 1.3; }
  .hx-pns { position: relative; gap: 3px; }
  .hx-pns::before { content: ''; position: absolute; inset-block: 12px; inset-inline-start: 10px; width: 2px; border-radius: 1px; background: var(--line); }
  .hx-pn { display: block; }
  .hx-pn .kit-ports, .hx-pn > .hx-tchip { display: none; }
  .hx-pn .kit-node { border: 0; border-radius: 0; background: none; box-shadow: none; }
  .hx-pn .kit-node-h { height: 27px; padding: 0; gap: 8px; }
  .hx-pn .kit-tile { position: relative; width: 22px; height: 22px; border-radius: 6px; }
  .hx-pn .kit-node-t { display: flex; align-items: baseline; gap: 6px; }
  .hx-pn .kit-node-t b { flex: none; font-size: 12px; overflow: visible; }
  .hx-pn .kit-node-t small { display: block; flex: 1; min-width: 0; font-size: 11.5px; white-space: nowrap; }
  .hx-tpg { display: flex; align-items: center; justify-content: center; gap: var(--s-4); }
  .hx-tpg-b { position: relative; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: var(--hairline) solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-2); cursor: pointer; }
  .hx-tpg-b .i { width: 16px; height: 16px; transform: rotate(-90deg); }
  .hx-tpg-b.is-prev .i { transform: rotate(90deg); }
  [dir='rtl'] .hx-tpg-b .i, [dir='rtl'] .hx-tback .i { transform: rotate(90deg); }
  [dir='rtl'] .hx-tpg-b.is-prev .i { transform: rotate(-90deg); }
  .hx-tpg-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .hx-tpg-n { margin: 0; min-width: 64px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-3c); font-variant-numeric: tabular-nums; }
  @keyframes hx-sw { from { transform: translateY(5px); } }
}
@media (max-width: 359px) { .hx-tpl-r .hx-tpl-kt { display: none; } }
@media (prefers-reduced-motion: reduce) { .hx *, .hx *::before, .hx *::after, .hx-line-t, .hx-tpl *, .hx-tpl *::after { animation: none !important; transition: none !important; } }
.hx-table td:last-child { width: auto; white-space: normal; }
@media (max-width: 640px) {
  .hx-table tr { grid-template-columns: minmax(0, 1fr); }
  .hx-table tbody td { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .hx-table tbody td + td { color: var(--ink-3); font-size: 14px; }
}
.hx .hx-fill.on, .hx .hx-empty.on { display: contents; }
.hx-stage > div > * { min-width: 0; }
.hx-chat { justify-content: flex-end; }
.hx-chat > * { flex: none; }
.hx-comp { grid-template-columns: minmax(0, 1fr); }
/* a short phone (320 x 568): the surface is 272 tall so the figure fits under the header and the trial bar */
@media (max-width: 860px) and (max-height: 620px) {
  .hx { --hx-sh: 272px; }
  .hx .kit-fit[data-kit-fit-sm="260x340"] { --kit-h: 296px !important; }
  .hx-chat:has(> .hx-sum.on) > .hx-keepc { display: none; }
  /* the resting still keeps the proof in its place: Tested it: 200 and the values that came back (H4) */
  .hx-chat:has(> .hx-sum.on) > .hx-ev.is-ok { display: flex; }
  .hx-tpl { --hx-th: 256px; padding: var(--s-3); gap: 8px; }
  .hx-tb { padding: 12px; }
  .hx-tpl-n, .hx-tp-h small { display: none; }
  .hx-pn .kit-node-h { height: 26px; }
}

/* 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) {
  .hx .hx-stage > div { display: grid; visibility: hidden; z-index: 0; transition: visibility 0s linear 0.3s, z-index 0s linear 0.3s; background: var(--surface); }
  .hx-stage:not(:has(> .hx-vm.on)) > .hx-kd, .hx-stage:has(> .hx-m1.on) > .hx-k1, .hx-stage:has(> .hx-m2.on) > .hx-k2, .hx-stage:has(> .hx-m3.on) > .hx-k3 { visibility: visible; transition-delay: 0s; z-index: 2; animation: hx-xf 0.3s linear; }
  /* hold, then cut (QA pass 3 L-1 and pass 4; agent F2, 2026-10-08). 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: never blank, never two at once. */
  @keyframes hx-xf { from, to { z-index: 1; } }
  /* the loop's restart: 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
     (without it the last surface would empty itself for 0.3s under the hold, or the first would fade in from a blank). */
  .hx.is-first, .hx.is-first *, .hx.is-first *::before, .hx.is-first *::after { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  /* a screen or view that REPLACES another inside one surface (the answer over the request) arrives whole: the one it replaces leaves in the
     same frame, so an entrance from nothing was a blank surface for a frame or two (agent F2, 2026-10-08) */
  .hx .hx-call .hx-res { animation: none !important; }
  /* the loop's restart: the last surface holds until the first is in; the stage never fades to nothing (QA pass 3) */
  .hx.is-reset .hx-stage { opacity: 1; transition: none; }
}

/* ───────────── hardening (agent H4, 2026-10-07): right-to-left pages, touch, old engines ─────────────
   Right to left (KIT.md § 6, rules 13 to 15): a depiction keeps the left-to-right geometry it was drawn in; the kit does
   that for the hero's visual and the steps' small pictures, this does it for the pictures beside the copy and the chats
   in the service cards. Code and addresses are left to right everywhere. The page's own furniture follows the page: the
   scene's caption line, the service cards, the lists and the templates widget (a list of real buttons, not a picture). */
.hx-sent, .hx-url { direction: ltr; }
[dir='rtl'] :is(.hx-test, .hx-curl, .hx-teaser, .hx-keyv, .hx-shotv, .hx-card-chat) { direction: ltr; }
[dir='rtl'] :is(.hx-test, .hx-curl, .hx-teaser, .hx-keyv, .hx-shotv, .hx-card-chat) :is(p, li, dt, dd, small) { unicode-bidi: plaintext; }
[dir='rtl'] :is(.hx-line, .hx-col-l, .hx-tpl) { direction: rtl; }
[dir='rtl'] :is(.hx-go, .hx-tsee) .i { transform: scaleX(-1); }   /* an arrow points the way the page reads */
/* touch (KIT.md § 6, rule 9): every control of the templates widget answers 44px; the visible size stays, the hit area grows */
@media (pointer: coarse), (max-width: 860px) {
  .hx-seg button, .hx-tpg-b, .hx-tback { position: relative; }
  .hx-seg button::after, .hx-tpg-b::after, .hx-tback::after { content: ''; position: absolute; inset: -5px 0; }
  .hx-tpg-b::after { inset: -4px; }
  .hx-tback::after { inset: -9px 0; }
}
/* an engine without :has() (Firefox before 121, Safari before 15.4) cannot pick the phone's surface by beat: it shows
   the scene's main surface, still and whole, instead of an empty stage */
@supports not selector(:has(*)) {
  @media (max-width: 860px) { .hx .hx-stage > .hx-kd { visibility: visible; } .hx-tc { display: grid !important; margin-bottom: 8px; } .hx-tb { height: auto; } }
}