/* Deliver page components. Synthetic data. Devices: a map of every report page the client's requests and the report date land on,
   a version history you scrub across a wall of every page, and a delivery record that writes itself out. No signatures anywhere. */

.dl-lbl { font-size: 12px; color: var(--fg-3); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.dl-lbl .ai-mark { --ai-mark-h: 10px; }
.ph-r { opacity: .5; }

/* ---------- pillar 1: draft files and requests ---------- */
.dl-files { padding: 20px; display: flex; flex-direction: column; gap: 0; }
.dl-file { height: 52px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); color: var(--fg-1); }
.dl-file > span:nth-child(2) { margin-right: auto; }
.dl-doc { width: 14px; height: 16px; border-radius: 3px; box-shadow: inset 0 0 0 1.25px var(--fg-4); flex: none; }
.dl-files .dl-lbl { margin-top: 24px; }
.dl-log { height: 44px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); color: var(--fg-2); }
.dl-log > span:nth-child(3) { color: var(--fg-3); }
.dl-log .r { margin-left: auto; color: var(--fg-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.dl-log .ph { flex: 0 0 50%; }

.dl-req { margin: 0 20px; padding: 18px 0; border-bottom: 1px solid var(--line-2); }
.dl-req.dim { padding: 14px 0; }
.dl-req-h { display: flex; align-items: center; gap: 10px; color: var(--fg-3); font-size: 12.5px; }
.dl-req-h .r { margin-left: auto; }
.dl-req-h .ph { flex: 0 0 40%; }
.dl-words { margin-top: 12px; color: var(--fg-1); font-size: 14.5px; line-height: 1.55; }
.dl-req.dim .dl-words { color: var(--fg-2); font-size: 13.5px; margin-top: 8px; }
/* the suggested reply is a .doc-page: copper while suggested, the normal surface once your lead keeps it */
.dl-reply.doc-page { margin-top: 14px; padding: 12px 14px; line-height: 1.6; }
.accepted .dl-sg.sugg { background-size: 0% 1px; transition: background-size var(--dur-draw) var(--ease-spring); }
/* suggested by Enpasse: a thin copper underline, and only copper means AI */
.dl-sg { padding-bottom: 2px; background: linear-gradient(color-mix(in srgb, var(--cu) 70%, transparent), color-mix(in srgb, var(--cu) 70%, transparent)) no-repeat 0 100% / 100% 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.dl-req .dl-req-h > span:nth-child(3) { color: var(--fg-4); }
.dl-why { margin-top: 14px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease-enter), opacity .5s; }
.dl-why.on { max-height: 120px; opacity: 1; }
.dl-opt { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; margin: 0 6px 6px 0; border-radius: 999px; font-size: 12.5px; color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--line-3); }
.dl-opt.on { color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--fg-3); background: var(--bg-3); }
.dl-act { margin-top: 14px; display: flex; align-items: center; gap: 10px; min-height: 32px; }
.dl-act .r { margin-left: auto; display: flex; gap: 8px; }
.dl-act.done { color: var(--fg-2); }
.dl-act .t { color: var(--fg-2); }

.dl-lock { width: 12px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1.25px var(--fg-4); position: relative; margin-top: 4px; flex: none; transition: box-shadow .3s; }
.dl-lock::before { content: ""; position: absolute; left: 2px; right: 2px; top: -6px; height: 7px; border: 1.25px solid var(--fg-4); border-bottom: 0; border-radius: 5px 5px 0 0; transition: border-color .3s; }

/* ---------- the record: question cards and the spec sheet (narrow, centred) ---------- */
.dl-spec { padding: 160px 0 96px; }
.dl-narrow { max-width: 1024px; margin: 0 auto; padding: 0 var(--outer); }
.dl-spec .eyebrow { margin-bottom: 20px; justify-content: center; }
.dl-spec .dl-narrow > h2, .dl-spec .dl-two { text-align: center; margin-left: auto; margin-right: auto; }
#apply h2 { max-width: 20ch; }
.dl-two { margin-top: 24px; max-width: 52ch; color: var(--fg-3); font-size: 17px; line-height: 1.6; }
.dl-two b { color: var(--fg-1); font-weight: 500; }
.dl-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- shared: a lit stage like the Assess wall, tabs, legend, caption ---------- */
.dl-flowstage, .dl-linstage { position: relative; margin-top: 64px; padding: 36px 40px 0; border-radius: 20px; background: radial-gradient(70% 90% at 50% 0%, #1d1e21 0%, #121315 40%, var(--bg) 85%); box-shadow: inset 0 1px 0 #ffffff12, inset 0 0 0 1px #ffffff0a; }
:root[data-theme="light"] .dl-flowstage, :root[data-theme="light"] .dl-linstage { background: radial-gradient(70% 90% at 50% 0%, #f1f1f3 0%, #f7f7f8 50%, var(--bg) 100%); box-shadow: inset 0 0 0 1px #0000000d; }
.dl-cap { margin-top: 28px; max-width: 640px; }
.dl-cap h3 { font-size: 15px; font-weight: 500; color: var(--fg-1); }
.dl-cap p { margin-top: 4px; color: var(--fg-3); font-size: 15px; }
.dl-legend { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 12.5px; color: var(--fg-3); }
.dl-legend span { display: inline-flex; align-items: center; gap: 8px; }
.dl-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--bg-4); }
.dl-legend i.q { background: var(--fg-1); }
.dl-legend i.c, .dl-legend i.r { background: var(--blue); }
.dl-legend i.r { background: transparent; box-shadow: inset 0 0 0 1.5px var(--blue); }
.dl-legend i.d { background: var(--ok); }
.dl-legend i.o { background: var(--bg-4); }
.dl-legend i.k { background: transparent; box-shadow: inset 0 0 0 1.5px var(--amber); }
.dl-tabs { margin: 28px -40px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.dl-tab { position: relative; padding: 22px 28px 26px; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.dl-tab + .dl-tab { box-shadow: inset 1px 0 0 var(--line); }
.dl-tab b { font-weight: 500; font-size: 15px; color: var(--fg-3); transition: color .3s; }
.dl-tab span { font-size: 14px; color: var(--fg-4); transition: color .3s; }
.dl-tab::before { content: ""; position: absolute; left: 28px; right: 28px; top: -1px; height: 1px; background: var(--fg-1); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-enter); }
.dl-tab[aria-selected="true"] b { color: var(--fg-1); }
.dl-tab[aria-selected="true"] span { color: var(--fg-2); }
.dl-tab[aria-selected="true"]::before { transform: none; }
.dl-tab:hover b { color: var(--fg-1); }
.dl-tab:focus-visible, .dl-vtab:focus-visible, .dl-ask:focus-visible { outline: 2px solid var(--fg-2); outline-offset: -2px; border-radius: 8px; }

/* ---------- pillar 1: the email, its requests and the map of every page ---------- */
.dl-top { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; font-size: 13px; color: var(--fg-3); }
.dl-run { height: 30px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; box-shadow: inset 0 0 0 1px var(--line-3); color: var(--fg-2); max-width: 100%; }
.dl-run .ai-mark { --ai-mark-h: 10px; }
.dl-run-d { width: 6px; height: 6px; border-radius: 99px; background: var(--fg-4); flex: none; transition: background .3s; }
.dl-run.busy .dl-run-d { background: var(--fg-2); }
.dl-run.ok .dl-run-d { background: var(--ok); }
#dl-run-t { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-counts { margin-left: auto; display: flex; gap: 18px; white-space: nowrap; }
.dl-counts b { color: var(--fg-1); font-weight: 500; font-variant-numeric: tabular-nums; margin-right: 4px; }

.dl-flow { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 120px; align-items: start; }
.dl-threads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.dl-threads path { fill: none; stroke: var(--fg-4); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-draw) var(--ease-spring); }
.dl-mailx { border-radius: 14px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), 0 20px 40px #0000004d; overflow: hidden; }
.dl-mailx-h { height: 46px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--fg-3); }
.dl-mailx-h b { color: var(--fg-1); font-weight: 500; }
.dl-mailx-b { padding: 16px 18px 20px; color: var(--fg-2); font-size: 14.5px; line-height: 1.75; }
.dl-hl { --u: color-mix(in srgb, var(--fg-1) 40%, transparent); padding-bottom: 2px; background: linear-gradient(var(--u), var(--u)) no-repeat 0 100% / 0% 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size var(--dur-draw) var(--ease-spring), color var(--dur-hover); }
.dl-hl.on { background-size: 100% 1px; color: var(--fg-1); }
.dl-hl sup { position: relative; top: -1px; margin-left: 4px; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 99px; font-size: 10px; background: var(--bg-4); color: var(--fg-1); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s var(--ease-enter); vertical-align: 1px; }
.dl-hl.on sup { opacity: 1; transform: none; }
.dl-reqs { display: flex; flex-direction: column; gap: 12px; min-height: 380px; }
.dl-rq { padding: 14px 16px; border-radius: 14px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), 0 16px 32px #0000003d; font-size: 13px; opacity: 0; transform: translateX(-14px); filter: blur(3px); transition: opacity .6s var(--ease-enter), transform .6s var(--ease-enter), filter .6s, box-shadow .4s; }
.dl-rq.in { opacity: 1; transform: none; filter: none; }
.dl-rq-h { display: flex; align-items: center; gap: 10px; color: var(--fg-3); }
.dl-chip { margin-left: auto; height: 22px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 12px; white-space: nowrap; color: var(--fg-3); background: transparent; box-shadow: inset 0 0 0 1px var(--line-3); transition: color var(--dur-hover), background var(--dur-hover), box-shadow var(--dur-hover); }
.dl-chip.k { color: var(--ok); background: var(--ok-tint); box-shadow: none; }
.dl-chip.c { color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent); box-shadow: none; }
.dl-rq .w { margin-top: 8px; color: var(--fg-1); font-size: 14px; }
.dl-rq .d { margin-top: 8px; min-height: 20px; color: var(--fg-3); font-size: 12.5px; line-height: 1.5; display: flex; gap: 8px; align-items: baseline; }
.dl-rq .d .ai-mark { --ai-mark-h: 9px; flex: none; }
.dl-rq .d .dl-sg { color: var(--fg-2); }
.dl-by { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-2); }
.dl-by .ap-av { width: 18px; height: 18px; font-size: 8.5px; }
.dl-hand { color: var(--fg-2); }
.dl-mailx.plain .dl-hl sup { display: none; }

.dl-map { position: relative; margin-top: 36px; padding-bottom: 92px; }
.dl-map-h { display: flex; justify-content: space-between; gap: 16px; font-size: 12.5px; color: var(--fg-3); margin-bottom: 12px; }
.dl-map-h b { color: var(--fg-1); font-weight: 500; }
.dl-map-note { text-align: right; }
.dl-strip { display: flex; gap: 6px; align-items: flex-end; }
.dl-s-g { flex: var(--n) 1 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dl-s-l { font-size: 10.5px; color: var(--fg-4); white-space: nowrap; overflow: hidden; height: 14px; }
.dl-s-t { display: flex; gap: 1px; height: 46px; }
.dl-s-t i { flex: 1; min-width: 0; border-radius: 1px; background: var(--bg-4); transition: background .4s, transform .4s var(--ease-enter); transform-origin: 50% 100%; }
.dl-s-t i.q { background: var(--fg-1); transform: scaleY(1.25); }
.dl-s-t i.c { background: var(--blue); transform: scaleY(1.25); }
.dl-s-t i.d { background: var(--ok); transform: scaleY(1.25); }
.dl-pins { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; }
.dl-pin { position: absolute; transform: translate(-50%, 10px); opacity: 0; transition: opacity .4s, transform .5s var(--ease-enter); }
.dl-pin.in { opacity: 1; transform: translate(-50%, 4px); }
.dl-pin::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 8px; background: currentColor; opacity: .6; }
.dl-pin span { position: relative; top: 9px; display: inline-block; height: 20px; padding: 0 7px; border-radius: 6px; font-family: "Geist Mono", monospace; font-size: 10.5px; line-height: 20px; white-space: nowrap; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3); color: var(--fg-1); }
.dl-pin.c { color: var(--blue); } .dl-pin.c span { color: var(--blue); }
.dl-pin.d { color: var(--ok); } .dl-pin.d span { color: var(--ok); background: var(--ok-tint); box-shadow: none; }
/* pins that sit close together stagger into rows */
.dl-pin[data-side="l"] span { left: calc(-50% + 1px); border-top-right-radius: 0; }
.dl-pin[data-side="r"] span { left: calc(50% - 1px); border-top-left-radius: 0; }
.dl-pin[data-row="1"] span { top: 33px; } .dl-pin[data-row="1"]::before { height: 33px; }
.dl-pin[data-row="2"] span { top: 57px; } .dl-pin[data-row="2"]::before { height: 57px; }

/* ---------- pillar 3: versions on a time axis, over a wall of every page ---------- */
.dl-vtabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dl-vtab { padding: 12px 14px; border: 0; border-radius: 12px; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .3s, box-shadow .3s; }
.dl-vtab b { font-weight: 500; font-size: 14px; color: var(--fg-3); }
.dl-vtab span { font-size: 12.5px; color: var(--fg-4); }
.dl-vtab[aria-selected="true"] { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3); }
.dl-vtab[aria-selected="true"] b { color: var(--fg-1); }
.dl-vtab[aria-selected="true"] span { color: var(--fg-2); }
.dl-vtab:hover b { color: var(--fg-1); }
.dl-time { position: relative; margin-top: 30px; }
.dl-time-track { position: relative; height: 64px; }
.dl-axis { position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: var(--line-3); }
.dl-band { position: absolute; top: 22px; height: 17px; border-radius: 6px; background: color-mix(in srgb, var(--fg-1) 5%, transparent); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .4s, box-shadow .4s; }
.dl-band em { position: absolute; left: 6px; top: -20px; font-style: normal; font-size: 11px; color: var(--fg-4); white-space: nowrap; }
.dl-band.on { background: color-mix(in srgb, var(--blue) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 50%, transparent); }
.dl-band.on em { color: var(--fg-1); }
.dl-band.rep em::after { content: ", replaced"; }
.dl-dot { position: absolute; top: 26px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 99px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--fg-4); transition: background .3s, box-shadow .3s; }
.dl-dot.on { background: var(--fg-2); box-shadow: none; }
.dl-dot.cur { background: var(--fg-1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg-1) 18%, transparent); }
.dl-head { position: absolute; top: 4px; bottom: 22px; width: 1px; background: var(--fg-1); opacity: .5; transition: left .5s var(--ease-enter); }
.dl-tk { position: absolute; bottom: -2px; font-size: 11px; color: var(--fg-4); transform: translateX(0); white-space: nowrap; }
.dl-tk:nth-last-child(2) { transform: translateX(-50%); }
.dl-tk.r { transform: translateX(-100%); }
.dl-scrub { display: block; position: absolute; left: 0; right: 0; top: 14px; height: 34px; }
.dl-scrub input { width: 100%; height: 34px; margin: 0; opacity: 0; cursor: ew-resize; }
.dl-scrub:focus-within ~ .dl-now, .dl-time:focus-within .dl-head { opacity: 1; }
.dl-time:focus-within .dl-time-track { outline: 2px solid var(--fg-3); outline-offset: 6px; border-radius: 6px; }
.dl-now { margin-top: 14px; min-height: 26px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg-2); }
.dl-now time { font-family: "Geist Mono", monospace; font-size: 12px; color: var(--fg-3); }
.dl-now b { color: var(--fg-1); font-weight: 500; }
.dl-vbody { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; }
.dl-wall { display: grid; grid-template-columns: 64px minmax(0, 1fr); row-gap: 7px; }
.dl-w-g { display: contents; }
.dl-w-l { font-size: 11px; color: var(--fg-4); line-height: 12px; white-space: nowrap; }
.dl-w-g.ttl .dl-w-l::before { content: "Title"; }
.dl-w-t { display: grid; grid-template-columns: repeat(32, minmax(0, 1fr)); gap: 3px; }
.dl-w-t i { aspect-ratio: 1; max-height: 14px; border-radius: 3px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .45s, box-shadow .45s, transform .45s var(--ease-enter); }
.dl-w-t i.n { background: color-mix(in srgb, var(--fg-1) 22%, transparent); box-shadow: none; }
.dl-w-t i.c { background: var(--blue); box-shadow: none; transform: scale(1.12); }
.dl-w-t i.r { background: transparent; box-shadow: inset 0 0 0 1.5px var(--blue); }
.dl-w-t i.k { background: transparent; box-shadow: inset 0 0 0 1.5px var(--amber); }
.dl-wall.final .dl-w-t i:not(.c):not(.r):not(.k) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 30%, transparent); }
.dl-vside { padding: 18px; border-radius: 14px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), 0 20px 40px #0000004d; font-size: 13px; }
.dl-vs-h { display: flex; align-items: center; gap: 10px; }
.dl-vs-h b { font-weight: 500; font-size: 15px; margin-right: auto; }
.dl-vs-why { margin-top: 8px; color: var(--fg-3); line-height: 1.55; }
.dl-vs-chg { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.dl-vs-chg .ap-key.c { color: var(--blue); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 45%, transparent); }
.dl-vs-chg .ap-key.r { color: var(--blue); }
.dl-vs-chg .ap-key.k { color: var(--amber); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 45%, transparent); }
.dl-vs-ev { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.dl-vs-ev li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line-2); color: var(--fg-2); animation: dl-in .4s var(--ease-enter); }
.dl-vs-ev time { font-family: "Geist Mono", monospace; font-size: 11px; color: var(--fg-3); padding-top: 2px; }
.dl-vs-files { margin-top: 12px; }
.dl-vs-files > div { height: 34px; display: flex; align-items: center; gap: 8px; color: var(--fg-1); font-size: 12.5px; animation: dl-in .4s var(--ease-enter); }
.dl-vs-files .dl-lock { box-shadow: inset 0 0 0 1.25px var(--ok); }
.dl-vs-files .dl-lock::before { border-color: var(--ok); }
.dl-vs-files .h { margin-left: auto; font-family: "Geist Mono", monospace; font-size: 11.5px; color: var(--fg-3); }
.dl-vs-rep { margin-top: 10px; color: var(--fg-3); font-size: 12.5px; }
@keyframes dl-in { from { opacity: 0; transform: translateY(4px); } }

/* ---------- the record: questions on the left, a ledger that writes itself on the right ---------- */
.dl-led { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 28px; align-items: start; }
.dl-asks { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 96px; }
.dl-ask { min-height: 48px; padding: 12px 16px; border: 0; border-radius: 10px; text-align: left; font: inherit; font-size: 14.5px; color: var(--fg-2); cursor: pointer; background: color-mix(in srgb, var(--bg-2) 80%, transparent); box-shadow: inset 0 0 0 1px var(--line-3); transition: background .2s, box-shadow .2s, color .2s; }
.dl-ask:hover { background: var(--bg-3); color: var(--fg-1); }
.dl-ask[aria-pressed="true"] { color: var(--fg-1); background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--fg-4); }
.dl-answer { margin-top: 10px; padding: 16px; border-radius: 12px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-2); min-height: 120px; }
.dl-answer-k { font-size: 12px; color: var(--fg-3); }
.dl-answer p { margin-top: 6px; color: var(--fg-1); font-size: 14.5px; line-height: 1.55; animation: dl-in .4s var(--ease-enter); }
.dl-ledger { border-radius: 16px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), 0 30px 60px #0000004d; overflow: hidden; }
.dl-led-in { position: relative; height: 620px; overflow-y: auto; padding: 8px 20px 20px; scrollbar-width: thin; scroll-behavior: auto; }
.dl-led-in:focus-visible { outline: 2px solid var(--fg-3); outline-offset: -2px; }
.dl-day, .dl-lr, .dl-led-f { opacity: 0; transform: translateY(6px); filter: blur(2px); transition: opacity .45s var(--ease-enter), transform .45s var(--ease-enter), filter .45s, color .3s; }
.dl-day.in, .dl-lr.in, .dl-led-f.in { opacity: 1; transform: none; filter: none; }
.dl-day { padding: 16px 0 6px 52px; font-size: 11.5px; color: var(--fg-4); }
.dl-lr { display: grid; grid-template-columns: 40px 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; color: var(--fg-2); line-height: 1.5; }
.dl-lr time { font-family: "Geist Mono", monospace; font-size: 11.5px; color: var(--fg-3); padding-top: 2px; }
.dl-lr .ap-av { width: 20px; height: 20px; font-size: 9px; }
.dl-lr b { font-weight: 500; color: var(--fg-1); }
.dl-lr .ap-key { margin-left: 6px; font-size: 11px; }
.dl-sys { width: 20px; height: 20px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line-3); }
.dl-ledger.asking .dl-lr.in:not(.hit) { opacity: .28; }
.dl-ledger.asking .dl-lr.hit { color: var(--fg-1); }
.dl-ledger.asking .dl-lr.hit time { color: var(--fg-1); }
.dl-led-f { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--bg-2); color: var(--fg-3); font-size: 12.5px; }
.dl-led-f b { color: var(--fg-1); font-weight: 500; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .dl-flow { gap: 64px; }
  .dl-vbody { grid-template-columns: 1fr; }
  .dl-vside { min-height: 0; }
}
@media (max-width: 900px) {
  .dl-act { flex-wrap: wrap; }
  .dl-flow { grid-template-columns: 1fr; gap: 16px; }
  .dl-threads { display: none; }
  .dl-reqs { min-height: 0; }
  .dl-led { grid-template-columns: 1fr; }
  .dl-asks { position: static; }
  .dl-vtabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dl-spec { padding: 96px 0 48px; }
  .dl-flowstage, .dl-linstage { padding: 24px 16px 0; margin-top: 40px; }
  .dl-tabs { margin: 24px -16px 0; grid-template-columns: 1fr; }
  .dl-tab + .dl-tab { box-shadow: inset 0 1px 0 var(--line); }
  .dl-tab { padding: 18px 16px 20px; }
  .dl-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dl-counts { margin-left: 0; gap: 12px; }
  #dl-run-t { white-space: normal; }
  .dl-run { height: auto; min-height: 30px; padding: 6px 12px; border-radius: 14px; }
  .dl-map-h { flex-direction: column; gap: 4px; }
  .dl-map-note { text-align: left; }
  .dl-strip { gap: 3px; }
  .dl-s-l { display: none; }
  .dl-s-t { height: 40px; gap: 0; }
  .dl-pins { display: none; }
  .dl-map { padding-bottom: 24px; }
  .dl-wall { grid-template-columns: 44px minmax(0, 1fr); }
  .dl-w-t { grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2px; }
  .dl-w-l { font-size: 10px; }
  .dl-led-in { height: 520px; padding: 4px 12px 16px; }
  .dl-lr { grid-template-columns: 36px minmax(0, 1fr); }
  .dl-lr .ap-av, .dl-lr .dl-sys { display: none; }
  .dl-day { padding-left: 48px; }
  .dl-wf { left: 4% !important; width: 92% !important; top: 48px !important; }
  .dl-wb { left: -30% !important; top: 90px !important; opacity: .5; }
  .dl-req { margin: 14px 12px 0; padding: 14px; }
  .dl-now { flex-wrap: wrap; row-gap: 2px; }
  .dl-band em { display: none; } .dl-band.on em { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .dl-threads path, .dl-rq, .dl-pin, .dl-day, .dl-lr, .dl-led-f, .dl-w-t i, .dl-s-t i, .dl-head { transition: none !important; }
  .dl-vs-ev li, .dl-vs-files > div, .dl-answer p { animation: none; }
}

/* ---------- phone: each scene shows its front window across the column, and its caption reads below the scene, not over it ---------- */
@media (max-width: 640px) {
  .stage2 { padding: 6px; border-radius: 16px; }
  .stage2-in { height: 500px; }
  .stage2-cap { position: static; max-width: none; padding: 18px 10px 10px; }
  .stage2-in > .win.back { display: none; }
  .stage2-in > .win:not(.back) { left: 10px !important; width: calc(100% - 20px) !important; top: 28px !important; }
  .win-bar { gap: 8px; padding: 0 12px; }
  .win-bar b, .win-bar .r { flex: none; white-space: nowrap; }
  .win-bar > span:not(.r):not(.ap-key):not(.as-crumb) { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .win-bar .ap-key, .win-bar .as-crumb { flex: none; }
  .dl-w-l { font-size: 12px; }
  .dl-lr time, .dl-day { font-size: 12px; }
  .dl-wall { grid-template-columns: 52px minmax(0, 1fr); }
}

/* ---------- feature cells: quiet product surfaces with status icons ---------- */
.dl-grid { margin-top: 56px; }
.dl-q { border-radius: 12px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3); overflow: hidden; font-size: 13px; color: var(--fg-1); }
.dl-q-h { height: 42px; padding: 0 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); color: var(--fg-3); font-size: 12.5px; }
.dl-q-h b { color: var(--fg-1); font-weight: 500; }
.dl-q-h .r { margin-left: auto; color: var(--fg-4); }
.dl-q-r { height: 40px; padding: 0 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); }
.dl-q-r:last-child { border-bottom: 0; }
.dl-q-r .k { color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-q-r time { margin-left: auto; color: var(--fg-4); font-size: 12px; font-variant-numeric: tabular-nums; }
.dl-q-r .ap-av, .dl-q-p .ap-av { width: 18px; height: 18px; font-size: 8px; }
.dl-q-f { padding: 10px 14px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--fg-4); font-size: 12px; }
.dl-q-f > span:first-child:not(.ap-btn) { margin-right: auto; }
.dl-q-p { padding: 8px 14px 12px; display: grid; grid-template-columns: 100px minmax(0, 1fr); font-size: 12.5px; }
.dl-q-p > span { height: 34px; display: flex; align-items: center; gap: 8px; }
.dl-q-p > span:nth-child(odd) { color: var(--fg-3); }
.si { width: 14px; height: 14px; display: block; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.si.ok circle { fill: var(--ok); stroke: none; } .si.ok path { stroke: var(--bg); stroke-width: 1.6; }
.si.chg circle { stroke: var(--blue); } .si.chg path { fill: var(--blue); stroke: none; }
.si.open circle { stroke: var(--fg-4); }
.dl-due { width: 8px; height: 8px; border-radius: 99px; background: var(--amber); flex: none; }
.dl-diff { padding: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.dl-diff del { color: var(--fg-4); }
.dl-diff ins { text-decoration: none; color: var(--fg-1); box-shadow: inset 2px 0 0 var(--blue); padding-left: 8px; }

/* ================= Invention round: seven close-out chores collapse into one press ================= */
.dl-one { margin-top: 64px; }
.dl-one-field { position: relative; height: 560px; border-radius: 16px; background: radial-gradient(70% 80% at 50% 0%, color-mix(in srgb, var(--fg-1) 5%, transparent), transparent 70%), var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3); overflow: hidden; }
:root[data-theme="light"] .dl-one-field { background: radial-gradient(70% 80% at 50% 0%, #fff, transparent 70%), var(--bg-2); }
.dl-ch { position: absolute; left: var(--x); top: var(--y); width: 27%; min-width: 0; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3), 0 16px 40px #00000040; transform: rotate(var(--r)); display: flex; flex-direction: column; gap: 10px; font-size: 13px; transition: transform var(--dur-swap) var(--ease-swap), opacity var(--dur-swap) var(--ease-swap), filter var(--dur-swap) var(--ease-swap); transition-delay: calc(var(--i, 0) * 70ms); }
:root[data-theme="light"] .dl-ch { background: #fff; box-shadow: inset 0 0 0 1px #00000014, 0 10px 30px #0000000f; }
.dl-ch-k { color: var(--fg-1); font-weight: 500; }
.dl-ch-f { display: flex; align-items: center; gap: 8px; color: var(--fg-3); font-family: "Geist Mono", monospace; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-ch-f i { font-style: normal; flex: none; height: 18px; padding: 0 5px; border-radius: 4px; display: inline-grid; place-items: center; font-size: 9.5px; background: var(--bg-3); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-3); }
.dl-ch-t { display: flex; align-items: center; justify-content: space-between; color: var(--fg-3); font-size: 12.5px; }
.dl-ch-t .tg { width: 26px; height: 15px; border-radius: 999px; background: var(--bg-4); position: relative; }
.dl-ch-t .tg::after { content: ""; position: absolute; left: 2px; top: 2px; width: 11px; height: 11px; border-radius: 999px; background: var(--fg-3); }
.dl-ch-t .tg.on { background: var(--fg-3); } .dl-ch-t .tg.on::after { left: 13px; background: var(--bg-1); }
.dl-ch-g { display: grid; grid-template-columns: auto auto auto auto; gap: 4px 10px; justify-content: start; font-size: 12px; color: var(--fg-3); }
.dl-ch-g b { color: var(--fg-1); font-weight: 500; }
.dl-ch-c { font-family: "Geist Mono", monospace; font-size: 11.5px; color: var(--fg-2); padding: 6px 8px; border-radius: 6px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); }
.dl-ch-s { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; font-size: 11.5px; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-3); border-radius: 4px; }
.dl-ch-s span { padding: 4px 8px; border-right: 1px solid var(--line-3); } .dl-ch-s span:last-child { border-right: 0; color: var(--amber); }
.dl-ch.keep { box-shadow: inset 0 0 0 1px var(--fg-4), 0 16px 40px #00000040; }
/* collapsed: each chore flies into the button and is gone; the one that stays moves beside the result */
.dl-one.done .dl-ch:not(.keep) { opacity: 0; filter: blur(6px); transform: translate(var(--tx, 0), var(--ty, 0)) scale(.18) rotate(0deg); }
.dl-one.done .dl-ch.keep { transform: translate(var(--kx, 0), var(--ky, 0)); transition-delay: .55s; }
.dl-one-res { position: absolute; left: 6%; top: 50%; width: 52%; transform: translateY(-46%); opacity: 0; filter: blur(6px); pointer-events: none; transition: opacity var(--dur-reveal) var(--ease-spring), filter var(--dur-reveal) var(--ease-spring), transform var(--dur-reveal) var(--ease-spring); }
.dl-one.done .dl-one-res { opacity: 1; filter: none; transform: translateY(-50%); transition-delay: .62s; pointer-events: auto; }
.dl-one-card { border-radius: 12px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3), 0 30px 80px #00000059; overflow: hidden; font-size: 13px; }
:root[data-theme="light"] .dl-one-card { background: #fff; box-shadow: inset 0 0 0 1px #00000014, 0 20px 60px #0000001a; }
.dl-one-h { height: 46px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); }
.dl-one-h b { font-weight: 500; } .dl-one-h .r { margin-left: auto; color: var(--fg-3); font-size: 12.5px; }
.dl-one-f { display: grid; grid-template-columns: minmax(0, 1fr) 52px auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line-2); }
.dl-one-f .k { color: var(--fg-3); font-size: 12px; } .dl-one-f .h { font-family: "Geist Mono", monospace; font-size: 11.5px; color: var(--fg-3); }
.dl-one-l { list-style: none; margin: 0; padding: 12px 16px 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 12.5px; color: var(--fg-2); }
.dl-one-l li { display: flex; align-items: center; gap: 8px; }
.dl-one-l li::before { content: ""; width: 10px; height: 6px; margin-top: -3px; border: solid var(--ok); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); flex: none; }
.dl-one-by { display: flex; align-items: center; gap: 8px; padding: 12px 16px 14px; color: var(--fg-2); font-size: 12.5px; }
.dl-one-by .r { margin-left: auto; color: var(--fg-3); }
.dl-one-keep { margin-top: 14px; color: var(--fg-3); font-size: 13.5px; }
.dl-one-act { margin-top: 24px; display: flex; align-items: center; gap: 16px; }
.dl-one-btn { border: 0; height: 44px; padding: 0 20px; border-radius: 10px; background: var(--inv); color: var(--inv-fg); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; display: inline-grid; place-items: center; transition: transform var(--dur-hover) var(--ease-spring), background var(--dur-enter), color var(--dur-enter), box-shadow var(--dur-enter); }
.dl-one-btn > span { grid-area: 1 / 1; transition: opacity var(--dur-hover); }
.dl-one-btn .t2 { opacity: 0; }
.dl-one-btn:active { transform: scale(.97); }
.dl-one-btn:focus-visible, .dl-one-again:focus-visible { outline: 2px solid var(--fg-2); outline-offset: 3px; }
.dl-one.done .dl-one-btn { background: var(--bg-3); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-3); cursor: default; }
.dl-one.done .dl-one-btn .t1 { opacity: 0; } .dl-one.done .dl-one-btn .t2 { opacity: 1; }
.dl-one-again { border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--fg-3); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity var(--dur-enter), color var(--dur-hover); }
.dl-one.done .dl-one-again { opacity: 1; pointer-events: auto; }
.dl-one-again:hover { color: var(--fg-1); }
@media (max-width: 900px) {
  .dl-one-field { height: auto; padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .dl-ch { position: relative; left: auto; top: auto; width: auto; transform: none; padding: 12px; }
  .dl-ch-f { white-space: normal; word-break: break-all; }
  .dl-one-res { left: 16px; right: 16px; width: auto; top: 16px; transform: none; }
  .dl-one.done .dl-one-res { transform: none; }
  .dl-one-l { grid-template-columns: 1fr; }
  .dl-one.done .dl-one-field { min-height: 520px; }
}
@media (max-width: 560px) { .dl-one-field { grid-template-columns: 1fr; } .dl-one-act { flex-wrap: wrap; } }

/* ================= Invention round: a copy names its version ================= */
.dl-id { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px; align-items: start; }
.dl-id-lbl { font-size: 12.5px; color: var(--fg-3); margin-bottom: 12px; }
.dl-id-file { width: 100%; border: 0; font: inherit; text-align: left; display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px; border-radius: 10px; background: var(--bg-1); color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--line-3); cursor: pointer; transition: box-shadow var(--dur-hover), opacity var(--dur-enter), transform var(--dur-swap) var(--ease-swap); }
.dl-id-file:hover { box-shadow: inset 0 0 0 1px var(--fg-4); }
.dl-id-file:focus-visible { outline: 2px solid var(--fg-2); outline-offset: 2px; }
.dl-id-file.used { background: var(--bg-2); box-shadow: inset 0 0 0 1.5px var(--fg-3); }
.dl-id-file .ic { width: 30px; height: 36px; border-radius: 4px; flex: none; display: grid; place-items: end center; padding-bottom: 5px; background: #fff; color: #b3261e; font-size: 8.5px; font-weight: 600; box-shadow: inset 0 0 0 1px #00000024; }
.dl-id-file .t { display: flex; flex-direction: column; min-width: 0; }
.dl-id-file b { font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-id-file .t span { color: var(--fg-3); font-size: 12px; }
.dl-id-hint { margin-top: 10px; font-size: 12.5px; color: var(--fg-4); }
.dl-id-rec { border-radius: 14px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), 0 30px 80px #0000004d; overflow: hidden; font-size: 13px; }
:root[data-theme="light"] .dl-id-rec { background: #fff; box-shadow: inset 0 0 0 1px #00000014, 0 20px 60px #00000014; }
.dl-id-rh { height: 46px; padding: 0 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line-2); }
.dl-id-rh b { font-weight: 500; } .dl-id-rh span { color: var(--fg-3); font-size: 12.5px; }
.dl-id-drop { margin: 16px 18px 6px; height: 64px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 18px; box-shadow: inset 0 0 0 1px var(--line-3); background-image: linear-gradient(90deg, var(--line-3) 50%, transparent 0); background-size: 0; color: var(--fg-3); transition: box-shadow var(--dur-hover), background-color var(--dur-hover); }
.dl-id-hash { font-family: "Geist Mono", monospace; font-size: 14px; letter-spacing: .04em; color: var(--fg-1); }
.dl-id-vs { list-style: none; margin: 0; padding: 6px 8px 8px; }
.dl-id-vs li { display: grid; grid-template-columns: 16px 84px minmax(0, 1fr) auto 52px; gap: 12px; align-items: center; padding: 10px 10px; border-radius: 8px; color: var(--fg-2); transition: background var(--dur-enter), color var(--dur-enter), opacity var(--dur-enter); }
.dl-id-vs li b { font-weight: 500; color: var(--fg-1); }
.dl-id-vs li .d { color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-id-vs li code { font-family: "Geist Mono", monospace; font-size: 11.5px; color: var(--fg-3); }
.dl-id-vs li time { color: var(--fg-3); font-size: 12px; text-align: right; }
.dl-id.has .dl-id-vs li { opacity: .4; }
.dl-id.has .dl-id-vs li.hit { opacity: 1; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-3); }
.dl-id-vs li.hit code { color: var(--fg-1); }
.dl-id-out { margin: 4px 18px 18px; padding: 14px 16px; border-radius: 10px; background: var(--bg-2); min-height: 82px; }
.dl-id-q { color: var(--fg-3); }
.dl-id-out h4 { margin: 0; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.dl-id-out p { margin-top: 4px; color: var(--fg-2); font-size: 13px; line-height: 1.55; }
.dl-id-out .warn { color: var(--amber); }
.dl-id-out > * { animation: dl-id-in var(--dur-enter) var(--ease-spring) both; }
@keyframes dl-id-in { from { opacity: 0; filter: blur(4px); transform: translateY(4px); } }
@media (max-width: 900px) {
  .dl-id { grid-template-columns: minmax(0, 1fr); }
  .dl-id-vs li { grid-template-columns: 16px 70px minmax(0, 1fr) 44px; }
  .dl-id-vs li code { display: none; }
  .dl-id-drop { flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; }
  .dl-id-hash { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .dl-ch, .dl-one-res, .dl-id-out > * { transition: none !important; animation: none !important; } }

/* ================= Linear round: A2 export fan from the mark (Finalize once) ================= */
.dl-xf { position: relative; margin: 72px 0 0; padding: 24px 0 8px; display: flex; justify-content: center; align-items: flex-start; gap: clamp(64px, 16vw, 240px); }
.dl-xf-wires { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; fill: none; }
.dl-xf-wires path { stroke: color-mix(in srgb, var(--fg-1) 16%, transparent); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 700ms var(--ease-swap); transition-delay: calc(300ms + var(--i) * 120ms); }
.dl-xf.seen .dl-xf-wires path { stroke-dashoffset: 0; }
.dl-xf-src { position: relative; z-index: 1; margin-top: 76px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dl-xf-src-l { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; color: var(--fg-3); white-space: nowrap; }
.dl-xf-src-l b { color: var(--fg-1); font-weight: 500; }
.dl-xf-out { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; width: 400px; display: flex; flex-direction: column; gap: 16px; }
.dl-xf-f { height: 72px; padding: 0 16px 0 14px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fg-1) 4%, transparent), transparent), var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), inset 0 1px 0 color-mix(in srgb, var(--fg-1) 5%, transparent); }
.dl-xf-ico { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3); font: 600 10.5px "Geist Mono", ui-monospace, monospace; color: var(--fg-2); }
.dl-xf-ico.w { font-size: 14px; }
.dl-xf-ico .dl-lock { margin-top: 5px; box-shadow: inset 0 0 0 1.25px var(--ok); }
.dl-xf-ico .dl-lock::before { border-color: var(--ok); }
.dl-xf-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-xf-t b { font-size: 14px; font-weight: 500; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-xf-t span { font-size: 12.5px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-xf-f code { font: 11.5px "Geist Mono", ui-monospace, monospace; color: var(--fg-3); }
/* more outputs exist, unnamed: three ghosts below, fainter and softer with distance */
.dl-xf-f.ghost { opacity: .2; filter: blur(2px); }
.dl-xf-f.ghost:nth-child(5) { opacity: .1; filter: blur(3px); }
.dl-xf-f.ghost:nth-child(6) { opacity: .05; filter: blur(4px); }
.dl-xf-f.ghost .dl-xf-t i { display: block; height: 7px; width: 70%; border-radius: 4px; background: var(--bg-4); }
.dl-xf-f.ghost .dl-xf-t i + i { width: 44%; margin-top: 6px; }
.dl-xf + .dl-cap { margin-left: auto; margin-right: auto; text-align: center; }
@media (max-width: 760px) {
  .dl-xf { justify-content: flex-start; gap: 40px; margin-top: 48px; }
  .dl-xf-src { margin-top: 84px; }
  .dl-xf-src .mark-tile { --s: 64px !important; }
  .dl-xf-src-l { display: none; }
  .dl-xf-out { width: auto; flex: 1; min-width: 0; }
  .dl-xf-f { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 0 12px; }
  .dl-xf-ico { width: 32px; height: 32px; }
  .dl-xf-f code { display: none; }
  .dl-xf-t b { font-size: 13px; }
  .dl-xf + .dl-cap { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .dl-xf-wires path { transition: none; stroke-dashoffset: 0; } }