@import url("./vinci-function-universal.css");
/* 2026-09-07 (Fable): the Place surface and the caption register below are the
   reference Atlas's own values, restored. During this foundation work they had
   drifted to a flat near-white card and to Manrope/system 500 at 10-11px in
   sentence case with grey ink; no accepted comment or report asks for that, and
   it changed every Place, Scope, Rail and Port caption on 129 routes. The one
   addition kept is `font-variant-numeric:tabular-nums` on the Rail count, which
   aligns digits without changing the register. */
/* Canonical static Vinci program forms, shared by Studio and Translator anatomy. */
.studio-visual-program{
  /* A narrow shared stage can sit inside a wide page. Its program must fit
     that stage even when the page's mobile media query does not apply. */
  position:relative;isolation:isolate;min-width:min(100%,360px);min-height:0;padding:10px;box-sizing:border-box;
  color:var(--ink);font-family:var(--sans)
}
/* The renderer always emits this layer for identity-preserving motion. Keep
   its coordinate space pinned to the VisualProgram in every consumer—not only
   Studio—so Atlas playback moves the exact authored Ball between ports. */
.vinci-program-motion-layer{
  position:absolute;inset:0;z-index:40;pointer-events:none;overflow:visible
}
.vinci-program-place{
  position:relative;width:min(100%,400px);min-height:0;display:flex;flex-direction:column;
  align-self:center;align-items:stretch;gap:14px;margin:0 auto;padding:44px 16px 22px;border:1px solid rgba(238,150,20,.24);border-radius:16px;
  background:radial-gradient(circle at 22% 15%,rgba(255,255,255,.98),rgba(255,248,235,.86) 58%,rgba(245,239,226,.72));
  box-shadow:0 20px 50px rgba(122,74,8,.075),inset 0 0 0 1px rgba(255,255,255,.72)
}
.vinci-program-place-label{
  position:absolute;left:18px;top:17px;color:var(--gold-deep);font:700 8px/1 var(--mono);
  letter-spacing:.15em;text-transform:uppercase
}
.vinci-program-place[data-context-evidence="inferred-no-boundary"] .vinci-program-place-label::after{
  content:"inferred host";display:inline-flex;margin-left:9px;padding:4px 7px;border:1px solid rgba(122,74,8,.18);
  border-radius:999px;color:var(--ink-mute);background:rgba(255,255,255,.72);font:450 9px/1 var(--sans,system-ui);
  letter-spacing:0;text-transform:none
}
.vinci-program-place[data-context-runtime][data-context-evidence="inferred-no-boundary"] .vinci-program-place-label::after{
  content:"declared source tier"
}
.vinci-program-scope{
  position:relative;align-self:center;width:fit-content;min-width:min(100%,320px);min-height:94px;box-sizing:border-box;padding:31px 10px 7px;border:1px solid rgba(21,17,13,.12);border-radius:14px;
  background:rgba(255,255,255,.88);box-shadow:0 2px 6px rgba(21,17,13,.025)
}
.vinci-program-scope-label{
  position:absolute;left:14px;top:13px;color:var(--ink-soft);font:650 9px/1 var(--mono);letter-spacing:.06em
}
/* A program whose only object is the row offered to a database has nothing
   left in its Program Scope: the row's one Ball waits at the database entry
   (one identity, one actor). Keep the scope as semantic structure with a
   clipped header, as a flat wrapper is, but draw no empty room above the
   database. A scope that holds anything keeps its room. */
:is(#semantic-stage,.vinci-visual-program) .vinci-program-place:has(>.vinci-program-top-operations .vinci-database-operation)
  >.vinci-program-scope[data-scope-kind="program"][data-scope-id]:not(:has(>:not(.vinci-program-scope-label):not(:empty))){
  min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important
}
:is(#semantic-stage,.vinci-visual-program) .vinci-program-place:has(>.vinci-program-top-operations .vinci-database-operation)
  >.vinci-program-scope[data-scope-kind="program"][data-scope-id]:not(:has(>:not(.vinci-program-scope-label):not(:empty)))
  >.vinci-program-scope-label{
  position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;
  overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important
}
/* Decision 0024: a `with` scope says, in words, that its dynamic lookup is not witnessed. */
.vinci-with-environment-note{max-width:34em;margin:0 0 8px;color:#6b6259;font:500 11px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;text-align:left}
.vinci-directive-badge{display:inline-flex;margin-left:7px;padding:3px 6px;border:1px solid rgba(122,74,8,.18);border-radius:999px;color:var(--gold-deep);background:#fff8eb;font:700 6.5px/1 var(--mono);letter-spacing:.02em}
/* Arrays sit in the same rows as the other value pills (sized to content). */
.vinci-program-definitions>.vinci-rail-seat{width:auto;max-width:100%;flex:0 1 auto}
.vinci-program-definitions>.vinci-rail-seat:not(:has(.vf-ballwrap,[data-ball-seat])){min-height:0}
/* Values fill rows like the functions shelf, centred, wrapping as needed. */
.vinci-program-definitions{min-height:56px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;align-content:center;gap:10px 12px}
/* ── Functions live in scope ────────────────────────────────────────────────
   `async function converseUntil() {}` is a binding on the scope that declares
   it, exactly as `const job = {...}` is: the scope's rack holds the Ball, and
   it holds this Function. Closed, the shell is a ƒ chip — the scope stays a
   scope, a row of small named things. Opened, the same shell unfolds right
   there: the rack gives it a row of its own and the scope grows around it,
   siblings pushed, nothing floating over the canvas. A call that names it
   may borrow the shell into its own seat while the call is open (the call
   mark, further down); a ghost then holds the slot until it comes home.
   One shell, two faces, wherever it is opened. */
.vinci-program-declared-functions{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;
  width:100%;box-sizing:border-box;margin-top:2px;padding-top:8px;border-top:1px dashed rgba(122,74,8,.16)
}
.vinci-program-declared-functions::before{
  content:"functions";flex:0 0 100%;text-align:center;color:var(--ink-mute);
  font:700 6.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase
}
.vinci-program-declared-functions[hidden]{display:none}
/* Values and declared functions share one lexical scope. Keep their native
   shelves for disclosure/ownership, but let their members fill the same rows. */
.vinci-program-scope:has(>.vinci-program-declared-functions){
  display:flex;flex-flow:row wrap;align-items:center;justify-content:center;align-content:center;gap:8px 10px;min-height:0;padding-bottom:12px
}
/* Declared program scopes otherwise force a one-column grid. The members
   of both native shelves must share the wrapping row layout here too. */
#semantic-stage>.semantic-visual-program[data-program-scope-presentation="declared"]>.vinci-program-place>.vinci-program-scope[data-scope-kind="program"]:has(>.vinci-program-declared-functions){display:flex!important}
.vinci-program-scope:has(>.vinci-program-declared-functions)>.vinci-program-definitions:not([hidden]):not([data-source-class-layout]),
.vinci-program-scope>.vinci-program-declared-functions:not([hidden]){display:contents}
.vinci-program-scope>.vinci-program-declared-functions::before{display:none}
.vinci-program-scope>.vinci-program-declared-functions>.vinci-program-function[data-scope-view="open"]{flex-basis:100%}
/* A shelf shows three, then 'Show N more' (foldProgramShelves in
   visual-program-renderer.mjs; this selector is PROGRAM_SHELF_FOLDED_UNIT).
   One rule for every host: past the first three only the unit the current
   step uses (pinned), a Function the reader opened, the reviewed mark and
   keyboard focus come out. A collapsed Function chip's `display:inline-flex!important`
   lives in @layer vinci-function-contract (vinci-function-universal.css), and
   a layered !important beats every unlayered one, so the fold sits in that
   same layer; `:is(#vinci-shelf-fold,*)` matches every unit but weighs an id,
   so within the layer it outranks the chip's (0,4,0). */
@layer vinci-function-contract{
  [data-vinci-shelf="folded"]>[data-vinci-shelf-overflow]:is(#vinci-shelf-fold,*):not([data-vinci-shelf-pinned],[data-scope-view="open"],[data-review-active],:focus-within){
    display:none!important
  }
}

/* The control is a shelf member in the Lab's own button face (the Function
   scope control's gold mono word, its hover glow) on the rack's dashed chip. */
.vinci-shelf-more{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:21px;margin:0;padding:4px 10px;
  border:1px dashed rgba(122,74,8,.34);border-radius:999px;color:var(--gold-deep);background:rgba(255,251,243,.6);
  box-shadow:none;font:700 8px/1 var(--mono);letter-spacing:.06em;cursor:pointer;justify-self:center
}
.vinci-shelf-more:hover,.vinci-shelf-more:focus-visible{
  outline:none;background:rgba(255,246,229,.98);box-shadow:0 0 0 2px rgba(238,150,20,.15)
}
.vinci-shelf-more[hidden]{display:none}
/* The chip: the one collapsed face of a navigator Function, wherever it
   stands — the rack, a nested home, a seat. Name only; the facts (`async`),
   the dock and the return come back when it opens. The canonical Play view
   collapses its frame to its own cover (below) and is left alone. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"]:not([data-function-play-state]):not([data-canonical-function-play="true"] *){
  position:relative;display:inline-flex;align-items:center;flex:0 0 auto;width:auto;min-width:0;max-width:100%;
  min-height:0;margin:0!important;padding:0;overflow:visible;cursor:pointer;
  border:1px solid rgba(122,74,8,.24);border-radius:999px;color:var(--ink);
  background:rgba(255,251,243,.96);box-shadow:0 1px 2px rgba(44,35,20,.04)
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"]:not([data-function-play-state]):not([data-canonical-function-play="true"] *):hover,
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"]:not([data-function-play-state]):not([data-canonical-function-play="true"] *):focus-visible,
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"]:not([data-function-play-state]):not([data-canonical-function-play="true"] *)[data-function-lookup-hover="true"]{
  outline:none;border-color:rgba(122,74,8,.55);background:#fff6e4;box-shadow:0 2px 6px rgba(122,74,8,.12)
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"]:not([data-function-play-state]):not([data-canonical-function-play="true"] *)>.vinci-program-function-label{
  position:static;display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:5px 10px 5px 8px
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"]:not([data-function-play-state]):not([data-canonical-function-play="true"] *)>.vinci-program-function-label::before{
  content:"ƒ";font:italic 600 13px/1 Georgia,"Iowan Old Style","Times New Roman",serif;color:var(--gold-deep)
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"]:not([data-function-play-state]):not([data-canonical-function-play="true"] *)>.vinci-program-function-label>.vinci-function-name-pill{
  border:0;background:none;box-shadow:none;padding:0
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"]:not([data-function-play-state]):not([data-canonical-function-play="true"] *)>.vinci-program-function-label>.vinci-function-name-pill>.vinci-binding-pill-name{
  font:700 11px/1 var(--mono);letter-spacing:.015em;color:var(--ink);text-transform:none
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"]:not([data-function-play-state]):not([data-canonical-function-play="true"] *)>.vinci-program-function-label>.vinci-reference-tether,
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"]:not([data-function-play-state]):not([data-canonical-function-play="true"] *)>.vinci-function-scope-control,
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"]:not([data-function-play-state]):not([data-canonical-function-play="true"] *)>.vinci-function-port,
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"]:not([data-function-play-state]):not([data-canonical-function-play="true"] *)>.vinci-function-call-routes,
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"]:not([data-function-play-state]):not([data-canonical-function-play="true"] *)>svg{
  display:none!important
}
/* Opened on the rack it stays on the rack: a row of its own, full width, the
   dock's overhang reserved above and the return's below (the chips before it
   stay on the row above; the ones after it move below). The place and the
   scope give it a definite width to resolve against — `width:fit-content`
   inside a 400px place would have handed a 13-row body 348px, and the rows'
   `min(100%, 760px)` would have had no 100% to read. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-declared-functions>.vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"]{
  flex:0 0 100%;width:100%;min-width:0;max-width:100%;box-sizing:border-box;margin:8px 0 0!important
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-declared-functions>.vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"]:has(.vinci-function-parameter-dock .vinci-parameter-binding-pill){
  margin-top:var(--vinci-parameter-dock-clearance,56px)!important
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-declared-functions>.vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"]:has(.vinci-function-return-output){
  margin-bottom:var(--vinci-return-output-clearance,72px)!important
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-place:has(.vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"]){width:min(100%,820px)}
.vinci-program-scope:has(>.vinci-program-declared-functions>.vinci-program-function[data-scope-view="open"]){width:100%}
/* The gap a borrowed shell left on the rack: out on loan to an open call
   mark, home again when the mark closes. */
.vinci-function-chip-ghost{
  display:inline-flex;align-items:center;gap:5px;padding:5px 10px 5px 8px;border:1px dashed rgba(122,74,8,.34);
  border-radius:999px;color:var(--ink-mute);background:rgba(255,251,243,.6);font:700 11px/1 var(--mono);letter-spacing:.015em
}
.vinci-function-chip-ghost::before{
  content:"ƒ";font:italic 600 13px/1 Georgia,"Iowan Old Style","Times New Roman",serif;color:var(--gold-deep);opacity:.6
}
/* ── A call names and borrows ───────────────────────────────────────────────
   The script's own call, `runPlaybook(job)`, is the one thing on the canvas
   at rest besides the scope: drawn below the scope card as a call mark — ƒ,
   the callee, its argument pills (the same value pills, summarised at 48),
   a disclosure. Opened, the callee's shell sits under the mark, borrowed. */
.vinci-program-script-calls{display:grid;justify-items:center;gap:10px;width:100%;min-width:0;margin-top:14px}
/* Fast keeps departure and arrival in their authored seats. This native
   allocation also lives in the unlayered primitives that own the base grid. */
[data-vinci-fast="true"] .vinci-program-script-calls{gap:32px}
.vinci-script-call{display:grid;justify-items:center;gap:8px;width:100%;min-width:0}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-script-call>.vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"]{
  width:100%;min-width:0;max-width:100%;box-sizing:border-box;margin:0
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-script-call>.vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"]:has(.vinci-function-parameter-dock .vinci-parameter-binding-pill){
  margin-top:var(--vinci-parameter-dock-clearance,56px)
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-script-call>.vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"]:has(.vinci-function-return-output){
  margin-bottom:var(--vinci-return-output-clearance,72px)
}
/* The call mark is the canonical call node, restyled where it is stamped.
   `call` and `callee(args)` stay in the node for the witness and the flow
   director, which address them; the pills say the arguments, so the callee's
   name stands alone before them. Same vocabulary as the chip it will borrow. */
.vinci-call-operation[data-call-mark]{
  display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%;padding:5px 9px 5px 10px;
  border:1px solid rgba(122,74,8,.24);border-radius:999px;color:var(--ink);background:rgba(255,251,243,.96);
  box-shadow:0 1px 2px rgba(44,35,20,.04);font:700 11px/1 var(--mono);white-space:nowrap;cursor:pointer
}
.vinci-call-operation[data-call-mark]::before{
  content:"ƒ";font:italic 600 13px/1 Georgia,"Iowan Old Style","Times New Roman",serif;color:var(--gold-deep)
}
.vinci-call-operation[data-call-mark]:hover,.vinci-call-operation[data-call-mark]:focus-visible{
  outline:none;border-color:rgba(122,74,8,.55);background:#fff6e4;box-shadow:0 2px 6px rgba(122,74,8,.12)
}
.vinci-call-operation[data-call-mark]>small,.vinci-call-operation[data-call-mark]>b{display:none!important}
/* The call's own ports are the flow director's anchors for the flight in and
   out of the callee; hidden at rest, never without geometry. The canonical
   Function surface paints them 12px (vinci-function-presentation.css, the
   boundary-call step, (0,4,0)); on a stamped mark they are still rest ports
   until a beat lands on the mark, so (0,6,0) says so there too. */
.vinci-call-operation[data-call-mark]>.vinci-function-call-port{visibility:hidden}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-call-operation[data-call-mark][data-callee-function-id].vinci-function-boundary-call-step:not([data-function-beat-active="true"]):not([data-witness-active="true"])>.vinci-function-call-port{
  visibility:hidden
}
.vinci-call-operation[data-call-mark]>.vinci-call-mark-callee{font:700 11px/1 var(--mono);letter-spacing:.015em;color:var(--ink)}
.vinci-call-operation[data-call-mark]>.vinci-function-call-arguments{
  display:inline-flex;align-items:center;gap:4px;min-width:0;margin-left:-3px
}
.vinci-call-operation[data-call-mark]>.vinci-function-call-arguments::before{content:"(";color:var(--ink-mute)}
.vinci-call-operation[data-call-mark]>.vinci-function-call-arguments::after{content:")";color:var(--ink-mute)}
/* The argument pill says its argument, not "arg 1:", and sits on the mark's
   own line: the same pill, its padding taken in to the chip's. */
.vinci-call-operation[data-call-mark] .vinci-function-argument-pill>.vinci-function-argument-name{display:none}
.vinci-call-operation[data-call-mark] .vinci-function-argument-pill{
  min-height:0;max-width:min(var(--vinci-mark-text-max,480px),calc(100vw - 120px));padding:3px 8px;font-size:10.5px;line-height:1.2
}
.vinci-call-operation[data-call-mark]>.vinci-call-mark-disclosure{font:700 11px/1 var(--mono);color:var(--gold-deep)}
/* The canonical Function surface (vinci-function-presentation.css, loaded
   after this sheet) lays every boundary call out as a 272px grid step at
   (0,4,0). A stamped mark is the mark there too; (0,5,0) says so once. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-call-operation[data-call-mark][data-callee-function-id].vinci-function-boundary-call-step{
  display:inline-flex;grid-template-columns:none;grid-template-rows:none;flex:0 0 auto;width:auto;min-width:0;max-width:100%;
  min-height:0;padding:5px 9px 5px 10px;border-radius:999px;overflow:visible;white-space:nowrap
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-call-operation[data-call-mark][data-callee-function-id].vinci-function-boundary-call-step>.vinci-function-call-arguments{
  grid-column:auto;align-self:auto;flex-wrap:nowrap;gap:4px;width:auto;margin:0 0 0 -3px
}
/* The witness (function-witness-surface.css) shows the authored `train(5)`
   as its inputs button, (1,1,1)+important, and hides the pills until they are
   edited. On a call mark the pills ARE the inputs — each one already opens
   the witness's own editor — so the text steps back here too. */
:is(#semantic-stage,.vinci-function-foundation-stage) .vinci-call-operation[data-call-mark][data-function-witness-call]>b{display:none!important}
:is(#semantic-stage,.vinci-function-foundation-stage) .vinci-call-operation[data-call-mark][data-function-witness-call] [data-function-argument-id]{
  --vinci-data-pill-h:auto;--vinci-data-pill-pad:3px 8px;--vinci-data-pill-font-size:10.5px
}
/* The witness lets its inputs wrap; on the mark `( 1 )` is one thing, and
   wrapping put the "(" alone on a line above the pill in a 269px stage. */
:is(#semantic-stage,.vinci-function-foundation-stage) .vinci-call-operation[data-call-mark][data-function-witness-call]>.vinci-function-call-arguments{flex-wrap:nowrap}
/* Borrowed into a binding pill's value seat, the shell's own name is the
   mark; the seat holds the shell and the pill grows with it
   (vinci-value-pill.mjs owns that growth). The mark waits in the seat, unseen.
   The row mark around the pill is shrink-wrapped; with a shell seated it
   takes the row, so the pill's 100% and the seat's have a width to read. */
.vinci-value-pill-slot>.vinci-call-operation[data-call-mark="open"]{display:none!important}
.vinci-function-row-mark:has(>.vinci-binding-pill[data-value-slot="activation"]){
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;width:100%;min-width:0;box-sizing:border-box
}
.vinci-function-row-mark>.vinci-binding-pill[data-value-slot="activation"]{width:100%;min-width:0;max-width:100%}
/* The written-order chain is max-content on purpose (an over-wide row reports
   its width up to a fit-content function). A seated shell is a query container
   and reports nothing, so the column and the row above a loan must be the
   definite width the seated shell resolves against — the enclosing function
   is itself seated at 100%, so there is one. The same chain for a shell
   seated in a bare call's row mark: without it the row stayed max-content
   and the inner shell was the width of its own mark, 139px. */
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-function-written-order:has(.vinci-binding-pill[data-value-slot="activation"]),
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-function-written-order:has(.vinci-function-row-mark>.vinci-call-operation[data-call-mark="open"]),
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-function-written-line:has(>.vinci-function-row-mark>.vinci-binding-pill[data-value-slot="activation"]),
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-function-written-line:has(>.vinci-function-row-mark>.vinci-call-operation[data-call-mark="open"]){
  width:100%;min-width:0;max-width:100%
}
/* A bare call statement inside a body keeps its own row: the shell sits under
   the mark in that row, and the row takes the column's width. Its return
   hangs below the frame as it does on the rack, so the row reserves the
   same clearance, or the inner return sat on the outer's. */
.vinci-function-row-mark:has(>.vinci-call-operation[data-call-mark="open"]){
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:8px;width:100%;min-width:0;box-sizing:border-box
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-function-row-mark>.vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"]{
  width:100%;min-width:0;max-width:100%;box-sizing:border-box;margin:0
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-function-row-mark>.vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"]:has(.vinci-function-parameter-dock .vinci-parameter-binding-pill){
  margin-top:var(--vinci-parameter-dock-clearance,56px)
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-function-row-mark>.vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"]:has(.vinci-function-return-output){
  margin-bottom:var(--vinci-return-output-clearance,72px)
}
/* The part row the call node came from, and the disclosure over it, have
   nothing left to say once the call is the pill's value. */
.vinci-function-row-parts[hidden],[data-function-source-row][data-function-row-vacated][hidden]{display:none!important}
/* Seated — on the rack, under the script's call, in a pill, in a row — the
   open shell has a definite width, and its dock must read it: the dock is
   absolute inside the 1px entry anchor, so a percentage resolves to 1px and
   the open-cover cap (600px) let a three-seat dock run 70px past a 276px
   shell on either side. The shell is the query container; the dock takes the
   shell's own inline size and wraps inside it. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  :is(.vinci-program-declared-functions,.vinci-script-call,.vinci-value-pill-slot,.vinci-function-row-mark)>.vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"]{
  container-type:inline-size
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  :is(.vinci-program-declared-functions,.vinci-script-call,.vinci-value-pill-slot,.vinci-function-row-mark)>.vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"]
  > .vinci-function-entry > .vinci-function-parameter-dock{
  max-width:min(calc(100cqw - 8px),var(--vinci-open-dock-max,600px),calc(100vw - 44px))
}
.vinci-program-block-scopes{display:grid;place-items:center;gap:8px;margin-top:8px}
.vinci-program-block-scopes[hidden]{display:none}
.vinci-program-block-scope{width:fit-content;min-width:min(100%,280px);min-height:76px;padding-top:32px;border-style:dashed;background:rgba(250,251,250,.88)}
.vinci-program-compact-callable-scopes{display:grid;place-items:center;gap:8px;margin-top:8px}
.vinci-program-compact-callable-scopes[hidden]{display:none}
.vinci-program-compact-callable-scope{
  width:fit-content;min-width:min(100%,280px);min-height:76px;padding-top:32px;border-style:dashed;
  background:rgba(250,251,250,.88)
}
.vinci-ball-seat{position:relative;width:100%;min-height:50px;display:grid;place-items:center;gap:4px}
/* The renderer already asks a seat to hide when its value is entry-owned —
   a parameter default such as `goals = ["fixture"]` (visual-program-renderer.mjs,
   the entry-owned pass). Nothing honoured the attribute, so the default was
   drawn a second time as a full Rail beneath the scope shelf. */
.vinci-rail-seat[hidden],.vinci-ball-seat[hidden]{display:none!important}
.vinci-function-local-definitions:not(:has(>:not([hidden]))){display:none}
.vinci-ball-binding-rack{position:relative;z-index:7;display:flex;align-items:flex-end;justify-content:center;gap:8px;max-width:100%;padding-bottom:1px;flex-wrap:wrap}
.vinci-ball-binding-link{display:grid;place-items:center;gap:0}
/* Geometry deliberately omitted: a binding pill on the Ball rack is the SAME
   pill as everywhere else (see "C1 · ONE PILL" at the foot of this file). */
.vinci-ball-binding-tether{height:13px}
.vinci-ball-home-anchor{position:absolute;left:50%;top:50%;width:1px;height:1px;pointer-events:none}
/* One explicit column: an auto column grows to the Rail's max-content and
   the Rail's `max-width:100%` is cyclic inside it (ignored), so two Balls in
   `team` made a 766px seat in a 601px scope and the page scrolled sideways.
   minmax(0,1fr) is the seat's own width; the Rail clamps to it and its
   track scrolls, as it was built to. */
.vinci-rail-seat{position:relative;width:100%;min-height:72px;display:grid;grid-template-columns:minmax(0,1fr);place-items:center}
.vinci-program-rail{
  position:relative;display:grid;gap:4px;width:max-content;max-width:100%;padding:8px 10px;
  border:1.5px solid rgba(238,150,20,.5);border-radius:20px;color:var(--ink);
  background:rgba(255,253,248,.64);box-shadow:0 9px 24px rgba(122,74,8,.055)
}
.vinci-rail-header{position:relative;z-index:2;display:flex;align-items:center;gap:5px;min-height:14px;padding:0 2px}
.vinci-rail-label{font:750 9px/1 var(--mono);color:var(--ink-soft)}
.vinci-rail-count{margin-left:auto;color:var(--gold-deep);font:800 8px/1 var(--mono);font-variant-numeric:tabular-nums}
.vinci-rail-binding-pill{margin-right:1px}
.vinci-rail-binding-pill .vinci-binding-pill-value{display:none}
.vinci-rail-track{
  position:relative;display:flex;align-items:flex-start;gap:4px;max-width:100%;padding:0;border:0;border-radius:0;
  background:transparent;box-shadow:none;overflow-x:auto;overflow-y:hidden
}
/* While one member is being edited, the Rail must not clip the editor's
   Done / Cancel row that sits above the track. Narrow-screen scrolling
   returns as soon as the editor closes. */
.vinci-rail-track:has(.vinci-value-pill-editor){overflow:visible}
/* A hovered full Ball paints a few pixels beyond its own box. Give a Rail of
   Balls real vertical clip room while preserving its compact measured height
   and its horizontal scroller. This avoids the tempting overflow:visible
   workaround, which would silently remove narrow-screen scrolling. */
.vinci-rail-track:has(> .vinci-rail-member[data-member-mark="ball"]){
  padding-block:8px 16px;margin-block:-8px -16px
}
.vinci-rail-member{
  position:relative;flex:0 0 auto;display:grid;place-items:center;min-width:48px;min-height:44px;padding:11px 7px 6px;
  box-sizing:border-box;border:1px solid rgba(21,17,13,.12);border-radius:8px;background:rgba(255,255,255,.94);
  box-shadow:0 3px 8px rgba(21,17,13,.055)
}
.vinci-rail-member-index{position:absolute;left:5px;top:4px;color:var(--ink-mute);font:650 6px/1 var(--mono)}
.vinci-rail-member-value{display:grid;place-items:center;gap:3px;max-width:112px;text-align:center;font:650 8px/1.2 var(--mono)}
.vinci-rail-member-value b{font:760 9px/1 var(--mono)}
.vinci-rail-member-value small{color:var(--ink-mute);font:620 6px/1.15 var(--mono)}
.vinci-rail-unknown-mark{display:grid;place-items:center;width:14px;height:14px;border:1px solid rgba(21,17,13,.18);border-radius:50%;color:var(--ink-soft);font:750 9px/1 var(--mono)}
.vinci-rail-member[data-member-kind="spread-unknown"]{min-width:86px}
.vinci-rail-member[data-member-kind="hole"]{min-width:34px;border-style:dashed;background:transparent;color:var(--ink-mute)}
.vinci-rail-member[data-member-kind="nested-rail"]{min-width:78px;padding:17px 5px 5px;background:rgba(255,253,248,.86)}
.vinci-rail-nested-host{display:grid;place-items:center;max-width:240px}
.vinci-rail-nested-host>.vinci-program-rail{transform:none;padding:6px;border-radius:9px;box-shadow:none}
.vinci-rail-nested-host>.vinci-program-rail>.vinci-rail-header{min-height:16px}
.vinci-rail-nested-host>.vinci-program-rail .vinci-rail-member{min-width:34px;min-height:32px}
.vinci-rail-nested-host>.vinci-program-rail .vinci-rail-member:not([data-member-mark]){padding:9px 5px 4px}
.vinci-reference-tether{
  position:relative;display:block;width:1px;height:23px;border-left:1.25px dashed rgba(121,108,91,.5);
  pointer-events:none
}
.vinci-reference-tether::after{
  content:"";position:absolute;left:-3px;bottom:-1px;width:7px;height:7px;border-right:1.25px solid rgba(121,108,91,.6);
  border-bottom:1.25px solid rgba(121,108,91,.6);transform:rotate(45deg)
}
.vinci-source-relationship{display:grid;align-items:center;justify-items:center;gap:7px;min-width:0;text-align:center}
.vinci-source-relationship>small{font:500 10px/1.3 var(--sans,system-ui);color:var(--ink-mute,#756c61)}
.vinci-source-relationship-route{width:72px;height:20px;display:grid;place-items:center}
.vinci-source-relationship-route>.vinci-reference-tether{height:62px;transform:rotate(-90deg)}
.vinci-source-relationship-route>.vinci-reference-tether[data-relationship-reverse="true"]{transform:rotate(90deg)}
.vinci-source-module-bindings{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:14px 4px 4px}
.vinci-program-operation[data-operation-kind="module-edge"]>.vinci-authored-operation-header>b{
  white-space:normal;overflow-wrap:anywhere;overflow:visible;text-overflow:clip
}
[data-source-sequence]>.vinci-rail-track{flex-wrap:wrap;overflow:visible}
[data-source-sequence] .vinci-rail-member-value{max-width:none}
.vinci-binding-pill{
  position:relative;z-index:4;display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:27px;
  padding:6px 12px;border:1px solid rgba(238,150,20,.48);border-radius:999px;color:var(--gold-deep);
  background:linear-gradient(180deg,#fff,#fff8eb);box-shadow:0 6px 15px rgba(122,74,8,.1);
  font:inherit;cursor:pointer;pointer-events:auto
}
.vinci-binding-pill:hover,.vinci-binding-pill:focus-visible{
  border-color:var(--gold);outline:none;box-shadow:0 0 0 4px rgba(238,150,20,.11),0 7px 18px rgba(122,74,8,.13)
}
/* .vinci-binding-pill-name / -value typography: see "C1 · ONE PILL" below. */
/* box-sizing stated: without it the 14px disc measured 16px and made the one
   pill 34px tall in exactly the cases that carry an unknown. */
.vinci-primitive-binding-pill.vinci-empty-binding-pill::after{content:"?";display:grid;place-items:center;box-sizing:border-box;width:14px;height:14px;margin-left:4px;border:1px dashed rgba(21,17,13,.24);border-radius:50%;color:var(--ink-mute);font:750 9px/1 var(--mono)}
.vinci-binding-inspector{
  position:absolute;left:50%;top:calc(100% + 8px);z-index:80;width:max-content;max-width:230px;padding:7px 9px;
  transform:translateX(-50%);border:1px solid rgba(122,74,8,.2);border-radius:8px;color:var(--ink-soft);
  background:#fff;box-shadow:0 12px 28px rgba(21,17,13,.14);font:650 7px/1.35 var(--mono);white-space:nowrap
}
.vinci-binding-inspector[hidden]{display:none}
/* The inspector's z-index:80 is scoped INSIDE the pill, and the pill sits at
   z-index:4 — so a later sibling pill painted straight over an open inspector
   and it read as "something opens behind the other pills". Lift the pill
   itself, which is the stacking context that actually competes. */
.vinci-binding-pill[data-inspector-open="true"]{z-index:90}
/* A Binding inspector is disclosure, not a layer that may cover the next
   value. Primitive bindings are rows in the program definition grid, so the
   open row earns enough real layout space for its absolute panel. Raising the
   z-index alone merely inverted the original defect (behind -> on top). */
.vinci-program-definitions>.vinci-primitive-binding-pill[data-inspector-open="true"]{
  margin-bottom:38px
}
.studio-visual-program .vf-ballwrap{position:relative;z-index:5;display:grid;place-items:center;min-width:56px;min-height:56px}
.studio-visual-program:not([data-motion-phase]) .vmark-ball-live[data-state="expanded"]:has(.vinci-field-operation-dock){overflow:visible}
/* A field's native editor is an attached control, not object content to clip
   into the circle. Preserve the Ball diameter and let the control open. */
.studio-visual-program:not([data-motion-phase]) .vmark-ball-live[data-state="expanded"]:has([data-vinci-value-pill-editor]){overflow:visible}
/* A field must stay INSIDE its ball. `max-width:none` let one long field grow
   to 1268px inside a 460px circle and slide out over the canvas. The usable
   chord across a circle is about 0.78 of its diameter; past that the pill
   truncates, and the renderer gives any truncated pill a title + aria-label so
   the full text stays recoverable. */
/* A field must stay INSIDE its ball, and the BALL must stay compact — a ball
   with one field may not outgrow a ball with two. So long text wraps (up to
   three lines) rather than inflating the circle around it; anything still cut
   keeps a title + aria-label from the renderer, so it stays recoverable. */
/* Historical DataBall behaviour: a structured value is a small Ball or [] in
   the field. Clicking it changes the contents of this same Ball; it does not
   grow a miniature graph inside the field. */
.vinci-ball-nested-field-trigger{cursor:pointer}
.vinci-ball-nested-field-trigger:hover,.vinci-ball-nested-field-trigger:focus-visible{
  outline:2px solid rgba(122,74,8,.46);outline-offset:2px;box-shadow:0 0 0 3px rgba(238,150,20,.12)
}
.vinci-ball-nested-field-trigger>.vinci-value-pill-value{display:inline-flex;align-items:center;line-height:1}
.vinci-ball-value-marker{display:inline-grid;vertical-align:middle;place-items:center;line-height:1}
.vinci-ball-value-marker-object>.vmark-ball-live,
.studio-visual-program:not([data-motion-phase]) .vinci-ball-value-marker-object>.vmark-ball-live[data-state="collapsed"]{width:18px!important;height:18px!important;padding:3px!important;box-shadow:0 3px 7px rgba(122,74,8,.28)}
.vinci-array-value-marker{min-width:16px;color:var(--gold-deep);font:800 10px/1 var(--mono);letter-spacing:-.04em}
.vinci-ball-nested-view-header{display:flex;align-items:center;justify-content:center;gap:7px;max-width:100%;font:700 8px/1.2 var(--mono);color:var(--ink)}
.vinci-ball-nested-view-header>button{padding:4px 6px;border:1px solid rgba(122,74,8,.42);border-radius:999px;background:rgba(255,255,255,.92);color:var(--gold-deep);font:700 7px/1 var(--mono);cursor:pointer}
.vinci-ball-nested-view-header>button:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.vinci-ball-binding-details{display:inline-grid;place-items:center;gap:3px;max-width:132px;padding:5px 8px;border:1px solid rgba(122,74,8,.22);border-radius:8px;color:var(--ink-soft);background:rgba(255,255,255,.94);box-shadow:0 4px 10px rgba(21,17,13,.1);font-family:var(--mono);pointer-events:none}
.vinci-ball-binding-details[hidden],.vinci-ball-reference-tether[hidden]{display:none!important}
.vinci-ball-binding-details b{color:var(--gold-deep);font:800 9px/1 var(--mono)}
.vinci-ball-binding-details small{font:650 6.5px/1.2 var(--mono);white-space:nowrap}
.studio-visual-program[data-motion-phase] .vinci-ball-binding-details{display:none!important}
.vinci-program-function{
  position:relative;align-self:center;width:min(100%,300px);min-height:198px;box-sizing:border-box;padding:38px 12px 24px;
  border:1.5px dashed rgba(122,74,8,.34);border-radius:16px;background:rgba(255,253,248,.86);
  box-shadow:0 14px 34px rgba(122,74,8,.055)
}
.vinci-program-function[data-state="active"]{border-style:solid;border-color:var(--gold);box-shadow:0 18px 42px rgba(238,150,20,.14)}
.vinci-program-function-label{
  position:absolute;left:14px;top:12px;z-index:20;display:flex;align-items:center;gap:4px;color:var(--ink);
  max-width:calc(100% - 28px);font:700 11px/1.2 var(--mono)
}
/* .vinci-function-name-pill carries no geometry of its own — one pill. */
/* The name is the most important thing on a closed cover, but it was the only
   flexible item beside a rigid `async` badge, so it absorbed every pixel of the
   squeeze — 37px for a name needing 119px, rendering `con…`. Give it the space
   first and let the badge yield. */
.vinci-program-function-label>.vinci-function-name-pill{flex:1 1 auto;min-width:0}
.vinci-program-function-label>.vmark-facts{flex:0 1 auto;min-width:0}
.vinci-function-name-tether{width:13px;height:1px;border-left:0;border-top:1.25px dashed rgba(121,108,91,.5)}
.vinci-function-name-tether::after{left:auto;right:-1px;bottom:-3px}
.vinci-function-signature{overflow:hidden;font:700 10px/1 var(--mono);color:var(--ink-soft);text-overflow:ellipsis;white-space:nowrap}
/* The mouth is the atom; labels, seats and connected lines belong to the
   enclosing Function or Decision. Entry and exit use the same opening,
   positioned on the boundary where the real flow enters or leaves. */
.vinci-port-socket,.vinci-control-lane .vinci-port-socket{
  display:block;box-sizing:border-box;flex:none;width:var(--vinci-port-size,10px);height:var(--vinci-port-size,10px);
  border:var(--vinci-port-edge-width,1.5px) solid var(--vinci-port-edge,rgba(122,74,8,.38));
  border-radius:50%;background:var(--vinci-port-fill,#fff);
  box-shadow:var(--vinci-port-shadow,none);pointer-events:none
}
.vinci-port-socket[data-vinci-port-scale="object"]{
  width:30px;height:30px;border:1px dashed rgba(152,95,11,.46);
  background:rgba(255,255,255,.9);box-shadow:none
}
.vinci-port-socket[data-vinci-port-state="active"]{
  border-color:rgba(171,115,34,.72);background:#f5d49f;
  box-shadow:0 0 0 3px rgba(238,150,20,.1)
}
.vinci-port-socket[data-vinci-port-state="passed"]{
  border-style:solid;border-color:rgba(152,95,11,.62);background:#e8e4dc;
  box-shadow:0 0 0 3px rgba(122,74,8,.07)
}
/* Existing connection appearances are declared here, not repainted by each
   L1. Their consumer positions the node and supplies actual lifecycle state. */
.vinci-port-socket[data-vinci-port-appearance="branch-step"]{--vinci-port-size:14px;--vinci-port-edge-width:2px;--vinci-port-shadow:none}
.vinci-port-socket[data-vinci-port-appearance="boundary"]{--vinci-port-size:18px;--vinci-port-edge-width:2px;--vinci-port-edge:rgba(122,74,8,.4);--vinci-port-shadow:none}
.vinci-port-socket[data-vinci-port-appearance="continuation"]{--vinci-port-size:18px;--vinci-port-edge-width:2px;--vinci-port-edge:rgba(152,95,11,.48);--vinci-port-shadow:none}
.vinci-port-socket[data-vinci-port-appearance="outcome"]{--vinci-port-size:8px;--vinci-port-edge:#c9bfb1;--vinci-port-fill:#fff;--vinci-port-shadow:0 0 0 3px rgba(122,74,8,.055)}
.vinci-port-socket[data-vinci-port-appearance="outcome"][data-vinci-port-state="active"]{
  border-color:var(--gold,#ee9614);
  background:radial-gradient(circle,#fff 0 34%,#ffd992 36% 58%,var(--gold,#ee9614) 60% 100%);
  box-shadow:0 0 0 6px rgba(238,150,20,.12),0 0 18px rgba(238,150,20,.28)
}
.vinci-port-socket[data-vinci-port-appearance="case-entry"]{--vinci-port-edge-width:2px;--vinci-port-edge:rgba(122,74,8,.36);--vinci-port-fill:#fffdfa;--vinci-port-shadow:none}
.vinci-port-socket[data-vinci-port-appearance="condition-outlet"]{--vinci-port-edge-width:1px;--vinci-port-edge:rgba(139,119,86,.46);--vinci-port-shadow:0 0 0 3px #fff}
.vinci-port-socket[data-vinci-port-appearance="canonical-if-outlet"]{--vinci-port-edge-width:1px;--vinci-port-edge:rgba(122,74,8,.32)}
.vinci-port-socket[data-vinci-port-appearance="counted-entry"]{--vinci-port-edge:rgba(122,74,8,.42);--vinci-port-shadow:0 0 0 4px rgba(255,255,255,.76)}
.vinci-port-socket[data-vinci-port-appearance="counted-entry"][data-state="active"]{border-color:#c97d0e;background:#fcfcfb;box-shadow:0 0 0 4px rgba(238,150,20,.1)}
.vinci-port-socket[data-vinci-port-appearance="witness-return"]{border-color:#b5a27e!important;background:#fffdf9!important;box-shadow:none!important}
.vinci-port-socket[data-vinci-port-appearance="direct-return"]{--vinci-port-size:11px;--vinci-port-edge-width:1.75px;--vinci-port-fill:#fdfdfd;--vinci-port-shadow:0 0 0 4px rgba(122,74,8,.08)}
.vinci-control-lane:is([data-state="active"],[data-state="taken"],[data-state="observed"],[data-state="selected"])>.vinci-port-socket:is([data-vinci-port-appearance="condition-outlet"],[data-vinci-port-appearance="canonical-if-outlet"]){border-color:#c97d0e;background:#f5f3ef}
.vinci-port-socket[data-vinci-port-appearance="loop-entry"]{--vinci-port-size:12px;--vinci-port-edge-width:2px;--vinci-port-edge:rgba(122,74,8,.42);--vinci-port-fill:#fffdfa;--vinci-port-shadow:0 0 0 4px rgba(238,150,20,.08)}
.vinci-port-socket[data-vinci-port-appearance="loop-outlet"]{--vinci-port-size:14px;--vinci-port-edge-width:2px;--vinci-port-edge:rgba(122,74,8,.34);--vinci-port-fill:#fffdfa;--vinci-port-shadow:0 0 0 4px rgba(238,150,20,.07)}
.vinci-port-socket[data-vinci-port-appearance="call-receiver"]{width:30px!important;height:30px!important;border:1px dashed rgba(122,74,8,.55)!important;border-radius:50%!important;background:#fff!important;box-shadow:none!important}
.vinci-control-lane[data-state="active"]>.vinci-port-socket[data-vinci-port-appearance="loop-outlet"]{border-color:#c97d0e!important;box-shadow:0 0 0 5px rgba(238,150,20,.13)!important}
.vinci-port-socket[data-loop-motion-state="active"]{border-color:#ee9614!important;box-shadow:0 0 0 7px rgba(238,150,20,.16)!important}
.vinci-port-socket[data-loop-motion-state="passed"]{border-color:#c97d0e!important}
:is([data-state="active"],[data-state="taken"],[data-state="observed"])>.vinci-control-connection>.vinci-port-socket{border-color:#c97d0e;background:#f6f4f1}
.vinci-control-route{fill:none;stroke:var(--vinci-route-ink,rgba(122,74,8,.3));stroke-width:var(--vinci-route-width,1.7);vector-effect:non-scaling-stroke}
.vinci-control-route[data-active="true"]{stroke:var(--vinci-route-active-ink,#c97d0e);stroke-width:var(--vinci-route-active-width,2.2)}
.vinci-control-route[data-edge-kind="branch-decision"]{stroke-width:2}
.vinci-control-route[data-vinci-route-appearance="stem"]{--vinci-route-ink:rgba(122,74,8,.28);--vinci-route-width:1}
.vinci-control-route[data-vinci-route-appearance="fork"]{--vinci-route-ink:rgba(122,74,8,.48);--vinci-route-width:1.5;stroke-dasharray:3 2}
.vinci-control-route[data-vinci-route-appearance="outcome-stem"]{--vinci-route-ink:#c9bfb1;--vinci-route-width:1.5;--vinci-route-active-ink:var(--gold,#ee9614);--vinci-route-active-width:1.5}
.vinci-control-route[data-vinci-route-appearance="return-stem"]{--vinci-route-ink:rgba(152,95,11,.4);--vinci-route-width:1.5}
.vinci-control-route[data-vinci-route-appearance="witness-stem"]{stroke:#c9bca5!important;stroke-width:1.5}
.vinci-function-return-port[data-state="observed"]>svg>.vinci-control-route[data-vinci-route-appearance="return-stem"]{stroke:#c97d0e}
:is(.vlf-l2-cover,.vfc-function-cover) .vinci-function-return-port[data-state="unlit"]>svg>.vinci-control-route[data-vinci-route-appearance="return-stem"]{stroke:#c9bfb1}
.vinci-control-route[data-vinci-route-appearance="geometry"]{stroke:none!important}
.vinci-control-connection{position:relative;display:block;width:10px;height:26px;pointer-events:none}
.vinci-control-connection-line{position:absolute;left:4px;top:0;width:2px;height:26px;overflow:visible}
.vinci-control-connection>.vinci-port-socket{position:absolute;left:0;top:-5px}
.vinci-loop-boundary[data-loop-boundary-appearance="collection"]{
  border:1px solid rgba(122,74,8,.24)!important;border-radius:30px!important;
  background:rgba(255,255,255,.96)!important;box-shadow:0 8px 20px rgba(122,74,8,.07)!important
}
.vinci-loop-boundary[data-loop-boundary-appearance="counted"]{
  border:1.5px solid rgba(176,106,16,.46);border-radius:19px;
  background:linear-gradient(168deg,rgba(255,253,249,.98),rgba(255,248,236,.94));
  box-shadow:0 9px 23px rgba(122,74,8,.06),inset 0 1px 0 rgba(255,255,255,.92)
}
.vinci-loop-boundary[data-loop-boundary-appearance="collection-overlay"]{
  border:2px solid rgba(238,150,20,.82);border-radius:15px;background:transparent;box-shadow:none
}
.vinci-function-port{position:absolute;left:50%;z-index:45;width:1px;height:1px;color:var(--gold-deep);pointer-events:none}
.vinci-function-entry{top:0}.vinci-function-exit{bottom:0}
.vinci-function-entry::before,.vinci-function-exit::after{
  content:"";position:absolute;left:0;width:1px;height:24px;border-left:1px dashed rgba(184,137,67,.45)
}
.vinci-function-entry::before{bottom:11px}.vinci-function-exit::after{top:11px}
.vinci-function-port-mouth{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)
}
.vinci-function-port-copy{position:absolute;left:18px;display:grid;gap:3px;width:max-content;max-width:180px}
.vinci-function-port-copy[hidden]{display:none}
.vinci-function-entry .vinci-function-port-copy{top:-14px}.vinci-function-exit .vinci-function-port-copy{bottom:-14px}
.vinci-function-port-name{font:750 10px/1 var(--mono)}
.vinci-function-port-copy small{color:var(--ink-mute);font:600 7px/1 var(--mono);letter-spacing:.04em}
.vinci-function-port[data-state="active"] .vinci-function-port-mouth{
  border-color:#fff;background:var(--gold,#ee9614);
  box-shadow:0 0 0 1px rgba(161,116,48,.58),0 0 0 4px rgba(238,150,20,.1)
}
.vinci-function-port[data-state="passed"] .vinci-function-port-mouth,
.vinci-function-port[data-state="done"] .vinci-function-port-mouth{
  border-color:#fff;background:#c97d0e;box-shadow:0 0 0 1px rgba(122,74,8,.45)
}
.vinci-program-function .vinci-function-entry>.vinci-binding-pill.vinci-parameter-binding-pill{
  position:absolute;left:16px;top:-16px;pointer-events:auto
}
/* Those pills straddle the top edge — 16px of a 32px pill hangs inside the
   frame — and the name label sat 12px down: on the plain (non-navigator)
   shell of the legacy Function, Parameters, Call and Return lessons the
   label's box met a two-parameter dock by 4px. Six pixels more for the
   label, and the same six for the frame so the body keeps its distance.
   The navigator shell and the canonical surfaces lay their own header. */
.vinci-program-function:not([data-function-scope-navigator="true"]):not([data-function-play-state]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *):has(>.vinci-function-entry>.vinci-parameter-binding-pill){
  padding-top:44px
}
.vinci-program-function:not([data-function-scope-navigator="true"]):not([data-function-play-state]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *):has(>.vinci-function-entry>.vinci-parameter-binding-pill)>.vinci-program-function-label{
  top:18px
}
.vinci-program-function .vinci-function-entry:has(>.vinci-parameter-binding-pill:nth-of-type(2))>.vinci-parameter-binding-pill:nth-of-type(1){left:auto;right:16px}
.vinci-program-function .vinci-function-entry>.vinci-parameter-binding-pill:nth-of-type(2){left:16px}
.vinci-program-function .vinci-function-entry>.vinci-parameter-binding-pill:nth-of-type(3){left:auto;right:76px}
.vinci-program-function .vinci-function-entry>.vinci-parameter-binding-pill:nth-of-type(4){left:76px}
.vinci-function-parameter-dock{
  position:absolute;left:50%;top:auto;bottom:14px;z-index:48;display:flex;align-items:center;justify-content:center;gap:4px;
  max-width:min(260px,calc(100vw - 44px));transform:translateX(-50%);pointer-events:auto
}
.vinci-function-parameter-dock[hidden]{display:none!important}
/* Several or long parameters wrap inside the dock instead of running past the
   Function frame; a name that still cannot fit is clipped with an ellipsis
   while its full text stays in the DOM for readers and editors. */
.vinci-function-parameter-dock{width:max-content;max-width:280px;flex-wrap:wrap;row-gap:4px}
.vinci-function-parameter-dock .vinci-function-parameter-slot{min-width:0;max-width:100%}
.vinci-function-parameter-dock .vinci-function-parameter-input{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;min-width:0;max-width:100%}
.vinci-function-parameter-dock .vinci-binding-pill{max-width:100%;overflow:hidden}
.vinci-function-parameter-dock .vinci-binding-pill .vinci-binding-pill-name{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
/* For scalar-only Functions the authored parameter seat IS the entry port.
   Reuse it in every expanded L1 view, including a disclosed L2. Reference
   inputs keep their existing Ball socket and transport grammar. */
/* The dock is centred ON the function's top edge, so half of it always hangs
   outside the frame — and with flex-wrap a four- or five-parameter dock grows
   to two rows, which doubles the overhang. Nothing reserved that space, so it
   landed on whatever sat above: the previous function's title and its pills.
   Reserve it on the function itself; the dock's own position is unchanged. */
/* Only the GAP between stacked functions needs reserving. The first one's dock
   hangs into the scope's own padding, so a leading margin there just pushes the
   whole composition out of the stage. Measured need: 84px of dock overhang
   above meeting 55px of return underhang below = 139px between neighbours. */
.vinci-program-function:has(.vinci-function-parameter-dock .vinci-parameter-binding-pill):not(:first-child):not([data-scope-view="collapsed"]){
  margin-top:var(--vinci-parameter-dock-clearance,56px)
}
/* A Function opened in a nested home is the first child of that home, and
   what sits above it is not scope padding but the enclosing body's own rows
   — a six-parameter dock landed squarely on them. */
.vinci-function-nested-scopes>.vinci-program-function:has(.vinci-function-parameter-dock .vinci-parameter-binding-pill):not([data-scope-view="collapsed"]){
  margin-top:var(--vinci-parameter-dock-clearance,56px)
}
/* The dock wraps at 280px, so a third parameter starts a second row and the
   overhang grows by a row's height. Measured: a four-parameter dock reaches
   84px above its own frame. */
.vinci-program-function:has(.vinci-function-parameter-dock .vinci-function-parameter-slot:nth-of-type(3)){
  --vinci-parameter-dock-clearance:80px
}
/* The return output hangs BELOW its own frame the same way the dock hangs
   above it. Two stacked functions therefore meet in the gap: one function's
   `return:` lands in the next function's parameter pills. Reserve that too. */
.vinci-program-function:has(.vinci-function-return-output):not([data-scope-view="collapsed"]){
  margin-bottom:var(--vinci-return-output-clearance,72px)
}
.vinci-program-function:not(.vfc-function-cover--canonical-face):has(.vinci-function-value-parameter-seat):not(:has(.vinci-function-object-parameter-seat))
  > .vinci-function-entry > .vinci-function-parameter-dock{
  top:0!important;bottom:auto!important;transform:translate(-50%,-50%)!important
}
.vinci-program-function:not(.vfc-function-cover--canonical-face):has(.vinci-function-value-parameter-seat):not(:has(.vinci-function-object-parameter-seat))
  > .vinci-function-entry > .vinci-function-port-mouth{visibility:hidden!important}
.vinci-function-parameter-introducer{
  flex:0 0 auto;color:var(--ink-mute);font:700 6px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase
}
.vinci-function-parameter-dock>.vinci-binding-pill.vinci-parameter-binding-pill{
  position:static;left:auto;right:auto;top:auto;min-width:0;max-width:112px
}
.vinci-function-parameter-input{position:relative;z-index:2;white-space:nowrap;pointer-events:auto}
.vinci-function-parameter-input>.vinci-parameter-input-value{color:var(--gold-deep);border-bottom:1px solid rgba(122,74,8,.35);font-weight:750}
.vinci-function-call-routes{
  /* The Call card hangs above the Function by its bottom edge, so a Call with
     several seats grows upward instead of sinking over the entry mouth. Its
     stem (below) still reaches down to the entry. */
  position:absolute;left:50%;top:auto;bottom:calc(100% + 24px);z-index:30;display:flex;align-items:center;gap:6px;transform:translateX(-50%);
  pointer-events:none
}
.vinci-function-call-routes[hidden]{display:none}
/* Room above the frame for the Call card that hangs over its entry. */
.vinci-program-function:has(> .vinci-function-call-routes:not([hidden])){margin-top:calc(var(--vinci-call-routes-height,42px) + 30px)}
.vinci-function-call-routes::after{
  content:"";position:absolute;left:50%;top:100%;width:1px;height:22px;border-left:1.5px dashed rgba(238,150,20,.5)
}
.vinci-call-operation{
  position:relative;z-index:2;display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid rgba(238,150,20,.44);
  border-radius:999px;color:var(--ink-soft);background:#fff;box-shadow:0 7px 18px rgba(122,74,8,.1);
  font:650 9px/1 var(--mono);white-space:nowrap
}
.vinci-call-operation small{color:var(--gold-deep);font:750 7px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.vinci-call-operation b{color:var(--ink);font:750 9px/1 var(--mono)}
.vinci-call-operation[data-function-parameter-inside-call="true"]{
  display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:center;
  column-gap:7px;row-gap:4px;min-height:42px;padding:18px 13px 7px;overflow:visible
}
.vinci-call-operation[data-function-parameter-inside-call="true"]>small{grid-column:1;grid-row:1}
.vinci-call-operation[data-function-parameter-inside-call="true"]>b{grid-column:2;grid-row:1}
.vinci-call-operation[data-function-parameter-inside-call="true"]>.vinci-function-call-arguments{
  grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:center;gap:5px;
  min-width:0;overflow:visible
}
.vinci-call-operation[data-function-parameter-inside-call="true"]
  .vinci-function-parameter-slot{display:inline-flex;min-width:0}
.vinci-call-operation[data-function-parameter-inside-call="true"]
  .vinci-parameter-binding-pill{position:static;inset:auto;min-width:0;max-width:148px}
.vinci-function-call-port{
  position:absolute;left:50%;z-index:5;display:block;box-sizing:border-box;width:10px;height:10px;
  transform:translateX(-50%);border:1.5px solid rgba(122,74,8,.42);border-radius:50%;
  background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.82);pointer-events:none
}
.vinci-function-call-port[hidden]{display:none!important}
.vinci-function-call-input-port{top:-5px}.vinci-function-call-output-port{bottom:-5px}
.vinci-function-call-routes:has(>.vinci-call-operation[data-function-parameter-inside-call="true"]){top:-75px}
.vinci-function-call-routes:has(>.vinci-call-operation[data-function-parameter-inside-call="true"])::after{height:22px}
.vinci-call-reference-tether{width:20px;height:1px;border-left:0;border-top:1.25px dashed rgba(121,108,91,.5)}
.vinci-call-reference-tether::after{left:auto;right:-1px;bottom:-3px}
.vinci-return-operation:not(.vinci-function-return-output){
  position:absolute;left:16px;bottom:-12px;z-index:3;display:inline-flex;padding:6px 9px;border:1px solid rgba(201,125,14,.36);
  border-radius:999px;color:#985f0b;background:#fbfbfa;box-shadow:0 7px 18px rgba(122,74,8,.08);
  font:750 9px/1 var(--mono);white-space:nowrap;pointer-events:auto
}
.vinci-function-exit>.vinci-return-operation.vinci-function-return-output{
  position:absolute;left:50%;top:14px;bottom:auto;z-index:49;display:inline-flex;
  transform:translateX(-50%);white-space:nowrap;pointer-events:auto
}
.vinci-function-return-output>.vinci-return-output-value{color:#7a4a08;border-bottom:1px solid rgba(152,95,11,.48);font-weight:750}
/* The Return pill shows its expression at rest — object-translator.css says so
   and lifts the hover-reveal's visibility and position, but never its
   `display:none`, so `return: work` read as a bare `return:` until some editor
   style happened to load and set display for it. Say it here, once. */
.vinci-function-return-port>.vinci-function-return-output:has(>[data-vinci-value-pill-value])>[data-vinci-value-pill-value]:not([data-dismissed="true"]){
  display:block;position:static;visibility:visible;opacity:1;translate:none;transform:none
}
/* The rest of that picture — the value beside its name in a two-column
   pill, 200px wide, the result bay folded away — lived only in
   object-translator.css, which a bundle host does not load, so the open
   cover's `work` was clipped to a 34px bay there. The open navigator cover
   says the whole of it here; canonical Play keeps its own bay rules. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"] .vinci-function-return-port>.vinci-function-return-output:has(>[data-vinci-value-pill-value]){
  grid-template-columns:max-content max-content;column-gap:5px;min-height:34px;padding:4px 12px 4px 11px;font-size:11px
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"] .vinci-function-return-port>.vinci-function-return-output:has(>[data-vinci-value-pill-value])>[data-vinci-value-pill-value]:not([data-dismissed="true"]){
  width:auto;max-width:200px;overflow:hidden;text-overflow:ellipsis;border-bottom:0;font:750 11px/1.2 var(--mono)
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"] .vinci-function-return-port>.vinci-function-return-output:has(>[data-vinci-value-pill-value])>.vinci-function-return-result-bay{display:none}
.vinci-program-function-body{
  position:relative;min-height:126px;display:grid;place-items:center;padding:10px;overflow:hidden;border:1px solid rgba(238,150,20,.22);
  border-radius:13px;background:linear-gradient(155deg,rgba(255,255,255,.96),rgba(255,247,231,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)
}
.vinci-program-function-body::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed rgba(238,150,20,.19)}
.vinci-function-local-definitions{
  position:relative;z-index:10;display:grid;place-items:center;gap:5px;align-self:stretch;min-height:0
}
.vinci-function-local-definitions:empty{display:none}
.vinci-function-ball-zone{position:absolute;inset:0;display:grid;place-items:center}
.vinci-function-inside{position:absolute;left:50%;top:50%;width:1px;height:1px;pointer-events:none}
.vinci-program-function-operations{position:absolute;left:50%;bottom:12px;z-index:2;transform:translateX(-50%);display:grid;place-items:center}
.vinci-program-function-body:has(>.vinci-function-local-definitions:not(:empty)),
.vinci-program-function-body:has(>.vinci-function-authored-operations:not([hidden])),
.vinci-program-function-body:has(>.vinci-function-nested-scopes:not(:empty)){
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:154px;
  padding:15px 10px 28px;overflow:visible
}
.vinci-program-function[data-function-scope-navigator="true"]{
  width:min(100%,240px);overflow:visible
}
/* The serif cover — a 248px card with the name at reading size — was the
   collapsed face of every navigator Function. At rest that face is now the
   ƒ chip (top of this sheet); the cover survives only where the canonical
   Play view folds its frame after the return (vinci-function-presentation.css
   sizes it there), so that picture is untouched. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"]:is([data-function-play-state],[data-canonical-function-play="true"] *){
  width:min(100%,248px);min-height:64px;padding:12px 12px 0;cursor:pointer;
  border-style:solid;border-color:rgba(21,17,13,.14);border-width:1px;border-radius:18px;
  background:#fffefb;box-shadow:0 1px 2px rgba(44,35,20,.05),0 6px 18px rgba(44,35,20,.05)
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"]:is([data-function-play-state],[data-canonical-function-play="true"] *):not(:first-child){
  margin-top:var(--vinci-collapsed-cover-gap,22px)
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"]:is([data-function-play-state],[data-canonical-function-play="true"] *)
  > .vinci-program-function-label > .vinci-function-name-pill > .vinci-binding-pill-name{
  font:500 19px/1.25 Georgia,"Iowan Old Style","Times New Roman",serif;
  letter-spacing:-.01em;color:#231a10;text-transform:none
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"]:is([data-function-play-state],[data-canonical-function-play="true"] *)
  > .vinci-program-function-label > .vinci-function-name-pill{
  border:0;background:none;box-shadow:none;padding:0
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"]:is([data-function-play-state],[data-canonical-function-play="true"] *)>.vinci-function-scope-control{
  right:10px;left:auto;top:10px;gap:0;transform:none
}
/* Opening the card keeps the card. The open written-order cover wore the
   generic dashed frame and a mono title, so a click swapped one object for
   another; now the same card grows, and the name stays a serif name. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]{
  border-style:solid;border-color:rgba(21,17,13,.14);border-width:1px;border-radius:18px;
  background:#fffefb;box-shadow:0 1px 2px rgba(44,35,20,.05),0 8px 24px rgba(44,35,20,.06)
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  > .vinci-program-function-label > .vinci-function-name-pill > .vinci-binding-pill-name{
  font:500 19px/1.25 Georgia,"Iowan Old Style","Times New Roman",serif;
  letter-spacing:-.01em;color:#231a10;text-transform:none
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  > .vinci-program-function-label > .vinci-function-name-pill{
  border:0;background:none;box-shadow:none;padding:0
}
.vinci-program-function[data-function-scope-navigator="true"] [data-function-body][hidden]{display:none!important}
.vinci-program-function[data-function-scope-navigator="true"] [data-function-body]{
  width:100%;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important
}
.vinci-program-function[data-function-scope-navigator="true"] [data-function-body]::before{display:none}
.vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"]{
  min-height:0;padding:34px 12px 18px
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"] [data-function-body]:has(>.vinci-function-local-definitions>:not([hidden])),
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"] [data-function-body]:has(>.vinci-function-authored-operations:not([hidden])),
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"] [data-function-body]:has(>.vinci-function-nested-scopes:not(:empty)){
  min-height:124px;padding:8px 0 20px
}
/* In the open Structure view, local definitions and authored field operations
   are separate source facts. The generic compact Function layout normally
   floats operations over the middle of the body; with an object Binding that
   seated the collapsed Ball directly on top of the mutation pill and made
   `object.field += value` look Ball-shaped. Keep the Ball in local scope, but
   let reads/writes occupy their own pill rows beneath it. */
.vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"]
  [data-function-body]>.vinci-program-function-operations{
  position:static;left:auto;bottom:auto;z-index:2;transform:none;
  display:grid;place-items:center;gap:8px;width:100%;margin-top:2px
}
.vinci-program-function[data-function-scope-navigator="true"]>.vinci-program-function-label{
  left:12px;top:12px;max-width:calc(100% - 104px)
}
.vinci-function-scope-control{
  position:absolute;z-index:42;display:grid;place-items:center;gap:6px;pointer-events:auto
}
.vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"]>.vinci-function-scope-control{
  right:10px;left:auto;top:10px;transform:none
}
.vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"]>.vinci-function-scope-control{
  right:10px;top:10px
}
/* On a narrow seat — the 269px stage of the phone layout — a value dock
   centred on the top edge reaches the name on the left and "click to see
   less" on the right (a 34px pill hangs 17px in; both sit at 12px). There
   the dock rests ON the edge instead, 6px in, and the frame's reserve
   (reserveParameterDockClearance measures the real overhang) follows. The
   seat makes the open shell a query container (the dock rule, above).
   !important at (1,7,0): the straddling transforms — the scalar seat's
   here, the witness's (function-witness-surface.css) — are !important at
   (0,6,0) and (1,4,0); `[data-vinci-program]` is every canvas, and :is()
   takes the id's weight wherever it matches. */
@container (max-width:400px){
  :is(#semantic-stage,[data-vinci-program]) .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"]:where(:not([data-function-port-view="pills"]:not(.vfc-function-cover--canonical-face))):has(>.vinci-function-entry .vinci-parameter-binding-pill)
    > .vinci-function-entry > .vinci-function-parameter-dock{
    top:0!important;bottom:auto!important;transform:translate(-50%,calc(6px - 100%))!important
  }
  /* Native pill-port entry already spans the original Function. Its dock's
     left/right insets centre the Input; only the vertical reserve projects. */
  :is(#semantic-stage,[data-vinci-program]) .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"]:where([data-function-port-view="pills"]:not(.vfc-function-cover--canonical-face)):has(>.vinci-function-entry .vinci-parameter-binding-pill)
    > .vinci-function-entry > .vinci-function-parameter-dock{
    top:0!important;bottom:auto!important;transform:translateY(calc(6px - 100%))!important
  }
}
.vinci-function-scope-summary{
  display:none!important
}
.vinci-function-scope-control button{
  min-height:21px;padding:4px 6px;border:0;border-radius:999px;color:var(--gold-deep);
  background:transparent;box-shadow:none;font:700 6.5px/1 var(--mono);cursor:pointer
}
.vinci-function-scope-control button:hover,.vinci-function-scope-control button:focus-visible{
  outline:none;background:rgba(255,246,229,.98);box-shadow:0 0 0 2px rgba(238,150,20,.15)
}
.vinci-program-function[data-function-scope-navigator="true"][data-scope-long="true"][data-scope-view="open"] [data-function-body]{
  max-height:min(520px,calc(100vh - 220px));overflow:auto;overscroll-behavior:contain
}
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]{
  /* Look-inside used to size the open function TOP-DOWN from a 340px cap, so a
     13-statement loop body was forced into a ~280px column: 68px of horizontal
     spill and 1,199px of height inside a 480px stage. Size it to its contents
     instead. The min-width floor keeps every body that already fitted at
     exactly the width it has today; only an overflowing one grows. */
  /* fit-content alone is unbounded here: every ancestor in the open look-inside
     is intrinsically sized, so there is no definite width for it to resolve
     against and the rows' max-content propagates all the way up (the brand
     playbook's function reached 27,584px). This cap is what makes the subtree
     — rows, nested scopes and the branch fan — resolve against something real. */
  width:fit-content;min-width:min(100%,340px);max-width:min(100%,760px)
}
/* The written-order chain pinned every row to width:100% with min-width:0, so
   an over-wide row could never report its real width to the function above it.
   Let the rows carry their intrinsic width up while still filling a wider parent. */
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-function-written-order,
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-function-written-line,
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-function-control-bodies,
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-function-control-body{
  /* width, not min-width: min-width would BEAT the 100% ceiling and push a
     row outside the Function frame at narrow viewports. */
  width:max-content;max-width:100%
}
/* Each of those is a single-column grid, and an auto column grows to its
   items' max-content — a percentage max-width on the item is cyclic there and
   ignored while the column is sized, so one 14,581px authored line made the
   column 14,581px and the item's `max-width:100%` clamped to nothing. A
   minmax(0,1fr) column is the container's width: items still report their
   intrinsic width upward (the Function still grows to its cap), but inside
   the resolved Function they finally have a real width to be clamped by. */
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-function-written-order,
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-function-written-line,
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-function-control-bodies,
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-function-control-body,
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-function-row-mark:has(>.vinci-function-nested-scopes:not(:empty)),
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-function-nested-scopes{
  grid-template-columns:minmax(0,1fr)
}
/* The same for a block scope seated in a row: its definitions rack is an
   auto-column grid, and the scope itself is fit-content with no ceiling. */
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-program-block-scope{max-width:100%}
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-program-block-scope>.vinci-program-definitions,
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-function-scope-body{
  grid-template-columns:minmax(0,1fr)
}
/* Authored text is the one thing with no natural width: a 14,513px template
   literal is one line until something bounds it. The bound is absolute on
   purpose — a percentage here is cyclic and contributes nothing — and sits
   under the open function's 760px cap, so the line wraps inside the frame
   instead of setting the frame's width. The operation header is already
   ellipsised; as a flex item it still refused to shrink below its text. */
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]
  :is(code.vinci-function-playback-source-code,.vinci-await-source>code,.vinci-function-playback-expression){
  max-width:min(640px,calc(100cqw - 8px))
}
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-authored-operation-header b{
  min-width:0;max-width:260px
}
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] [data-function-body]{
  display:block;min-height:0;max-height:none;overflow:visible;padding:8px 0 20px
}
.vinci-function-written-order{
  display:grid;place-items:center;gap:8px;width:100%
}
.vinci-function-written-order[hidden]{display:none!important}
.vinci-function-written-line{
  display:grid;place-items:center;width:100%;min-width:0
}
/* The seat reads `goals = ["fixture"]` — the authored default, not a bound
   value. This was only ever switched on for the canonical function study
   (object-translator.css); every navigator cover deserves it. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"] .vinci-function-parameter-seat>.vinci-parameter-shape{
  display:inline!important;order:1;margin:0 1px;color:var(--ink-mute);font:700 11px/1 var(--mono)
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"] .vinci-function-parameter-seat>[data-vinci-value-pill-value]{order:2}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"] .vinci-function-parameter-seat>[data-function-parameter-value="default"]{
  display:inline!important;color:var(--gold-deep);font-weight:750
}

/* ── A statement, said once — in L1 ─────────────────────────────────────────
   In the non-canonical written-order view a straight row said its statement
   three times: the L1 mark (WRITE pill, READ pill, binding pill, SET pill),
   the step caption, and the authored source line. The mark IS the
   translation — Vinci draws JavaScript, it does not quote it — so the mark
   stays and the authored line steps back at rest. The line stays in the DOM
   (witness replay, evidence and the row's editors resolve through it) and
   returns whenever the row is live, or has no mark to speak for it. Any
   mark: the formula pill of `let design = work.brandDesign || null`, the
   Await card, a template value, a built-in call, an array Rail, a block
   scope — each is the statement drawn, and the line under it said it again
   (41 rows of it in the brand playbook's createArtifact).
   Canonical surfaces are signalled two ways (the canvas attribute, or a stage /
   presentation ancestor) and keep their own rules; this excludes both. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]:not([data-witness-playback-stage])
  [data-function-source-row]:not([data-current="true"]):not([data-receiving="true"]):not([data-function-expression-part])
  > .vinci-function-row-mark:has(
    > .vinci-property-operation[data-operation-kind="property-write"][data-state="inactive"]:not([data-runtime-write-field]):not([data-witness-active]):not([data-function-beat-active]),
    > .vinci-field-change[data-operation-kind="mutation"][data-state="inactive"]:not([data-runtime-write-field]):not([data-witness-active]):not([data-function-beat-active]),
    > .vinci-property-operation[data-operation-kind="property-delete"][data-state="inactive"]:not([data-runtime-write-field]):not([data-witness-active]):not([data-function-beat-active]),
    > .vinci-binding-operation[data-operation-kind="binding-write"][data-state="inactive"]:not([data-runtime-write-field]):not([data-witness-active]):not([data-function-beat-active]),
    > .vinci-value-operation[data-operation-kind="property-read"][data-state="inactive"]:not([data-witness-active]):not([data-function-beat-active]),
    > .vinci-binding-pill.vinci-primitive-binding-pill:not([data-witness-active]):not([data-function-beat-active]),
    > .vinci-binding-pill[data-value-slot]:not([data-witness-active]):not([data-function-beat-active]),
    > .vinci-call-operation[data-call-mark]:not([data-witness-active]):not([data-function-beat-active]),
    > .vinci-authored-operation:not([data-runtime-write-field]):not([data-witness-active]):not([data-function-beat-active]),
    > .vinci-call-operation:not([data-witness-active]):not([data-function-beat-active]),
    > .vinci-rail-seat,
    > .vinci-ball-seat,
    > .vinci-program-block-scope
  ) ~ .vinci-function-playback-source-code{
  display:none
}
/* The typed Step's input/output ports are the endpoints the route painter
   anchors IF outcomes and loop bodies to (visual-program-renderer.mjs pathData
   refuses any zero-width target). On a canonical surface they sit on the row's
   edges; here they had no rules at all and fell into grid flow as two loose
   circles. Hiding them broke route painting — so give them the canonical
   geometry instead: absolute on the row edge, out of the flow, still measurable.
   Loop phase steps and IF child rows keep their own geometry. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-typed-step]:not(.vinci-clause-step):not([data-function-if-child-step-row]){position:relative}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-typed-step]:not(.vinci-clause-step):not([data-function-if-child-step-row])
  > [data-function-step-port]{
  position:absolute;left:50%;z-index:9;display:block;box-sizing:border-box;width:10px;height:10px;
  transform:translateX(-50%);border:1.5px solid rgba(122,74,8,.42);border-radius:50%;
  background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.76)
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-typed-step]:not(.vinci-clause-step):not([data-function-if-child-step-row])
  > .vinci-function-step-input-port{top:-5px}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-typed-step]:not(.vinci-clause-step):not([data-function-if-child-step-row])
  > .vinci-function-step-output-port{bottom:-5px}

/* An L1 mark carries its authored expression as one nowrap line, and a
   template literal or an object literal can be 14,000px of it. Absolute on
   purpose — px and vw, never a percentage: inside these intrinsically sized
   rows a percentage is cyclic, and even `min(100%, 560px)` is ignored when
   the row measures its content, so the seat stayed 813px around a 560px
   rail. The text ellipses inside its pill; the row keeps a readable width.
   A seated shell (rack, script call, pill, row) is a query container, so
   there the cap is also the seat's own width: a 413px seat cannot hold a
   560px mark. Unseated, cqw is the viewport and the vw term already wins. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-row-mark > :is(.vinci-property-operation,.vinci-binding-operation,.vinci-call-operation){
  max-width:min(var(--vinci-mark-max,560px),calc(100vw - 80px),calc(100cqw - 8px));min-width:0
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-row-mark > :is(.vinci-property-operation,.vinci-binding-operation,.vinci-call-operation) > b{
  display:block;flex:0 1 auto;min-width:0;max-width:min(var(--vinci-mark-text-max,480px),calc(100cqw - 88px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
/* An array Rail already scrolls its track sideways — but its `max-width:100%`
   is the same cyclic percentage, so a ten-member Rail set the row's width
   instead. The same absolute cap; the track scrolls inside it. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-row-mark > .vinci-rail-seat > .vinci-program-rail{max-width:min(var(--vinci-mark-max,560px),calc(100vw - 80px),calc(100cqw - 8px))}
/* Inside a Loop body or an IF arm the row has ~30px less on each side; the
   clamps step down with the nesting so a mark never spills past its lane. */
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] :is(.vinci-function-control-body,.vinci-function-scope-body){--vinci-mark-max:460px;--vinci-mark-text-max:400px}
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] :is(.vinci-function-control-body,.vinci-function-scope-body) :is(.vinci-function-control-body,.vinci-function-scope-body){--vinci-mark-max:400px;--vinci-mark-text-max:340px}
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] :is(.vinci-function-control-body,.vinci-function-scope-body) :is(code.vinci-function-playback-source-code,.vinci-await-source>code,.vinci-function-playback-expression){max-width:440px}
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] :is(.vinci-function-control-body,.vinci-function-scope-body) :is(.vinci-function-control-body,.vinci-function-scope-body) :is(code.vinci-function-playback-source-code,.vinci-await-source>code,.vinci-function-playback-expression){max-width:380px}
/* ── The inside is one calm column ──────────────────────────────────────────
   Opening a function is stepping into ordinary code, not entering a
   flowchart. A plain statement row is its L1 mark and nothing else: the
   step card once drawn around it (border, fill, 26px connector stems) is
   gone, and the ordinal caption, the typed-step ports and the sequence
   connectors are Flow's furniture — they stay in the DOM, keep their
   geometry, and come back only when a run stamps the row live
   ([data-current] / [data-receiving]) or the function is on the witness
   stage. Rows keep position:relative above so the ports stay measurable
   (the route painter refuses a zero-width target). Ten pixels between
   rows is the whole rhythm. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-function-written-order{gap:10px}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]:not([data-witness-playback-stage])
  [data-function-source-row]:not([data-current="true"]):not([data-receiving="true"])
  > .vinci-function-playback-step-kind{display:none}
/* visibility, not display: Flow anchors IF outcomes and loop bodies to these
   exact circles, and a port that is still `rest` has nothing to show. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]:not([data-witness-playback-stage])
  [data-function-source-row]:not([data-current="true"]):not([data-receiving="true"])
  > [data-function-step-port][data-vinci-port-state="rest"]{visibility:hidden}
/* The sequence connector is the line of the flowchart — into a plain row,
   into an Await, a Loop body, an IF, a block scope, a folded part all the
   same ("no lines"). The control routes an IF or a Loop paints from its
   gate are not connectors and stay; a connector a run has lit comes back.
   One exception, at the foot of this file ("Steps and blocks"): in the
   navigator's open column the same node is the 10px hairline between
   stations — one after the other. Everywhere else it stays hidden. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]:not([data-witness-playback-stage])
  .vinci-function-playback-connector[data-control-connection-layout="sequence"]:not([data-active="true"]){
  display:none
}
/* ── A mark with a command says so; one without says nothing ───────────────
   The WRITE mark inside a function is the Change mark: once the renderer has
   stamped it a rest target (it does so only where `field-change.set` can
   land), it takes the pointer and the same hover ring the Change surface
   gives its field (vinci-function-presentation.css, .vfield[data-field-
   change-rest-target]). A SET or DELETE mark, which no source command can
   reach, is never stamped and so never lit. The bind pill and the formula
   pill already carry the value-pill ring, the return pill its own — those
   are the pills at program scope, unchanged here. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-row-mark > .vinci-program-operation[data-field-change-rest-target="true"][data-field-change-operation-id]{
  cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-row-mark > .vinci-program-operation[data-field-change-rest-target="true"][data-field-change-operation-id]:is(:hover,:focus-visible){
  outline:none;border-color:rgba(122,74,8,.52);
  box-shadow:0 0 0 3px rgba(238,150,20,.12),0 7px 16px rgba(76,46,8,.13)
}
/* The editor replaces the mark in place (openSetFieldEditor hides its anchor);
   a value pill honours that through .vinci-value-pill[hidden] in its own
   sheet, but the WRITE and Change marks carry an inline-flex rule that beat
   the bare attribute, and the mark stayed painted above its own editor. */
.vinci-program-operation[data-field-change-rest-target="true"][hidden]{display:none!important}
/* The opened editor is the mark's expanded state, so it takes the mark's
   clamp (above). Its own `max-width:min(100%,680px)` is the same cyclic
   percentage inside these rows: the Change editor sat at its 593px
   max-content, widened the pop-up past its cap and set the body scrolling
   sideways. Clamped, it wraps its parts instead — the room decides. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-row-mark .vinci-value-pill-editor{
  box-sizing:border-box;max-width:min(var(--vinci-mark-max,560px),calc(100vw - 80px))
}
/* An Await row keeps its own card, but its caption sat on the row's top edge
   under the input port ("STEP 2 ○ AWAIT"). Room for the port above it. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-typed-step][data-function-await-step]:not(.vinci-clause-step):not([data-function-if-child-step-row]){padding-top:9px}
/* ── The empty local-scope shelf ─────────────────────────────────────────────
   The written-order shelf is the Play-time Local Scope seat. At rest on this
   surface it holds nothing — the lets are their own `bind` rows — so it drew a
   bare "local scope" and a 10px tick into step 1. Hidden with its connector
   until a presenter seats a binding; a function that authors an object literal
   keeps a resident Ball in the seat and so keeps the shelf. Step-fork shells
   keep it too: the fork grid hangs on that box. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]:not([data-function-if-layout="step-fork"])
  > [data-function-body] > .vinci-function-written-order
  > .vinci-function-playback-scope[data-state="structure"]:not(:has(.vinci-function-playback-scope-seat>*)):not(:has(.vinci-function-playback-scope-bindings>*)),
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]:not([data-function-if-layout="step-fork"])
  > [data-function-body] > .vinci-function-written-order
  > .vinci-function-playback-scope[data-state="structure"]:not(:has(.vinci-function-playback-scope-seat>*)):not(:has(.vinci-function-playback-scope-bindings>*))
  + .vinci-function-playback-connector[data-control-connection-layout="sequence"]{
  display:none
}

/* A caption reads before what it captions: the caption is the first thing
   in every row, above its mark (it fell under a Loop or Await card before —
   "STEP 5 · LOOP" beneath the Loop). */
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]
  [data-function-source-row]:not([data-function-if-layout]):not(.vinci-clause-step)
  > .vinci-function-playback-step-kind{order:-1}

/* ── Caption and source line, given a face ───────────────────────────────────
   Every typographic rule for these two was gated on a canonical-director
   attribute, so on this surface they rendered in the page's body font at full
   ink. :where() keeps this at (0,1,0) so canonical surfaces are untouched. */
:where(.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-function-written-order [data-function-source-row]:not([data-function-expression-part]))
  > .vinci-function-playback-step-kind{
  color:var(--ink-mute,#756c61);font:600 9px/1.3 var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase
}
:where(.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] .vinci-function-written-order [data-function-source-row]:not([data-function-expression-part]))
  > .vinci-function-playback-source-code{
  color:var(--ink-soft,#5c554a);font:500 11px/1.5 var(--mono,monospace);max-width:100%;overflow-wrap:anywhere
}

/* A default like `task = "Preserve Quiet Hour context..."` needs more than the
   dock's 280px. NOT `100%`: the dock is absolute inside the 1px entry anchor,
   so a percentage resolves to 1px and every seat wraps to its own line. */
.vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"] > .vinci-function-entry > .vinci-function-parameter-dock{max-width:min(var(--vinci-open-dock-max,600px),calc(100vw - 44px))}
/* (0,3,0): outranks the generic connector rule near the foot of this file,
   which ties at (0,2,0) and comes later; the canonical rules are (0,4,0) and
   still win on their surface. */
.vinci-function-written-order>.vinci-function-playback-terminal-connector[data-control-connection-layout]{display:none}

/* Containment nesting: a row's lexical home is the arm, body or scope whose
   source range contains it; expression-level records fold into the statement
   that owns them. Every record keeps its row; only prominence changes. */
.vinci-function-control-bodies{display:grid;gap:8px;width:100%;box-sizing:border-box;margin-top:8px}
/* Mutually exclusive branches sit side by side. Only the renderer decides a run
   qualifies (it must prove one subject, distinct literals and no write to the
   subject); this rule only draws what it decided. auto-fit means the fan is a
   single column again whenever the space for two does not exist. */
.vinci-function-branch-fan{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--vinci-branch-fan-min,220px),1fr));
  gap:10px;align-items:start;justify-items:stretch;width:100%;box-sizing:border-box;margin-top:8px;
  /* The cap is load-bearing, not decoration. An ancestor in the open
     written-order view sizes rows by max-content, and an uncapped auto-fit grid
     reports the sum of ALL its arms as its intrinsic width — seven arms made
     the fan 27,460px wide. An element's max-content contribution is clamped by
     its own max-width, so this both bounds the fan and keeps the row honest. */
  max-width:min(100%,var(--vinci-branch-fan-max,720px))
}
.vinci-function-branch-fan>.vinci-function-written-line{width:100%;min-width:0;place-items:start}
/* The argument reference that merely repeats its parameter's name is kept in
   the DOM as provenance and marked here. The bare [hidden] attribute is not
   enough: these pills carry a display rule that overrides it. */
[data-argument-duplicates-parameter="true"]{display:none!important}
/* Parameters and the return dock are DETAIL, not wiring. A closed cover shows
   the function's name and its ports; opening it — the same click that opens the
   scope — reveals what it takes and what it gives back. Port mouths stay put:
   they are the connection, not the detail. This also removes the overhang that
   made stacked covers collide, so the clearance below is only needed once a
   cover is actually open. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"] .vinci-function-parameter-dock,
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"] .vinci-function-return-ports,
/* The `async` badge is the same kind of thing — a fact about the function, not
   its identity — and it was the 46px that squeezed the name into `con…`. It
   comes back with everything else when the cover opens. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-view="collapsed"] > .vinci-program-function-label > .vmark-facts{
  display:none!important
}
/* The same defect the value span had, on the other pill. A binding pill is a
   flex container, so its own text-overflow never fires, and its name span
   carries min-width:auto with text-overflow:clip — so a long signature like
   `createArtifact(work, task = "...", format = "...", maxRounds = 18)` painted
   45px outside its pill instead of ellipsing. That overflow is what put titles
   underneath neighbouring pills in the first place. */
.vinci-binding-pill>.vinci-binding-pill-name{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.vinci-function-control-body,.vinci-function-scope-body{
  display:grid;gap:8px;width:100%;box-sizing:border-box;padding:6px 0 8px 14px;place-items:center;
  border-left:1.5px dashed rgba(133,119,97,.38)
}
.vinci-function-scope-body{margin-top:8px;border-left-style:solid;border-left-color:rgba(109,119,125,.24)}
.vinci-function-control-body>.vinci-function-control-body-label{
  justify-self:start;color:#797570;font:500 9px/1.2 var(--sans,system-ui);
  letter-spacing:.03em;text-transform:none
}
/* A counted Loop's body region is a Control body wearing the layout's grid;
   its label reads at the region's top-left instead of taking a grid row. */
.vinci-function-control-body.vinci-function-loop-body-region{position:relative}
.vinci-function-control-body.vinci-function-loop-body-region>.vinci-function-control-body-label{position:absolute;top:-5px;left:6px;z-index:8;padding:0 4px;background:#fdfdfc}
.vinci-function-control-body[data-branch-kind="consequent"]{border-left-color:rgba(201,125,14,.45)}
.vinci-function-control-body[data-branch-kind="alternate"]{border-left-color:rgba(154,73,55,.4)}
.vinci-function-control-body[data-control-body-layout="contents"]{display:contents}
.vinci-function-row-parts{
  width:100%;box-sizing:border-box;margin-top:6px;color:#747b83;
  font:450 10px/1.5 var(--sans,system-ui)
}
.vinci-function-row-parts>summary{cursor:pointer;list-style:none;width:fit-content;max-width:100%;padding:5px 7px;border-radius:6px;color:inherit;font:450 11px/1.5 var(--sans,system-ui);letter-spacing:0;text-transform:none;transition:background .15s,color .15s}
.vinci-function-row-parts>summary::-webkit-details-marker{display:none}
.vinci-function-row-parts>summary:hover{color:#424b55;background:rgba(116,123,131,.065)}
.vinci-function-row-parts>summary:focus-visible{outline:2px solid rgba(125,137,155,.5);outline-offset:2px}
.vinci-function-row-parts>summary::before{content:'';display:inline-block;width:5px;height:5px;margin-right:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(-45deg);vertical-align:2px}
.vinci-function-row-parts[open]>summary::before{transform:rotate(45deg)}
.vinci-function-row-parts[open]{display:grid;gap:6px;padding:4px 0 4px 14px;border-left:1px dotted rgba(116,123,131,.28)}
.vinci-function-row-parts>[data-function-source-row]{opacity:.94}
/* An arm scope sits inside the branch row that already captions the same
   source line; the scope record keeps its bindings, not a second caption. */
[data-function-source-row][data-function-scope-role="arm"]>.vinci-function-playback-source-code{display:none!important}
[data-function-scope-role="arm"]>.vinci-function-playback-step-kind{opacity:.7}

/* Nested control flow remains inside the one canonical Function Frame.  The
   gate Operation, every Path lane and every terminating Return keep one DOM
   identity; the rails below are route furniture only. */
.vinci-program-function[data-function-control-topology="nested"]{
  width:min(100%,420px)
}
.vinci-program-function[data-function-control-topology="nested"] :is(
  .vinci-function-authored-operations,.vinci-program-block-scope,.vinci-authored-operation,
  .vinci-call-operation,.vinci-expression-row
){
  box-sizing:border-box;min-width:0;max-width:100%
}
.vinci-program-function[data-function-control-topology="nested"] .vinci-call-operation>b{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.vinci-program-function[data-function-control-topology="nested"] :is(
  .vinci-advanced-operation:not(.vinci-control-operation),.vinci-call-operation,
  .vinci-operation-result-binding,.vinci-operation-result-binding>.vinci-binding-pill
){
  overflow:hidden
}
.vinci-program-function[data-function-control-topology="nested"] :is(
  .vinci-advanced-operation:not(.vinci-control-operation),.vinci-operation-result-binding
) b,
.vinci-program-function[data-function-control-topology="nested"]
  .vinci-operation-result-binding [data-vinci-value-pill-value]{
  min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.vinci-program-function[data-function-control-topology="nested"]
  .vinci-function-playback-template-operation :is(
    .vinci-function-row-mark,.vinci-value-operation,.vinci-value-flow,.vinci-expression-result
  ){
  box-sizing:border-box;min-width:0;max-width:100%;overflow:hidden
}
.vinci-program-function[data-function-control-topology="nested"]
  .vinci-function-playback-template-operation .vinci-expression-result{
  text-overflow:ellipsis;white-space:nowrap
}
.vinci-program-function[data-function-control-topology="nested"] .vinci-function-call-arguments[hidden]{
  display:none!important
}
.vinci-function-exit[data-function-return-count]:not([data-function-return-count="0"]){
  left:0;width:100%;height:1px
}
.vinci-function-exit[data-function-return-count]:not([data-function-return-count="0"])::after,
.vinci-function-exit[data-function-return-count]:not([data-function-return-count="0"])>.vinci-function-port-mouth{
  display:none
}
/* A Function with no return statement still ends in one readable Pill,
   `return: undefined`. That fallback Pill is seated absolutely in the exit,
   which stays a 1px socket while the return count is 0, so the shared
   `max-width:100%` resolved to about 1px: the Pill kept only its padding
   (26px) and its own clip left `turn` and hid the value the status line
   reports. Size it by its own text, under the shared Pill's 260px cap.
   A collapsed Function keeps its compact socket. Same layer as the rule it
   corrects, at higher specificity, so every host's cascade order agrees. */
@layer vinci-function-contract {
 .vinci-program-function[data-function-port-view="pills"]:not([data-scope-view="collapsed"])
   > .vinci-function-exit > .vinci-value-pill[data-function-value-port-fallback="exit"]{
   width:max-content!important;max-width:260px!important
 }
}
.vinci-function-return-ports{
  position:absolute;left:50%;top:-4px;bottom:auto;z-index:50;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));align-items:start;gap:6px;
  width:calc(100% - 20px);max-width:400px;transform:translateX(-50%);pointer-events:none
}
.vinci-function-exit[data-function-return-layout="single"]>.vinci-function-return-ports{
  grid-template-columns:minmax(0,1fr)
}
.vinci-function-exit[data-function-return-layout="split"]>.vinci-function-return-ports{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start
}
/* Authored exits keep their full original values. Wrap the actual seats when
   their intrinsic widths no longer fit; neither exit is a compact replica. */
.vinci-function-exit[data-function-return-layout="split"]>.vinci-function-return-ports>.vinci-function-return-port{
  flex:1 1 auto;max-width:100%
}
/* Three or more exits (the renderer's 'wrapped' layout, e.g. handleSubmit's
   five `return;`) had no rule, so they fell to the base grid: 110px+ cells in
   a 400px rack, narrower than a `return: undefined` Pill, and each Pill ran
   over its neighbour and past the frame. Each exit is its own seat at its
   own width; seats wrap to the next row inside the frame. The rack's
   400px cap (an unlayered !important in vinci-function-universal.css) is
   lifted to the frame here, in the contract layer, whose !important wins.
   The renderer measures the rack's real height, so the room below grows. */
@layer vinci-function-contract{
  .vinci-program-function>.vinci-function-exit[data-function-return-layout="wrapped"]>.vinci-function-return-ports{
    display:flex!important;flex-wrap:wrap;justify-content:center;align-items:flex-start;
    column-gap:8px;row-gap:4px;max-width:calc(100% - 20px)!important
  }
  .vinci-program-function>.vinci-function-exit[data-function-return-layout="wrapped"]>.vinci-function-return-ports>.vinci-function-return-port{
    flex:0 1 auto;min-width:0;max-width:100%
  }
}
.vinci-function-return-ports[hidden]{display:none!important}
/* The one Vinci (mountVinciProgram: Lab, Academy, app sides) draws a Return
   like every other authored unit: its source text at rest, its recorded value
   once the run reaches it. No unit there carries a 'source only' caption, so
   the Return's caption (the full-stack player's badge) is not drawn beside
   it either. */
.vinci-program-view .vinci-function-return-port>.vinci-function-return-output>[data-function-return-source-state]{display:none}
.vinci-function-return-port{
  position:relative;display:grid;grid-template-rows:8px 9px auto;place-items:center;min-width:0;
  color:#985f0b;pointer-events:none;
  --vinci-port-size:8px;--vinci-port-edge:rgba(152,95,11,.62);
  --vinci-port-fill:#fcfbfa;--vinci-port-shadow:0 0 0 3px rgba(122,74,8,.07)
}
.vinci-function-return-port[data-function-return-role="branch-return"]{order:2}
.vinci-function-return-port[data-function-return-role="loop-exit-return"]{order:1}
.vinci-function-return-port>.vinci-return-operation.vinci-function-return-output{
  position:static;inset:auto;z-index:2;display:inline-grid;box-sizing:border-box;
  width:max-content;max-width:100%;min-width:0;min-height:42px;padding:3px 5px 3px 10px;transform:none;
  grid-template-columns:max-content 34px;grid-template-rows:34px;align-items:center;column-gap:6px;
  overflow:visible;border:1px solid rgba(201,125,14,.36);border-radius:999px;
  color:#985f0b;background:#fbfbfa;box-shadow:0 7px 18px rgba(122,74,8,.08);
  font:750 9px/1 var(--mono);text-overflow:ellipsis;white-space:nowrap;pointer-events:auto
}
.vinci-function-return-port>.vinci-function-return-output>[data-vinci-value-pill-name]{
  grid-column:1;grid-row:1
}
.vinci-function-return-port>.vinci-function-return-output>[data-vinci-value-pill-value]{
  position:relative;z-index:1;grid-column:2;grid-row:1;box-sizing:border-box;width:34px;max-width:34px;
  overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap
}
.vinci-function-return-port>.vinci-function-return-output[data-void-return="true"]{
  grid-template-columns:max-content minmax(76px,max-content);
  max-width:max-content
}
.vinci-function-return-port>.vinci-function-return-output[data-void-return="true"]:not([data-value-slot])>[data-vinci-value-pill-value]{
  display:block!important;width:auto;max-width:none;min-width:76px;padding-inline:7px;overflow:visible;text-overflow:clip
}
.vinci-function-return-result-bay{
  position:relative;z-index:0;display:grid;grid-column:2;grid-row:1;place-items:center;box-sizing:border-box;
  width:34px;height:34px;border-radius:50%;outline:1px dashed rgba(152,95,11,.24);
  outline-offset:-3px;background:rgba(250,249,248,.7);pointer-events:none;
  transition:outline-color .2s ease,background-color .2s ease,box-shadow .2s ease
}
.vinci-function-return-output[data-function-return-carrier="resident"]>.vinci-function-return-result-bay,
.vinci-function-return-port[data-function-return-carrier="resident"] .vinci-function-return-result-bay{
  outline-color:transparent;background:transparent;box-shadow:inset 0 0 0 1px rgba(122,74,8,.08)
}
.vinci-function-return-port>.vinci-function-return-output[data-return-value-editor="true"]{
  cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease
}
.vinci-function-return-port>.vinci-function-return-output[data-return-value-editor="true"]:is(:hover,:focus-visible){
  border-color:rgba(152,95,11,.62);background:#fdfdfd;
  box-shadow:0 0 0 3px rgba(122,74,8,.09),0 7px 18px rgba(122,74,8,.1)
}
.vinci-function-return-port .vinci-value-pill-editor{pointer-events:auto}
.vinci-function-return-port-line:not(svg){
  display:block;grid-row:2;width:1px;height:9px;border-left:1.5px solid rgba(152,95,11,.4)
}
svg.vinci-function-return-port-line{display:block;grid-row:2;width:2px;height:9px;overflow:visible}
.vinci-function-return-port-mouth{
  grid-row:1
}
.vinci-function-return-port[data-state="observed"] .vinci-function-return-port-line{border-left-style:solid;border-color:#c97d0e}
.vinci-function-return-port[data-state="observed"] .vinci-function-return-port-mouth:not([data-vinci-port-appearance="outcome"]){
  border-color:#c97d0e;background:#e4d8bf;box-shadow:0 0 0 4px rgba(238,150,20,.11)
}
/* A source-labelled Branch outcome is one Return port, not a socket followed
   by a second port-shaped ValuePill. Keep the invisible mouth as the motion
   director's exact boundary target, but merge the resting visual into the
   named Return pill itself. */
.vinci-function-return-port[data-function-return-outcome-label]{
  grid-template-rows:auto
}
.vinci-function-return-port[data-function-return-outcome-label]>.vinci-function-return-port-mouth{
  position:absolute;left:50%;top:0;opacity:0;transform:translateX(-50%);pointer-events:none
}
.vinci-function-return-port[data-function-return-outcome-label]>.vinci-function-return-port-line{
  display:none
}
.vinci-function-return-port[data-function-return-outcome-label]>
  .vinci-function-return-output[data-expanded="false"]:not([data-state="active"]):not([data-state="observed"]):not([data-function-return-carrier="resident"]){
  display:inline-flex!important;width:auto!important;min-width:64px!important;max-width:112px!important;
  min-height:34px!important;height:34px!important;padding:0 12px!important;align-items:center!important;
  justify-content:center!important;grid-template-columns:none!important;border-radius:999px!important
}
.vinci-function-return-port[data-function-return-outcome-label]>
  .vinci-function-return-output[data-expanded="false"]>[data-vinci-value-pill-name]{
  display:block!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.vinci-function-return-port[data-function-return-outcome-label]>
  .vinci-function-return-output[data-expanded="false"]>[data-vinci-value-pill-value],
.vinci-function-return-port[data-function-return-outcome-label]>
  .vinci-function-return-output[data-expanded="false"]:not([data-state="active"]):not([data-state="observed"]):not([data-function-return-carrier="resident"])>.vinci-function-return-result-bay{
  display:none!important
}
/* A named Return stays a compact outcome at rest. Once that exact Return is
   selected, its existing result bay must have geometry before the same Ball
   travels there; display:none previously sent Close to the viewport origin. */
.vinci-function-return-port[data-function-return-outcome-label]>
  .vinci-function-return-output:is([data-state="active"],[data-state="observed"],[data-function-return-carrier="resident"])>
  .vinci-function-return-result-bay{display:grid!important}
/* The persistent carrier lives in the canvas motion layer, not inside Return.
   During this handoff it must paint above the named Return's opaque shell. */
.semantic-visual-program:has(.vinci-function-return-port[data-function-return-outcome-label]>
  .vinci-function-return-output:is([data-state="active"],[data-state="observed"],[data-function-return-carrier="resident"]))>
  .vinci-program-motion-layer{z-index:60}
:is(.vlf-l2-cover,.vfc-function-cover) .vinci-function-return-port>.vinci-function-return-output{
  position:absolute;left:50%;top:17px;opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,-3px) scale(.9);
  transition:opacity .18s ease,transform .22s cubic-bezier(.22,1,.36,1),visibility 0s linear .22s
}
:is(.vlf-l2-cover,.vfc-function-cover) .vinci-function-return-port{pointer-events:auto}
:is(.vlf-l2-cover,.vfc-function-cover) .vinci-function-return-port-mouth{position:relative;pointer-events:auto;cursor:pointer}
:is(.vlf-l2-cover,.vfc-function-cover) .vinci-function-return-port-mouth::after{
  content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;transform:translate(-50%,-50%)
}
:is(.vlf-l2-cover,.vfc-function-cover) .vinci-function-return-port-mouth:focus-visible{
  outline:2px solid rgba(152,95,11,.72);outline-offset:4px
}
:is(.vlf-l2-cover,.vfc-function-cover)>.vinci-function-entry{position:absolute!important;top:0!important}
:is(.vlf-l2-cover,.vfc-function-cover)>.vinci-function-exit{position:absolute!important;top:auto!important;bottom:0!important}
:is(.vlf-l2-cover,.vfc-function-cover)>.vinci-function-entry>.vinci-function-port-mouth::after{
  content:"ENTRY";position:absolute;left:50%;top:20px;transform:translateX(-50%);
  color:var(--ink-mute);font:700 5.5px/1 var(--mono);letter-spacing:.1em;white-space:nowrap
}
:is(.vlf-l2-cover,.vfc-function-cover)>.vinci-function-entry[data-function-shared-entry="object-parameter"]::before{display:none}
:is(.vlf-l2-cover,.vfc-function-cover)>.vinci-function-entry[data-function-shared-entry="object-parameter"]>.vinci-function-parameter-dock{
  top:0!important;bottom:auto!important;transform:translate(-50%,-50%)!important
}
:is(.vlf-l2-cover,.vfc-function-cover)>.vinci-function-entry[data-function-shared-entry="object-parameter"]
  .vinci-function-parameter-input,
:is(.vlf-l2-cover,.vfc-function-cover)>.vinci-function-entry[data-function-shared-entry="object-parameter"]
  .vinci-function-parameter-slot{display:grid;place-items:center;overflow:visible}
.vinci-value-pill.vinci-function-object-parameter-seat[data-function-shared-entry-socket]{
  position:relative;inset:auto;display:block;box-sizing:border-box;width:30px;min-width:30px;
  max-width:30px;height:30px;min-height:30px;padding:0;border:1px dashed rgba(152,95,11,.46);
  border-radius:50%;color:#62450f;background:rgba(255,255,255,.78);box-shadow:none;overflow:visible
}
.vinci-value-pill.vinci-function-object-parameter-seat[data-function-shared-entry-socket]
  >:is([data-vinci-value-pill-name],[data-vinci-value-pill-name-only]){
  position:absolute;left:50%;top:calc(100% + 5px);display:block;transform:translateX(-50%);
  color:#6e5a3c;font:750 8px/1 var(--mono);letter-spacing:.035em;white-space:nowrap
}
.vinci-value-pill.vinci-function-object-parameter-seat[data-function-shared-entry-socket]
  >[data-vinci-value-pill-value]{display:none!important}
.vinci-value-pill.vinci-function-object-parameter-seat[data-function-shared-entry-socket]
  >[data-vinci-value-pill-slot]{
  position:absolute;inset:0;display:grid;place-items:center;height:100%;min-height:0;
  /* The 32px Ball can exceed this 30px socket's 28px content box. Keep the
     native slot and tracks at the socket size so the same Ball overflows
     evenly; an auto-height grid otherwise retains the Ball's 32px height. */
  grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)
}
.vinci-value-pill.vinci-function-object-parameter-seat[data-function-shared-entry-socket]
  >[data-vinci-value-pill-slot]>.vf-ballwrap{
  display:grid;place-items:center;min-width:0;min-height:0;width:max-content;height:max-content;margin:0
}
/* An iterator binding is the boundary of its item scope. The source-owned
   scope retains containment without framing its one receiver as another box. */
.vinci-program-scope[data-program-loop-item]{
  min-width:0;min-height:0;padding:0;margin-bottom:18px;border:0;background:transparent;box-shadow:none
}
.vinci-program-scope[data-program-loop-item]>.vinci-program-definitions{min-height:30px}
/* The receiver's surface is the shared socket leaf. The parameter continues
   to own layout, name, Binding identity and the incoming Ball's exact anchor.
   Keep its transparent 1px border in the box model to preserve that geometry. */
.vinci-function-object-parameter-seat:has(>[data-function-object-entry-surface]){
  border-color:transparent!important;background:transparent!important;box-shadow:none!important
}
.vinci-function-object-parameter-seat>[data-function-object-entry-surface]{
  position:absolute;inset:-1px;z-index:0;width:30px;height:30px;
  transition:opacity .24s ease,border-color .24s ease,background-color .24s ease
}
.vinci-function-object-parameter-seat:is([data-function-parameter-state="receiving"],[data-function-parameter-state="arrived"])
  >[data-function-object-entry-surface]{opacity:0}
/* A quiet seek projects the receiving seat with its recorded fact. Seeking
   paints no flight or hold (motion treats it as reduced motion), so the
   waiting socket must not keep fading after the projected Step has settled.
   Animated Steps keep both fades; the Fast card's own contract is unchanged. */
[data-function-execution-seeking] :is(.vinci-function-object-parameter-seat,
  .vinci-parameter-binding-pill[data-function-parameter-owner][data-function-input-shape="object"])
  >[data-function-object-entry-surface]{transition:none}
/* The landed iterator Ball inherits the receiver's visible name. Its own
   caption stays attached for accessibility and the return trip; only the
   resident caption is suppressed while the authored receiver names it. */
[data-program-loop-item-binding][data-function-parameter-state="arrived"]
  >[data-vinci-value-pill-slot]>.vf-ballwrap .vmark-ball-live-label{display:none}
.vinci-function-entry[data-state="passed"] .vinci-value-pill.vinci-function-object-parameter-seat[data-function-shared-entry-socket]
  >[data-function-object-entry-surface]{
  opacity:1;border-style:solid;border-color:rgba(152,95,11,.62);
  background:radial-gradient(circle,rgba(255,255,255,.96) 0 58%,rgba(201,125,14,.14) 60% 100%)
}
:is(.vlf-l2-cover,.vfc-function-cover) .vinci-function-return-port::before{
  content:"RETURN";position:absolute;left:50%;top:-13px;transform:translateX(-50%);
  color:var(--ink-mute);font:700 5.5px/1 var(--mono);letter-spacing:.1em;white-space:nowrap
}
:is(.vlf-l2-cover,.vfc-function-cover) .vinci-function-return-port[data-state="unlit"] .vinci-function-return-port-line{
  border-color:#c9bfb1
}
:is(.vlf-l2-cover,.vfc-function-cover) .vinci-function-return-port[data-state="unlit"] .vinci-function-return-port-mouth:not([data-vinci-port-appearance="outcome"]){
  border-color:#c9bfb1;background:#fff;box-shadow:0 0 0 3px rgba(122,74,8,.055)
}
:is(.vlf-l2-cover,.vfc-function-cover) .vinci-function-return-port[data-return-detail-open="true"]>.vinci-function-return-output{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1);transition-delay:0s
}
@media(prefers-reduced-motion:reduce){
  :is(.vlf-l2-cover,.vfc-function-cover) .vinci-function-return-port>.vinci-function-return-output{transition:none!important}
}
.vinci-function-written-order:has(>.vinci-function-control-route-layer){
  position:relative;isolation:isolate;padding-inline:9px;box-sizing:border-box
}
.vinci-function-written-order:has(>.vinci-function-control-route-layer)>.vinci-function-playback-scope,
.vinci-function-written-order:has(>.vinci-function-control-route-layer)>[data-function-source-row],
.vinci-function-written-order:has(>.vinci-function-control-route-layer)>.vinci-function-playback-connector{
  position:relative;z-index:2
}
.vinci-function-control-route-layer{
  position:absolute;inset:8px 0 -46px;z-index:1;display:block;overflow:visible;pointer-events:none
}
.vinci-program-function-body>.vinci-function-control-route-layer{inset:8px 3px -48px}
.vinci-function-control-route{
  position:absolute;top:12%;bottom:0;width:1px;border-left:1.5px dashed rgba(122,74,8,.22)
}
.vinci-function-control-route[data-route-owner-kind="branch"]{right:3px}
.vinci-function-control-route[data-route-owner-kind="loop"]{left:3px}
.vinci-function-control-route[data-state="observed"]{border-left-style:solid;border-color:#c97d0e}
.vinci-function-control-route-svg{
  position:absolute;inset:0;z-index:4;display:block;width:100%;height:100%;overflow:visible;
  pointer-events:none
}
.vinci-function-control-route-svg[hidden]{display:none!important}
.vinci-function-control-route-svg [data-function-path-route-geometry],
[data-vinci-foundation="control-route"]{
  fill:none;stroke:rgba(142,111,71,.52);stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke
}
.vinci-function-control-route-svg [data-function-path-route-geometry],
[data-vinci-foundation="control-route"][data-state="unlit"]{stroke-dasharray:3 4}
.vinci-function-control-route-svg [data-route-kind="function-exit"],
[data-vinci-foundation="control-route"][data-route-kind="function-exit"]{stroke:rgba(152,95,11,.5)}
.vinci-function-control-route-svg [data-route-kind="continue"],
.vinci-function-control-route-svg [data-route-kind="loop-body"],
.vinci-function-control-route-svg [data-route-kind="loop-back"]{stroke:rgba(142,111,71,.56)}
.vinci-function-control-route-svg :is([data-state="active"],[data-state="observed"]),
[data-vinci-foundation="control-route"][data-state="observed"]{
  stroke:#c97d0e;stroke-dasharray:none;stroke-width:1.6
}
.vinci-program-function:has(>.vinci-function-control-route-svg:not([hidden]))
  .vinci-function-control-route,
.vinci-program-function:has(>.vinci-function-control-route-svg:not([hidden]))
  .vinci-function-loop-back-route{
  border-color:transparent
}
.vinci-program-function:has(>.vinci-function-control-route-svg:not([hidden]))
  .vinci-function-loop-back-route::after{display:none}
.vinci-function-loop-back-route{
  position:absolute;left:8px;top:19%;bottom:12%;width:11px;box-sizing:border-box;
  border-left:1.5px dashed rgba(122,74,8,.25);border-top:1.5px dashed rgba(122,74,8,.25);
  border-bottom:1.5px dashed rgba(122,74,8,.25);border-radius:9px 0 0 9px
}
.vinci-function-loop-back-route::after{
  content:"↶";position:absolute;left:-7px;top:-9px;color:rgba(122,74,8,.48);font:800 8px/1 var(--mono)
}
.vinci-function-loop-back-route[data-state="observed"]{border-style:solid;border-right:0;border-color:#c97d0e}
.vinci-function-source-row[data-function-control-kind]{overflow:visible}
.vinci-function-source-row[data-function-control-kind="branch"]{padding-right:15px}
.vinci-function-source-row[data-function-control-kind="loop"]{padding-left:15px}
.vinci-function-source-row[data-function-path-arrival-ids]{
  border-color:rgba(122,74,8,.2)
}
.vinci-function-source-row[data-function-path-arrival-ids]::before{
  content:"";position:absolute;left:-6px;top:50%;width:6px;border-top:1.5px dashed rgba(122,74,8,.28)
}
.vinci-program-function[data-function-control-topology="nested"]
  .vinci-function-playback-mutation .vinci-binding-operation{
  gap:6px;box-sizing:border-box;max-width:calc(100% - 16px);padding:5px 9px;
  border:1px solid rgba(122,74,8,.18);border-radius:999px;background:rgba(255,251,243,.96)
}
.vinci-program-function[data-function-control-topology="nested"]
  .vinci-function-playback-mutation .vinci-binding-operation small{
  flex:0 0 auto;color:#796b5b;font-size:6px;letter-spacing:.06em;text-transform:uppercase
}
.vinci-program-function[data-function-control-topology="nested"]
  .vinci-function-playback-mutation .vinci-binding-operation b{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.vinci-function-source-row[data-function-control-kind] .vinci-control-operation{
  width:320px;max-width:100%
}
.vinci-function-source-row[data-function-control-kind] .vinci-control-diagram:not(.vinci-decision-assembly){
  width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(82px,1fr);gap:7px
}
.vinci-function-source-row[data-function-control-kind] .vinci-control-diagram>.vinci-mini-flow-arrow{display:none}
.vinci-function-source-row[data-function-control-kind="loop"] .vinci-control-diagram:not(.vinci-decision-assembly){
  /* Two columns, not three: the mini-flow arrow is hidden in a source row, so
     the lanes took the `auto` column and the third sat empty while the gate
     was squeezed to 112px of a 302px card. */
  grid-template-columns:minmax(0,1fr) minmax(86px,auto)
}
/* The loop test is a ValuePill, and a ValuePill is flex:0 0 auto + nowrap: it
   ignored its 112px gate and ran under the lane labels (`!finished: ?` over
   "loop body / after loop"). In the gate it shrinks and its name wraps. */
.vinci-function-source-row[data-function-control-kind] .vinci-control-gate[data-function-condition-form="generic"]>.vinci-function-condition-evaluation-pill{
  flex:1 1 auto;min-width:0;max-width:100%;white-space:normal
}
.vinci-function-source-row[data-function-control-kind] .vinci-control-lanes{min-width:0;width:100%}
.vinci-function-source-row[data-function-control-kind] .vinci-control-lane{position:relative;min-width:0}
.vinci-function-source-row[data-function-control-kind] .vinci-control-lane[data-path-route="function-exit"]::after{
  content:"";position:absolute;left:100%;top:50%;width:12px;border-top:1.5px dashed rgba(122,74,8,.28)
}
.vinci-function-source-row[data-function-control-kind] .vinci-control-lane[data-path-route="continue"]::after,
.vinci-function-source-row[data-function-control-kind] .vinci-control-lane[data-path-route="loop-body"]::after{
  content:"";position:absolute;left:8px;top:100%;height:7px;border-left:1.5px dashed rgba(122,74,8,.28)
}
.vinci-control-lane[data-state="unlit"]{color:var(--ink-soft);opacity:.76}
.vinci-control-lane[data-state="unlit"] .vinci-control-lane-line:not(.vinci-port-socket){border-top-style:dashed;border-color:rgba(142,111,71,.46)}
.vinci-counted-loop-facts{
  grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px;
  min-width:0;max-width:100%;color:#786c5e;font:650 6px/1.15 var(--mono)
}
.vinci-counted-loop-facts small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vinci-counted-loop-update{color:var(--gold-deep)}

/* Experiment 1: a pure Function IF whose two canonical Paths both terminate
   immediately at exact Return nodes.  The data contract is renderer-owned so
   alternate presentations can reuse these same Branch/Path/Return identities
   without changing the legacy feedback IF or counted Loop picture. */
.vinci-program-function[data-function-if-layout="direct-exits"]
  .vinci-function-playback-scope,
.vinci-program-function[data-function-if-layout="direct-exits"]
  .vinci-function-playback-connector{
  display:none!important
}
.vinci-program-function[data-function-if-layout="direct-exits"]
  [data-function-source-row][data-function-if-layout="direct-exits"]{
  min-height:184px!important;padding:18px 12px 12px!important;overflow:visible;
  border-color:rgba(122,74,8,.1);background:rgba(255,253,249,.72);opacity:1!important
}
.vinci-program-function[data-function-if-layout="direct-exits"]
  [data-function-if-decision-node]{
  width:100%!important;max-width:100%!important;padding:0!important;border:0!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important
}
.vinci-program-function[data-function-if-layout="direct-exits"]
  [data-function-if-diagram="direct-exits"]{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  grid-template-areas:"decision" "fork" "anchors";justify-items:center;gap:0;
  width:min(100%,330px)!important;max-width:330px!important;margin:auto
}
.vinci-direct-decision>.vinci-function-if-decision{
  grid-area:decision;display:grid;place-items:center;gap:4px;box-sizing:border-box;
  width:min(100%,238px);min-height:58px;height:auto;padding:9px 18px;transform:none;
  border:1.5px solid rgba(122,74,8,.46);border-radius:18px;color:var(--ink);
  background:#fffaf0;box-shadow:0 8px 18px rgba(122,74,8,.08)
}
.vinci-direct-decision>.vinci-function-if-decision small{
  color:var(--gold-deep);font:850 6px/1 var(--mono);letter-spacing:.16em
}
.vinci-direct-decision>.vinci-function-if-decision code{
  max-width:100%;overflow:hidden;color:var(--ink);font:780 10px/1.2 var(--mono);
  text-overflow:ellipsis;white-space:nowrap
}
.vinci-direct-decision>.vinci-function-if-fork{
  position:relative;grid-area:fork;display:block;width:50%;height:18px;overflow:visible
}
.vinci-direct-decision .vinci-control-lane-line{
  display:block;width:2px;height:10px;overflow:visible
}
.vinci-program-function[data-function-if-layout="direct-exits"]
  .vinci-control-lanes{
  grid-area:anchors;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:44px;width:100%;min-width:0
}
.vinci-program-function[data-function-if-layout="direct-exits"]
  .vinci-control-lane[data-function-if-branch-anchor]{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:10px auto;
  place-items:center;gap:0;min-width:0
}
.vinci-direct-decision .vinci-control-lane[data-function-if-branch-anchor]>.vinci-control-lane-label{
  box-sizing:border-box;min-width:68px;max-width:100%;padding:6px 10px;
  border:1px solid rgba(122,74,8,.28);border-radius:999px;color:#695845;
  background:#fff;font:800 7px/1 var(--mono);letter-spacing:.1em;text-align:center
}
.vinci-program-function[data-function-if-layout="direct-exits"]
  .vinci-control-lane[data-path-route="function-exit"]::after{display:none}
.vinci-program-function[data-function-if-layout="direct-exits"]
  .vinci-function-return-port[data-function-if-branch-anchor="TRUE"]{order:1}
.vinci-program-function[data-function-if-layout="direct-exits"]
  .vinci-function-return-port[data-function-if-branch-anchor="FALSE"]{order:2}
.vinci-program-function[data-function-if-layout="direct-exits"]
  .vinci-function-control-route-svg [data-function-if-branch-anchor]{
  stroke:rgba(101,90,72,.56);stroke-width:1.75;stroke-dasharray:5 4
}
.vinci-program-function[data-function-if-layout="direct-exits"]
  .vinci-function-control-route-svg [data-function-if-branch-anchor]:is([data-state="active"],[data-state="observed"]){
  stroke:#c97d0e;stroke-dasharray:none
}

/* A one-arm Function IF with an authored block uses that block as its real
   guarded body. The two canonical Return pills stay at the Function exit;
   source-owned Path routes connect BODY and after-IF continuation to them. */
.vinci-program-function[data-function-if-room="one-arm"]
  .vinci-function-playback-scope:not([hidden]){display:grid!important}
.vinci-program-function[data-function-if-room="one-arm"]
  [data-function-source-row][data-function-if-room]{
  display:grid!important;grid-template-columns:minmax(0,1fr);justify-items:center;
  width:min(100%,410px)!important;max-width:100%!important;min-width:0!important;
  min-height:0!important;margin-inline:auto!important;padding:22px 16px 16px!important;
  box-sizing:border-box;border:1px dashed rgba(122,74,8,.32)!important;border-radius:16px;
  background:rgba(255,252,245,.92)!important
}
.vinci-program-function[data-function-if-room="one-arm"]
  [data-function-if-room-condition]{width:100%;min-width:0;max-width:100%;justify-self:stretch}
.vinci-program-function[data-function-if-room="one-arm"]
  [data-function-if-room-condition]>[data-function-if-decision-node]{width:100%!important;max-width:100%!important}
.vinci-program-function[data-function-if-room="one-arm"]
  [data-function-if-diagram="direct-exits"]{width:min(100%,340px)!important;max-width:100%!important}
.vinci-program-function[data-function-if-room="one-arm"]
  [data-function-if-room-bodies]{display:grid!important;width:100%!important;max-width:100%;min-width:0;margin:8px 0 0}
.vinci-program-function[data-function-if-room="one-arm"]
  [data-function-if-room-body]{
  display:grid;place-items:center;width:100%;min-width:0;min-height:60px;
  padding:16px 9px 11px;box-sizing:border-box;border:1px solid rgba(122,74,8,.2);
  border-radius:12px;background:#fffdf8
}
.vinci-program-function[data-function-if-room="one-arm"]
  [data-function-if-room-body]::before{
  content:"IF BODY";display:block;justify-self:center;margin-bottom:7px;
  color:#7d643e;font:750 8px/1.2 var(--mono);letter-spacing:.08em
}
.vinci-program-function[data-function-if-room="one-arm"]
  [data-function-if-room-body]>.vinci-function-control-body-label{display:none!important}
.vinci-program-function[data-function-if-room="one-arm"]
  .vinci-function-if-body-exit-cue{
  display:block;justify-self:center;color:#985f0b;
  font:700 9px/1.3 var(--mono);text-align:center;overflow-wrap:anywhere
}
.vinci-program-function[data-function-if-room="one-arm"]
  [data-function-if-room-body] [data-function-source-row]{display:grid!important;width:100%;min-width:0}
.vinci-program-function[data-function-if-room="one-arm"]
  [data-function-if-room-body] .vinci-program-block-scope{display:grid!important;min-height:30px}
.vinci-program-function[data-function-if-room="one-arm"]
  [data-function-if-diagram="direct-exits"]>.vinci-control-lanes{visibility:visible!important}
.vinci-program-function[data-function-if-room="one-arm"]
  >.vinci-function-control-route-svg{visibility:visible!important}
.vinci-program-function[data-function-if-room="one-arm"]
  >.vinci-function-control-route-svg [data-function-if-room-route]{
  visibility:visible!important;opacity:.82;stroke:rgba(152,95,11,.65);
  stroke-width:1.6;stroke-dasharray:4 4
}
.vinci-program-function[data-function-if-room="one-arm"]
  >.vinci-function-control-route-svg [data-function-if-room-route]:is([data-state="active"],[data-state="observed"]){
  opacity:1;stroke:#c97d0e;stroke-dasharray:none
}
.vinci-program-function[data-function-if-room="one-arm"]
  .vinci-function-return-port[data-function-if-continuation="after-if"]::before{
  content:"AFTER IF";position:absolute;left:50%;top:-17px;
  transform:translateX(-50%);white-space:nowrap;color:#7d7367;
  font:750 7px/1 var(--mono);letter-spacing:.06em
}

/* A single authored IF may fork to two authored Call steps and then rejoin at
   one later Return.  It stays inside the normal Function ledger: the Branch
   is the rectangular step, its exact Path nodes are the lower-edge ports, and
   the exact Call rows occupy the two child seats. */
.vinci-program-function[data-function-if-layout="step-fork"]{
  --vinci-if-branch-collapsed-h:80px;--vinci-if-child-collapsed-h:58px;
  --vinci-if-branch-active-h:160px;--vinci-if-child-active-h:160px;
  width:min(100%,420px);padding-top:68px;padding-bottom:12px
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-playback-sequence[data-function-if-layout="step-fork"]{
  --vinci-if-live-branch-h:var(--vinci-if-branch-collapsed-h);
  --vinci-if-live-child-h:var(--vinci-if-child-collapsed-h);
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:56px 8px var(--vinci-if-live-branch-h) 32px
    var(--vinci-if-live-child-h) 24px;column-gap:16px;row-gap:0;
  align-content:start;align-items:start;justify-items:stretch;width:100%;box-sizing:border-box;
  transition:grid-template-rows .46s cubic-bezier(.32,.72,0,1)
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-playback-sequence[data-function-if-layout="step-fork"]:has(
    [data-function-if-child-step-row]:is(
      [data-current="true"],[data-receiving="true"],[data-function-flow-geometry-hold="statement"]
    )
  ){
  /* The chosen ordinary Step opens its own work room. The branch route still
     lands on its top Port; no mutation window floats above the Step. */
  --vinci-if-live-child-h:var(--vinci-if-child-active-h)
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-playback-sequence[data-function-if-layout="step-fork"]:has(
    [data-function-source-row][data-function-if-layout="step-fork"]:is(
      [data-current="true"],[data-function-flow-geometry-hold="branch"]
    )
  ){
  --vinci-if-live-branch-h:var(--vinci-if-branch-active-h)
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-playback-scope{
  grid-column:1/-1;grid-row:1;display:grid!important;width:100%;min-width:0
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-parameter-dock{top:20px!important;bottom:auto!important}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-entry-connector]{grid-column:1/-1;grid-row:2;justify-self:center}
.vinci-program-function[data-function-if-layout="step-fork"]
  :is([data-function-if-branch-scope-row],[data-function-if-branch-scope-connector]){
  display:none!important
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]{
  grid-column:1/-1;grid-row:3;justify-self:center;box-sizing:border-box;
  width:min(100%,286px)!important;min-height:0!important;height:100%!important;
  padding:17px 8px 10px!important;overflow:visible;opacity:.9!important;
  border-color:rgba(122,74,8,.27);background:rgba(255,252,245,.9)
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-connector]{display:none!important}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row="TRUE"]{grid-column:1;grid-row:5}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row="FALSE"]{grid-column:2;grid-row:5}
/* Each branch successor is an ordinary Function ledger step.  Its exact
   semantic operation is the readable content, just as a Messi mutation uses
   the existing mutation primitive; the IF contributes only ports/routes. */
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row]{
  display:grid!important;place-items:center!important;justify-self:stretch;box-sizing:border-box;
  width:100%!important;min-width:0;min-height:0!important;height:100%!important;
  padding:22px 7px 10px!important;overflow:visible;border-radius:12px;
  opacity:.72!important;background:rgba(255,255,255,.8)
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row]>.vinci-function-row-mark{
  position:static;inset:auto;display:grid;place-items:center;width:100%;min-width:0;margin:0
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row][data-current="true"]>.vinci-function-row-mark{
  position:absolute;left:0;right:0;bottom:12px;width:100%;padding-inline:6px;box-sizing:border-box
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row]>.vinci-function-playback-step-kind{
  left:7px;top:6px;max-width:calc(100% - 14px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row]>.vinci-function-playback-source-code{
  display:none!important
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row] .vinci-call-operation{
  display:inline-flex!important;box-sizing:border-box;max-width:calc(100% - 6px);min-width:0;
  padding:7px 3px;overflow:hidden
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row] .vinci-property-operation{
  display:none!important
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row] .vinci-property-operation-action{
  display:none!important
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row] .vinci-property-operation-expression{
  min-width:0;overflow:hidden;font-size:7.2px;letter-spacing:-.025em;
  text-overflow:ellipsis;white-space:nowrap
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row][data-current="true"] .vinci-property-operation,
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row] .vinci-property-operation[data-function-beat-active="true"]{
  border-color:rgba(152,95,11,.52);color:#985f0b;background:#fcfbfa;
  box-shadow:0 7px 18px rgba(122,74,8,.1);opacity:1!important
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row]:is(
    [data-current="true"],[data-receiving="true"],[data-function-flow-geometry-hold="statement"]
  ){
  opacity:1!important
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ){
  opacity:1!important
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row][data-function-branch-choice="unselected"]{
  opacity:.38!important;filter:saturate(.55)
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row][data-function-branch-choice="selected"]{
  opacity:1!important
}
/* Shared Function condition primitive. IF and Loop TEST retain distinct graph
   topology and layout wrappers, but their gate, authored expression, ValuePill
   evaluation, operands, source seat/binding and outcome ports use this one
   neutral renderer contract. Layout-specific rules below remain aliases. */
:where(.vinci-function-condition-gate){
  position:relative;box-sizing:border-box;min-width:0
}
:where(.vinci-function-condition-kind,.vinci-function-condition-source){min-width:0}
:where(.vinci-function-condition-evaluation-pill){min-width:0}
:where(.vinci-function-condition-evaluation-pill)>.vinci-value-pill-name{
  display:inline-flex;align-items:center;min-width:0
}
:where(.vinci-function-condition-operand,.vinci-function-condition-operator){
  display:inline-block;min-width:0;white-space:nowrap
}
:where([data-function-condition-path]){min-width:0}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-step-port{
  position:absolute;left:50%;z-index:8;display:block;box-sizing:border-box;width:10px;height:10px;
  transform:translateX(-50%);border:1.5px solid rgba(122,74,8,.38);border-radius:50%;
  background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.72)
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-step-input-port{top:-6px}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-step-output-port{bottom:-6px}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row][data-current="true"]>.vinci-function-step-port,
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"][data-current="true"]
    >.vinci-function-step-input-port{
  border-color:#c97d0e;background:#fcfcfb;box-shadow:0 0 0 4px rgba(238,150,20,.1)
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-step-work-dock{
  position:absolute;left:50%;top:44%;width:0;height:0;pointer-events:none
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row]>.vinci-function-step-work-dock{top:52%}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  )>.vinci-function-step-work-dock{left:74px;top:81px}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-decision-node]{
  display:block!important;width:100%!important;max-width:100%!important;padding:0!important;
  overflow:visible!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]
  >.vinci-function-playback-source-code{display:none!important}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-diagram="step-fork"]{
  position:relative;display:block!important;box-sizing:border-box;width:100%!important;
  max-width:100%!important;min-height:38px;margin:0!important;padding:0!important
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-if-step{
  position:relative;display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;width:min(100%,244px);min-height:38px;
  margin:auto;padding:0;transform:none;border:0;border-radius:0;color:var(--ink);
  background:transparent;box-shadow:none
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-if-step:has(
    .vinci-function-if-evaluation-pill[data-function-if-operand-source="property-value"]
  ){
  justify-content:flex-end;width:min(100%,264px);padding-right:34px
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-if-step small{
  color:var(--gold-deep);font:850 6px/1 var(--mono);letter-spacing:.15em
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-if-step code{
  min-width:0;overflow:hidden;color:var(--ink);font:780 10px/1.2 var(--mono);
  text-overflow:ellipsis;white-space:nowrap
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-if-evaluation-pill{
  --vinci-data-pill-h:34px;--vinci-data-pill-pad:6px 12px;
  --vinci-data-pill-font-size:10px;--vinci-data-pill-font-family:var(--mono);
  justify-content:center;display:inline-flex!important;width:auto;max-width:236px;margin:0;
  opacity:1;transform:none;transform-origin:right center;pointer-events:none;
  transition:left .42s cubic-bezier(.32,.72,0,1),width .42s cubic-bezier(.32,.72,0,1),
    max-width .42s cubic-bezier(.32,.72,0,1),
    border-color .22s ease,background-color .22s ease,box-shadow .26s ease
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-if-ball-bay{display:none}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-if-evaluation-pill>.vinci-value-pill-name{
  display:inline-flex;align-items:center;gap:6px;overflow:visible;text-overflow:clip;
  color:#55483a;white-space:nowrap
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-if-condition-operand,
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-if-condition-operator{
  display:inline-block;min-width:0;white-space:nowrap
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-condition-operand="left"]{
  position:relative;z-index:2;transition:width .42s cubic-bezier(.32,.72,0,1),
    max-width .42s cubic-bezier(.32,.72,0,1),color .16s linear,opacity .16s linear,
    filter .16s linear
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-condition-operand="left"][data-state="represented-by-ball"]{
  box-sizing:border-box;width:22px;max-width:22px;overflow:hidden;
  color:transparent;opacity:0;filter:none
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-if-evaluation-pill:has(
    >.vinci-function-if-ball-bay[data-state="receiving"]
  ) [data-function-if-condition-operand="left"]{
  box-sizing:border-box;width:22px;max-width:22px;overflow:hidden;
  color:transparent;opacity:0;filter:none
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-condition-operand="left"]:is(
    [data-state="transferred"],[data-function-if-operand-transfer="receiving"]
  ){
  box-sizing:border-box;width:22px;max-width:22px;overflow:hidden;
  color:transparent;opacity:0;filter:blur(.5px)
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-condition-operand="left"]:is([data-state="received"],[data-state="resolved"]){
  color:#8a5a20;font-weight:850;opacity:1;filter:none
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-condition-operand="left"][data-function-if-operand-transfer="settled"]{
  transition:none!important
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-suffix-transfer="moving"]{will-change:transform}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vfield:is([data-function-read-source="value-only"],[data-function-read-source="value-giving"]){
  overflow:visible!important;border-color:transparent!important;background:transparent!important;
  box-shadow:none!important
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-if-evaluation-pill>.vinci-value-pill-value:empty{
  display:none!important
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-if-evaluation-pill[data-state="reading"]{
  border-color:rgba(66,104,152,.38);
  background-color:#f8fbff;background-image:none;
  box-shadow:0 7px 18px rgba(53,85,125,.1)
}
/* CONDITION READ is one stable device. Only the authored left operand yields
   its space to the Ball and its exact field; the comparison suffix remains
   painted in the right column throughout docking, reading and scalar handoff.
   The device itself remains painted through the verdict. */
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-if-evaluation-pill:is([data-state="substituted"],[data-state="resolved"]){
  border-color:rgba(193,126,31,.5);
  background-color:#fffaf0;background-image:none;
  box-shadow:0 7px 18px rgba(122,74,8,.09)
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-if-evaluation-pill[data-state="resolved"]>.vinci-value-pill-value{
  color:#7a4a08;font-weight:850;letter-spacing:.08em
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  )
  .vinci-function-if-step{
  position:absolute;left:50%;right:auto;top:-51px;bottom:auto;width:min(100%,264px);height:124px;
  transform:translateX(-50%);padding:0
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) .vinci-function-if-step:has(
    .vinci-function-if-evaluation-pill[data-function-if-operand-source="property-value"]
  ){
  justify-content:flex-end;padding-right:34px
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) .vinci-function-if-evaluation-pill[data-function-if-operand-source="property-value"]{
  --vinci-data-pill-h:124px;position:relative;left:0;box-sizing:border-box;display:grid!important;
  grid-template-columns:112px minmax(0,1fr);grid-template-rows:1fr 1fr;
  column-gap:0;width:196px;max-width:196px;height:124px;margin:0;padding:4px;
  border-radius:60px 28px 28px 60px;align-items:center;justify-items:center;overflow:visible;
  background:rgba(255,255,255,.97);
  animation:vinciFunctionIfLeftBayOpen .46s cubic-bezier(.32,.72,0,1) both
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) .vinci-function-if-evaluation-pill[data-function-if-operand-source="property-value"]
  >.vinci-function-if-ball-bay{
  box-sizing:border-box;display:grid;grid-column:1;grid-row:1/3;width:112px;height:112px;
  border-radius:56px;place-items:center;outline:0;outline-offset:-2px;background:transparent;
  transition:background-color .24s ease,box-shadow .3s ease
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) .vinci-function-if-ball-bay[data-state="receiving"]{
  outline-color:transparent;background:transparent;box-shadow:none
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) .vinci-function-if-ball-bay[data-state="occupied"]{
  outline-color:transparent;background:transparent;box-shadow:none
}
/* The Ball occupies only the Evaluation's left operand bay. The authored
   operator/right operand stay in the right column, so receiving the Ball never
   blanks or recentres the complete condition. */
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) .vinci-function-if-evaluation-pill
  >.vinci-function-if-ball-bay:is([data-state="receiving"],[data-state="occupied"]){
  position:relative!important;left:auto!important;top:auto!important;z-index:3;
  grid-column:1!important;grid-row:1/3!important;transform:none!important
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) .vinci-function-if-evaluation-pill:has(
    >.vinci-function-if-ball-bay:is([data-state="receiving"],[data-state="occupied"])
  ){
  left:0!important;width:196px!important;max-width:196px!important;
  transition:border-color .22s ease,background-color .22s ease,box-shadow .26s ease!important
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) .vinci-function-if-evaluation-pill>.vinci-value-pill-name{
  grid-column:2;grid-row:1/3;align-self:center;justify-self:center;gap:6px
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) .vinci-function-if-evaluation-pill[data-state="source"]{
  left:0;width:196px;max-width:196px
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) .vinci-function-if-evaluation-pill[data-state="reading"]>.vinci-value-pill-name{
  justify-self:center
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) .vinci-function-if-evaluation-pill[data-state="resolved"]>.vinci-value-pill-name{
  grid-row:1/3;align-self:center
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) .vinci-function-if-evaluation-pill>.vinci-value-pill-value{
  grid-column:2;grid-row:2;align-self:start;justify-self:center;margin-top:5px
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) .vinci-function-if-evaluation-pill[data-function-read-container="releasing"]
  >.vinci-value-pill-name{
  opacity:0;filter:blur(1px);transition:opacity .2s ease,filter .2s ease
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) .vinci-function-if-evaluation-pill:is(
    [data-function-read-container="scalar"],[data-function-read-container="filled"]
  ){
  --vinci-data-pill-h:124px;box-sizing:border-box;display:grid!important;
  grid-template-columns:112px minmax(0,1fr);grid-template-rows:1fr 1fr;column-gap:0;
  width:min(196px,100%);max-width:196px;height:124px;margin:0;padding:4px;
  border-color:rgba(193,126,31,.5);border-radius:60px 28px 28px 60px;
  background-color:#fffaf0;background-image:none;box-shadow:0 7px 18px rgba(122,74,8,.09);
  animation:none
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) .vinci-function-if-evaluation-pill:is(
    [data-function-read-container="scalar"],[data-function-read-container="filled"]
  )>.vinci-function-if-ball-bay{
  display:none!important
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) .vinci-function-if-evaluation-pill:is(
    [data-function-read-container="scalar"],[data-function-read-container="filled"]
  )>.vinci-value-pill-name{
  grid-column:2;grid-row:1/3;align-self:center;justify-self:start;opacity:1;filter:none
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) .vinci-function-if-evaluation-pill:is(
    [data-function-read-container="scalar"],[data-function-read-container="filled"]
  )>.vinci-value-pill-value{
  grid-column:2;grid-row:2;align-self:start;justify-self:center;margin-top:4px
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) .vinci-function-if-evaluation-pill[data-state="resolved"]:is(
    [data-function-read-container="scalar"],[data-function-read-container="filled"]
  )>.vinci-value-pill-name{
  grid-row:1/3;align-self:center
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) .vinci-function-if-evaluation-pill[data-state="resolved"]>.vinci-value-pill-value{
  position:absolute;left:112px;right:4px;bottom:18px;width:auto;margin:0;
  text-align:center
}
@keyframes vinciFunctionIfLeftBayOpen{
  from{clip-path:inset(45px 0 45px 40px round 17px)}
  to{clip-path:inset(0 round 60px 28px 28px 60px)}
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:not(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) .vinci-function-if-evaluation-pill:is([data-state="substituted"],[data-state="resolved"])
  >:is(.vinci-value-pill-name,.vinci-value-pill-value){
  transform:none!important
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-diagram="step-fork"]>.vinci-control-lanes{
  position:absolute;left:0;right:0;bottom:-22px;display:block!important;
  width:auto!important;height:22px;min-width:0;
  transition:bottom .46s cubic-bezier(.32,.72,0,1)
}
.vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]:is(
    [data-current="true"],[data-function-flow-geometry-hold="branch"]
  ) [data-function-if-diagram="step-fork"]>.vinci-control-lanes{
  bottom:-70px
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-control-lane[data-function-if-branch-anchor]{
  position:absolute;left:var(--vinci-function-if-port-x,25%);bottom:0;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:8px 10px;
  place-items:center;gap:4px;
  width:40px;height:22px;min-width:0;transform:translateX(-50%);opacity:1
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-control-lane[data-function-if-branch-anchor="FALSE"]{
  left:var(--vinci-function-if-port-x,75%)
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-control-lane[data-function-if-branch-anchor]>.vinci-control-lane-line{
  grid-row:2;display:block;box-sizing:border-box
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-control-lane[data-function-if-branch-anchor]>.vinci-control-lane-label{
  grid-row:1;box-sizing:border-box;min-width:0;padding:0;border:0;border-radius:0;
  color:rgba(102,88,70,.72);background:transparent;font:800 6px/1 var(--mono);
  letter-spacing:.11em;text-align:center;transform:none;
  transition:opacity .14s ease
}
.studio-visual-program:is(
  [data-function-flow-subphase="condition-actor-leaving"],
  [data-function-flow-subphase="condition-key-releasing"],
  [data-function-flow-subphase="condition-value-dechroming"],
  [data-function-flow-subphase="condition-value-ready"],
  [data-function-flow-subphase="condition-value-moving"],
  [data-function-flow-subphase="condition-substituted"],
  [data-function-flow-subphase="condition-resolved"],
  [data-function-flow-subphase="step-output"],
  [data-function-flow-subphase="path-socket"],
  [data-function-flow-subphase="step-entry"],
  [data-function-flow-subphase="step-expansion-clearance"],
  [data-function-flow-subphase="step-expanding"],
  [data-function-flow-subphase="step-to-work"],
  [data-function-flow-subphase="step-inside"],
  [data-function-flow-subphase="step-resolved"],
  [data-function-flow-subphase="step-contracting"],
  [data-function-flow-subphase="step-output-clearance"],
  [data-function-flow-subphase="function-exit"],
  [data-function-flow-subphase="caller-result"],
  [data-function-flow-subphase="caller-binding"]
) .vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-control-lane[data-function-if-branch-anchor]>.vinci-control-lane-label{
  opacity:0!important;visibility:hidden!important;transition:none!important
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-control-lane[data-function-if-branch-anchor]::after{display:none!important}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-control-route-svg [data-function-if-branch-anchor],
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-control-route-svg [data-function-if-shared-route],
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-control-route-svg [data-function-if-return-exit-route]{
  stroke:rgba(122,74,8,.28);stroke-width:1.5;stroke-dasharray:none;fill:none
}
.vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-control-route-svg :is(
    [data-function-if-branch-anchor],[data-function-if-shared-route],[data-function-if-return-exit-route]
  ):is([data-state="active"],[data-state="observed"]){
  stroke:#c97d0e;stroke-width:1.75;stroke-dasharray:none
}
.vinci-function-local-definitions>.vinci-binding-pill{justify-self:center}
.vinci-function-nested-scopes{
  position:relative;z-index:8;display:grid;place-items:center;gap:12px;width:100%;margin-top:4px
}
.vinci-function-nested-scopes>.vinci-program-function{width:min(100%,278px)}
/* A nested Function opened where it was declared fills the home it was
   given rather than sizing itself from its longest authored line; its rows
   then have a real width to resolve against, exactly as a top-level open
   function's do. */
.vinci-function-nested-scopes>.vinci-program-function[data-scope-view="open"]{
  width:100%;min-width:0;max-width:100%
}
/* ── A borrowed Function in a Binding pill's value seat ────────────────────
   `const briefed = await converseUntil(job)` is the binding's own pill with
   the call adopted into its value seat: at rest the call mark, `briefed:  ƒ
   converseUntil(job) ▸`; opened, the callee's one shell, on loan
   (vinci-value-pill.mjs owns the seat and the pill's growth; this file owns
   how a Function looks inside it). The Await that wrapped the call stays in
   the DOM for playback and evidence, folded. */
.vinci-value-pill[data-value-slot="call"]>.vinci-value-pill-name,
.vinci-value-pill[data-value-slot="activation"]>.vinci-value-pill-name{color:#6f4a16;font:600 13px/1.2 var(--mono);letter-spacing:.01em}
/* Open: the body takes the seat, the seat takes the pill, the pill takes the
   row — and the row's Function grows to its own cap. */
.vinci-value-pill-slot>.vinci-program-function[data-scope-view="open"]{width:100%;min-width:0;max-width:100%}
.vinci-value-pill-slot>.vinci-program-function:has(.vinci-function-parameter-dock .vinci-parameter-binding-pill):not([data-scope-view="collapsed"]){
  margin-top:var(--vinci-parameter-dock-clearance,56px)
}
/* (0,2,0)+important: the authored-operation card sets display:grid!important. */
.vinci-authored-operation[data-await-folded-into-binding],[data-await-folded-into-binding]{display:none!important}
/* What the borrowed shell was handed: `work ← job`. The seat is the
   parameter; the annotation is the call's argument, paired by position when
   the call borrows, forgotten when it gives the shell back. */
[data-function-borrowed-by] .vinci-parameter-binding-pill[data-activation-argument]::after{
  content:"← " attr(data-activation-argument);order:3;margin-left:5px;color:#985f0b;
  font:650 10px/1 var(--mono);letter-spacing:.01em;white-space:nowrap
}
/* `reps ← 5`, not `reps ← 5 = 3`: a handed argument supersedes the authored
   default for this reading. (0,5,0)+important: the seat's default is shown
   at (0,4,0)+important on every navigator cover. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"] .vinci-parameter-binding-pill[data-activation-argument]>.vinci-parameter-shape,
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"] .vinci-parameter-binding-pill[data-activation-argument]>[data-function-parameter-value="default"],
/* …and (1,4,0) on the canonical Function lesson, whose own sheet
   (object-translator.css) insists on `reps = 3` at (1,3,0)+important. The
   canonical lesson is its own surface: no guard on these two. */
#semantic-stage[data-case-id="canonical:function"] .vinci-parameter-binding-pill[data-activation-argument]>.vinci-parameter-shape,
#semantic-stage[data-case-id="canonical:function"] .vinci-parameter-binding-pill[data-activation-argument]>[data-function-parameter-value="default"]{
  display:none!important
}
/* The same fact during a run: `train(5)` read "reps: 5 3", as if both were
   bound. JavaScript evaluates a default only when its argument is missing or
   undefined, so while a call's supplied value is bound
   (data-function-parameter-default="superseded", projected from that call's
   receipt by function-execution-values.mjs) the default steps aside: it fades
   and gives back its width and the row's gap (the measured start width and
   gap ride the chip inline), then leaves the row. `train()`, rest, Reset and
   every fresh drawing keep `reps = 3` exactly as authored. Seeking settles at
   once. Layered, so this !important outranks the unlayered seat rules that
   show the default — (0,4,0) on navigator covers, (1,3,0) on the canonical
   lesson — wherever the seat stands, at the entry hole or inside the scope. */
@layer vinci-function-contract{
  .vinci-parameter-binding-pill[data-function-parameter-default="superseded"]>[data-function-parameter-value="default"]{
    display:none!important;max-width:0!important;opacity:0!important;overflow:hidden!important;
    margin-inline-start:calc(-1 * var(--function-default-gap,0px))!important
  }
  /* Its `=` belongs to the default it introduces. The entry dock already
     hides it; the same Pill travelling into the scope must not show a lone
     `=` beside the supplied value. */
  .vinci-parameter-binding-pill[data-function-parameter-default="superseded"]>.vinci-parameter-shape{display:none!important}
  @media (prefers-reduced-motion:no-preference){
    .vinci-parameter-binding-pill[data-function-parameter-default="superseded"]:not([data-function-execution-seeking] *)>[data-function-parameter-value="default"]{
      transition:max-width 200ms cubic-bezier(.4,0,.2,1),margin-inline-start 200ms cubic-bezier(.4,0,.2,1),opacity 160ms ease,display 200ms allow-discrete!important
    }
  }
}
/* Pointing at a call mark lights the declaration it names, wherever the
   shell is standing — the lookup a call performs before it invokes. Nothing
   is drawn between them at rest. */
.vinci-program-function[data-function-lookup-hover="true"]{
  border-color:rgba(122,74,8,.6)!important;box-shadow:0 0 0 3px rgba(238,150,20,.18),0 6px 18px rgba(44,35,20,.08)!important
}
.vinci-dataflow-tether{z-index:9;height:15px;margin:-1px auto 0;border-left-color:rgba(152,95,11,.48)}
.vinci-dataflow-tether::before{
  content:"reads";position:absolute;left:8px;top:2px;color:#985f0b;font:650 6px/1 var(--mono);letter-spacing:.04em
}
.vinci-dataflow-tether::after{border-right-color:rgba(152,95,11,.62);border-bottom-color:rgba(152,95,11,.62)}
.vinci-program-operation{display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font:650 9px/1.25 var(--mono)}
.vinci-program-operation.vinci-property-operation{display:inline-flex;gap:8px;padding:8px 12px;border:1px solid rgba(71,91,118,.2);border-radius:999px;color:#33465f;background:rgba(252,253,255,.96);box-shadow:0 2px 4px rgba(44,64,88,.03),0 5px 14px rgba(44,64,88,.05);white-space:nowrap;opacity:1}
.vinci-program-operation.vinci-property-operation[data-owner-routed="true"]{
  gap:5px;padding:0;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important
}
.vinci-program-operation.vinci-property-operation[data-owner-routed="true"] .vinci-property-operation-action{
  padding:3px 5px;border:1px solid rgba(122,74,8,.22);border-radius:999px;color:var(--gold-deep);
  background:rgba(255,248,235,.96)
}
.vinci-property-operation-action{color:#718096;font:700 7px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.vinci-property-operation-expression{font:500 11px/1.3 var(--mono)}
.vinci-program-operation.vinci-field-change[data-operation-kind="mutation"]{
  gap:0;overflow:hidden;border:1px solid var(--vinci-data-pill-edge,rgba(203,162,91,.38));border-radius:999px;color:var(--ink-soft);
  background:#fff;box-shadow:var(--vinci-data-pill-shadow,0 2px 4px rgba(44,35,20,.04),0 5px 14px rgba(44,35,20,.06));
  font:500 12px/1.35 var(--vinci-data-pill-font-family,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif)
}
:is(.studio-visual-program,.vinci-mark-preview) .vinci-program-operation.vinci-field-change[data-state="inactive"],
:is(.studio-visual-program,.vinci-mark-preview) .vinci-program-operation.vinci-field-change[data-state="verified"],
:is(.studio-visual-program,.vinci-mark-preview) .vinci-program-operation.vinci-field-change[data-state="verified-ready"]{opacity:1}
.vinci-field-change .vinci-operation-field{padding:9px 12px 9px 14px;color:var(--ink-soft);background:#fff;font-weight:500}
.vinci-field-change .vinci-operation-mechanism{
  align-self:stretch;display:grid;place-items:center;min-width:28px;padding:9px 12px;border-left:1px solid rgba(203,162,91,.26);
  color:var(--gold-deep);background:#fffaf1;font-weight:500
}
.vinci-field-operation-dock{
  position:absolute;left:calc(100% + 9px);top:50%;z-index:18;display:flex;align-items:center;transform:translateY(-50%);
  overflow:visible;pointer-events:none
}
.vinci-field-operation-dock::before{content:"";width:17px;border-top:1.5px dashed rgba(238,150,20,.44)}
:is(.studio-visual-program,.vinci-mark-preview) .vfield:has(>.vinci-field-operation-dock){position:relative;overflow:visible}
.studio-visual-program:not([data-motion-phase]) .vmark-ball-live[data-state="expanded"]
  .vfield:has(>.vinci-field-operation-dock){position:relative;overflow:visible;-webkit-line-clamp:unset}

.vinci-value-pill[data-mutation-pulse="write"],
.vinci-binding-pill[data-mutation-pulse="write"],
.vfield[data-mutation-pulse="write"] {
  animation: vinci-mutation-write-pulse 0.9s cubic-bezier(.2,.8,.2,1);
}
.semantic-stage[data-primary-view="play"] .vmark-ball-live-edit-toggle {
  display: none !important;
}
@keyframes vinci-mutation-write-pulse {
  0%,100% { filter:none; }
  35% { filter:drop-shadow(0 0 5px rgba(238,150,20,.34)); }
}
/* Mutation acknowledgement is paint-only for every ValuePill. A scale pulse
   makes a standalone Pill look wider and fights a Ball's own choreography. */
.vmark-ball-live .vfield[data-window="true"][data-mutation-pulse="write"] {
  animation:vinci-ball-mutation-write-pulse .9s cubic-bezier(.2,.8,.2,1); }
@keyframes vinci-ball-mutation-write-pulse {
  0% { background:var(--vinci-data-pill-bg);box-shadow:var(--vinci-data-pill-shadow); }
  38% { background:#fff4d2;box-shadow:0 0 0 5px rgba(238,150,20,.18),var(--vinci-data-pill-shadow); }
  100% { background:var(--vinci-data-pill-bg);box-shadow:var(--vinci-data-pill-shadow); }
}
.vinci-collapsed-operation-summary{
  position:absolute;left:calc(50% + 26px);top:50%;z-index:16;display:inline-grid;gap:3px;max-width:145px;
  padding:7px 10px;transform:translateY(-50%);border:1px solid rgba(238,150,20,.34);border-radius:10px;
  color:var(--ink-soft);background:rgba(255,255,255,.97);box-shadow:0 7px 18px rgba(122,74,8,.09);
  font-family:var(--mono);pointer-events:none
}
.vinci-collapsed-operation-summary::before{
  content:"";position:absolute;right:100%;top:50%;width:13px;border-top:1.5px dashed rgba(238,150,20,.44)
}
.vinci-collapsed-operation-summary small{color:var(--gold-deep);font:750 7px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.vinci-collapsed-operation-summary code{overflow:hidden;color:var(--ink);font:700 8px/1.25 var(--mono);text-overflow:ellipsis;white-space:nowrap}
.vinci-ball-seat:has(.vmark-ball-live[data-state="expanded"])>.vinci-collapsed-operation-summary{display:none!important}
/* A source-only Change note must not cover the native field window when its
   original Ball is temporarily lent to the playback work device. */
[data-function-execution]:not([data-function-execution="ready"]) .vinci-collapsed-operation-summary[data-summary-kind="mutation"]{display:none!important}
[data-destructure-playback] .vinci-destructure-outputs{max-width:100%;gap:10px}
[data-destructure-playback] .vinci-destructure-flow{flex-wrap:wrap;gap:14px}
[data-destructure-playback] .vinci-authored-operation-header b{white-space:normal}
[data-destructure-extraction-field]{outline:2px solid #d79026;outline-offset:4px}
/* Play already carries the same Ball field through its Change rehearsal. */
#semantic-stage[data-canonical-mutation="true"][data-primary-view="play"] .vinci-collapsed-operation-summary,
#semantic-stage[data-canonical-mutation="true"][data-primary-view="play"] .vinci-field-operation-dock{display:none}
@media(max-width:650px){
  #semantic-stage[data-concept-id="mutation"][data-primary-view="structure"]
    .vinci-ball-seat:has(>.vinci-collapsed-operation-summary):has(.vmark-ball-live[data-state="collapsed"]){margin-bottom:64px}
  #semantic-stage[data-concept-id="mutation"][data-primary-view="structure"]
    .vinci-collapsed-operation-summary{
    left:50%;top:calc(100% + 8px);max-width:min(300px,calc(100vw - 28px));transform:translateX(-50%)
  }
  #semantic-stage[data-concept-id="mutation"][data-primary-view="structure"]
    .vinci-collapsed-operation-summary::before{
    left:50%;right:auto;top:auto;bottom:100%;width:0;height:8px;border-top:0;border-left:1.5px dashed rgba(238,150,20,.44)
  }
  #semantic-stage[data-concept-id="mutation"][data-primary-view="structure"]
    .vinci-collapsed-operation-summary code{white-space:normal;overflow-wrap:anywhere}
  #semantic-stage[data-concept-id="mutation"][data-primary-view="structure"]
    .vinci-field-operation-dock{left:50%;top:calc(100% + 10px);transform:translateX(-50%)}
  #semantic-stage[data-concept-id="mutation"][data-primary-view="structure"]
    .vinci-field-operation-dock::before{
    width:1px;height:15px;border-top:0;border-left:1.5px dashed rgba(238,150,20,.44)
  }
}
.vinci-program-operation-parking{display:none}
.vinci-program-semantic-parking{display:none}
.vinci-semantic-fragment{
  position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0;width:min(100%,360px);margin:8px auto;padding:9px;
  box-sizing:border-box;border:1px solid rgba(238,150,20,.24);border-radius:14px;
  background:rgba(255,253,248,.92);box-shadow:0 10px 24px rgba(122,74,8,.06)
}
.vinci-semantic-fragment-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;min-width:0;padding:0 3px}
.vinci-semantic-fragment-header b{min-width:0;overflow-wrap:anywhere;color:var(--gold-deep);font:750 9px/1.15 var(--mono)}
.vinci-semantic-fragment-header small{min-width:0;overflow-wrap:anywhere;color:var(--ink-mute);font:650 6.5px/1.35 var(--mono);letter-spacing:.04em;white-space:normal}
.vinci-semantic-scene-host{display:block;min-width:0}
.vinci-program-function-body>.vinci-semantic-fragment{width:min(100%,270px);margin:4px auto;padding:7px}

/* Source-authored definitions beyond Ball, Rail, and Function. These are
   compact structural marks: they show what exists without pretending it ran. */
.vinci-static-definition{
  position:relative;z-index:4;display:grid;gap:7px;width:min(100%,270px);box-sizing:border-box;padding:8px;
  border:1px solid rgba(238,150,20,.3);border-radius:12px;color:var(--ink);
  background:linear-gradient(155deg,rgba(255,255,255,.98),rgba(255,249,238,.92));
  box-shadow:0 8px 20px rgba(122,74,8,.075)
}
.vinci-static-definition-header{display:flex;align-items:center;gap:7px;min-width:0}
.vinci-static-definition-glyph{
  flex:0 0 auto;display:grid;place-items:center;width:20px;height:20px;border:1px solid rgba(238,150,20,.44);
  border-radius:7px;color:var(--gold-deep);background:#fff5df;font:800 9px/1 var(--mono)
}
.vinci-static-definition-title{overflow:hidden;min-width:0;font:760 9px/1.15 var(--mono);text-overflow:ellipsis;white-space:nowrap}
.vinci-static-definition-state{margin-left:auto;color:var(--ink-mute);font:650 6px/1 var(--mono);white-space:nowrap}
.vinci-static-definition[data-visual-state="unknown"]{border-style:dashed}
.vinci-static-definition[data-visual-state="unknown"] .vinci-static-definition-state{color:#8b6844}
.vinci-static-definition-binding{order:3;margin-left:auto}
.vinci-static-definition-body{display:grid;place-items:center;min-width:0}
.vinci-class-schema{width:100%;overflow:hidden;border:1px solid rgba(21,17,13,.12);border-radius:9px;background:rgba(255,255,255,.88)}
.vinci-class-schema-crown{display:block;padding:6px 8px;border-bottom:1px solid rgba(21,17,13,.09);color:var(--ink-mute);font:650 6.5px/1 var(--mono)}
.vinci-class-members{display:grid;gap:1px;padding:4px}
.vinci-class-member{display:grid;grid-template-columns:15px minmax(0,1fr) auto;align-items:center;gap:5px;padding:5px 6px;border-radius:6px;background:rgba(255,250,241,.72)}
.vinci-class-member i{display:grid;place-items:center;width:13px;height:13px;border:1px solid rgba(122,74,8,.15);border-radius:50%;color:var(--gold-deep);font:750 6px/1 var(--mono)}
.vinci-class-member b{overflow:hidden;font:700 8px/1 var(--mono);text-overflow:ellipsis;white-space:nowrap}
.vinci-class-member small{color:var(--ink-mute);font:650 6px/1 var(--mono)}
.vinci-class-member[data-private="true"]{background:rgba(255,244,223,.9)}
.vinci-class-empty{padding:7px;color:var(--ink-mute);font:650 7px/1 var(--mono);text-align:center}
.vinci-class-members>.vinci-static-definition{width:100%;margin-top:3px;padding:6px;border-radius:8px;box-shadow:none}

/* The class blueprint IS the object-boundary constructor in a blueprint state:
   the live Ball's own gradient at low alpha, a dotted ring, the Ball's own
   collapse/expand gesture. Solid Balls remain the only object identities. */
.vinci-class-blueprint{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.vinci-class-blueprint .vmark-ball-live[data-blueprint="true"]{
  border:2px dotted rgba(122,74,8,.6);
  background:radial-gradient(circle at 35% 25%,rgba(255,229,173,.55),rgba(238,150,20,.28) 60%,rgba(169,87,16,.22));
  box-shadow:inset 0 -2px 5px rgba(122,74,8,.08),0 10px 26px rgba(122,74,8,.1);cursor:pointer}
.vinci-class-blueprint .vmark-ball-live[data-blueprint="true"] .vfield[data-private="true"]{background:rgba(255,244,223,.9)}
.vinci-class-blueprint .vmark-ball-live-label{color:#514b42;font:600 13px/1.4 var(--sans);text-align:center;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.vinci-class-blueprint-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.vinci-symbol-definition .vinci-symbol-identity-pill{max-width:240px}
.vinci-completion-route .vinci-completion-line{display:block;min-width:36px;height:1px;border-top:1px dashed rgba(150,70,70,.45)}
.vinci-completion-route .vinci-completion-destination{position:static;transform:none}
.vinci-memory-byte-rail>.vinci-rail-header{display:flex;justify-content:space-between;gap:6px}
.vinci-memory-byte-rail>.vinci-rail-header .vinci-rail-label{font:700 7px/1 var(--mono)}
.vinci-memory-byte-rail>.vinci-rail-header .vinci-rail-count{color:var(--ink-mute);font:650 6px/1 var(--mono)}
/* A class defines the shape of a possible object; it is not an instance card.
   Draw the same circular Ball vocabulary with an open dotted edge so the eye
   reads "blueprint", while solid Balls remain the only object identities. */
.vinci-static-definition[data-definition-kind="class"]{
  width:min(100%,340px);padding:0;border:0;background:transparent;box-shadow:none}
.vinci-static-definition[data-definition-kind="class"]>.vinci-static-definition-header{display:none}
.vinci-static-definition[data-definition-kind="class"]>.vinci-static-definition-body{width:100%}
.vinci-class-schema.vinci-class-blueprint-ball{
  /* 2026-09-01: modelled after the real Ball, translucent. Same gold radial
     as a live Ball at low alpha, dotted ring, and the Ball's own
     collapse/expand gesture. */
  position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:10px;overflow:visible;cursor:pointer;border:2px dotted rgba(122,74,8,.6);border-radius:50%;
  background:radial-gradient(circle at 35% 25%,rgba(255,229,173,.55),rgba(238,150,20,.28) 60%,rgba(169,87,16,.22));
  box-shadow:inset 0 -2px 5px rgba(122,74,8,.08),0 10px 26px rgba(122,74,8,.1)}
.vinci-class-schema.vinci-class-blueprint-ball[data-state="expanded"]{
  width:min(100%,330px);aspect-ratio:1;padding:48px 42px}
.vinci-class-schema.vinci-class-blueprint-ball[data-state="collapsed"]{
  width:64px;height:64px;margin-bottom:26px;padding:0}
.vinci-class-blueprint-ball .vinci-class-schema-crown{
  padding:0 4px 8px;border:0;border-bottom:1px dotted rgba(122,74,8,.3);
  color:var(--gold-deep);font:750 8px/1.35 var(--mono);text-align:center}
.vinci-class-blueprint-ball[data-state="collapsed"] .vinci-class-schema-crown{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  width:max-content;max-width:190px;padding:0;border:0;font-size:7.5px}
.vinci-class-blueprint-ball[data-state="collapsed"] .vinci-class-members{display:none}
.vinci-class-blueprint-ball .vinci-class-members{max-height:170px;overflow:auto;gap:6px;padding:0 2px}
.vinci-class-blueprint-ball .vinci-class-member{
  /* the member is the same data Pill a live Ball field wears, plus the
     private sign when authored */
  grid-template-columns:15px minmax(0,1fr) auto;align-items:center;min-height:var(--vinci-data-pill-h,38px);
  padding:var(--vinci-data-pill-pad,8px 14px);border:var(--vinci-data-pill-border,2px) solid rgba(122,74,8,.28);
  border-radius:var(--vinci-data-pill-radius,999px);background:var(--vinci-data-pill-bg,rgba(255,255,255,.95));
  font-size:var(--vinci-data-pill-font-size,13px);font-weight:var(--vinci-data-pill-font-weight,500);
  box-shadow:0 6px 16px rgba(122,74,8,.12)}
.vinci-class-blueprint-ball .vinci-class-member[data-private="true"] i{color:#a95710;font-weight:800}
.vinci-accessor-flow,.vinci-advanced-definition-flow{display:flex;align-items:center;justify-content:center;gap:4px;max-width:100%}
.vinci-accessor-return{margin-left:4px}
.vinci-accessor-gate{
  display:grid;place-items:center;min-width:30px;height:28px;padding:0 5px;border:1px solid rgba(238,150,20,.45);
  border-radius:6px;color:var(--gold-deep);background:#fff4dc;font:800 7px/1 var(--mono)
}
.vinci-symbol-definitions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;width:100%}
.vinci-static-definition.vinci-symbol-card{
  display:inline-flex;align-items:center;width:auto;max-width:230px;padding:0;
  border:0;background:transparent;box-shadow:none
}
.vinci-static-definition.vinci-proxy-mask-definition{
  width:min(100%,290px);padding:0;border:0;background:transparent;box-shadow:none
}
.vinci-proxy-mask-definition>.vinci-static-definition-header{display:none}
.vinci-proxy-mask-definition>.vinci-static-definition-body{width:100%}
.vinci-proxy-composition{display:grid;justify-items:center;gap:10px;width:100%;padding:5px 8px 7px}
.vinci-proxy-target-ball{position:relative;display:grid;place-items:center;min-width:132px;min-height:112px}
.studio-visual-program:not([data-motion-phase]) .vinci-proxy-target-ball .vmark-ball-live{
  position:relative;width:88px!important;height:88px!important;padding:0!important;overflow:visible
}
.vinci-proxy-target-ball .vmark-ball-live-label{margin-top:5px;color:var(--ink-soft);font-size:8px}
.vinci-proxy-identity-unknown{
  position:absolute;left:50%;top:22%;translate:-50% -50%;color:#704c17;
  font:850 16px/1 var(--mono);text-shadow:0 1px 0 rgba(255,255,255,.75)
}
.vinci-proxy-trap-mask{
  position:absolute;left:50%;top:54%;z-index:5;display:flex;align-items:center;justify-content:center;gap:4px;
  min-width:116px;max-width:238px;padding:4px 8px;translate:-50% -50%;border:1px solid rgba(21,17,13,.68);border-radius:999px;
  color:#fff;background:rgba(21,17,13,.84);box-shadow:0 5px 13px rgba(21,17,13,.18)
}
.vinci-proxy-trap-mask::before,.vinci-proxy-trap-mask::after{
  content:"";flex:0 0 auto;width:7px;height:5px;border:1px solid rgba(255,221,163,.82);border-radius:50%
}
.vinci-proxy-binding-host{display:inline-flex;align-items:center;min-width:0;max-width:150px}
.vinci-proxy-binding-host>.vinci-binding-pill{
  min-width:0;min-height:0;max-width:100%;padding:0;border:0;color:#fff;background:transparent;box-shadow:none
}
.vinci-proxy-binding-host>.vinci-binding-pill>[data-vinci-value-pill-name]{flex:0 0 auto}
.vinci-proxy-binding-host>.vinci-binding-pill>[data-vinci-value-pill-value]{
  min-width:0;max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.vinci-proxy-binding-host>.vinci-binding-pill:hover,.vinci-proxy-binding-host>.vinci-binding-pill:focus-visible{
  color:#ffdda3;background:transparent;box-shadow:none;outline:1px dotted #ffdda3;outline-offset:2px
}
.vinci-proxy-binding-host .vinci-binding-inspector{top:calc(100% + 10px);color:var(--ink-soft);background:#fff}
.vinci-proxy-trap-mask>small{color:#ffdda3;font:750 7px/1 var(--mono);white-space:nowrap}
.vinci-proxy-route{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;min-width:0;width:100%;max-width:264px;padding:7px 9px;
  border:1px dashed rgba(122,74,8,.32);border-radius:999px;background:rgba(255,253,248,.86);color:var(--ink)
}
.vinci-proxy-route>[data-route-node]{font:750 8px/1 var(--mono);white-space:nowrap}
.vinci-proxy-route>[data-route-node="trap"]{padding:3px 6px;border:1px solid rgba(21,17,13,.34);border-radius:999px;background:#fff}
.vinci-proxy-route>[data-route-node="target"]{color:var(--gold-deep)}
.vinci-proxy-route>i{color:rgba(122,74,8,.55);font:800 10px/1 var(--mono);font-style:normal}
.vinci-proxy-route-state{flex-basis:100%;text-align:center;color:var(--ink-mute);font:650 6.5px/1.2 var(--mono)}
.vinci-symbol-card>.vinci-static-definition-header{display:inline-flex;align-items:center;gap:3px}
.vinci-symbol-card .vinci-static-definition-glyph,
.vinci-symbol-card .vinci-static-definition-title,
.vinci-symbol-card .vinci-static-definition-state{display:none}
.vinci-symbol-card .vinci-static-definition-binding{
  order:initial;min-width:0;min-height:24px;margin:0;padding:0;border:0;background:transparent;box-shadow:none
}
.vinci-symbol-card>.vinci-static-definition-body{display:none}
.vinci-symbol-definition{display:flex;align-items:center;justify-content:center;gap:7px;padding:0}
.vinci-symbol-ring{display:grid;place-items:center;width:25px;height:25px;border:2px double rgba(238,150,20,.75);border-radius:50%;color:var(--gold-deep);background:#fff8e9;font:800 11px/1 var(--mono);box-shadow:none}
.vinci-symbol-identity{display:grid;gap:2px;min-width:0}
.vinci-symbol-identity small{color:var(--ink-mute);font:650 6px/1 var(--mono)}
.vinci-symbol-identity b{overflow:hidden;max-width:118px;font:750 8px/1.2 var(--mono);text-overflow:ellipsis;white-space:nowrap}
.vinci-symbol-reference-tether{
  display:inline-block;width:8px;height:1px;border:0;border-top:1.5px dashed rgba(122,74,8,.46)
}
.vinci-symbol-reference-tether::after{
  left:auto;right:-1px;bottom:-2px;width:4px;height:4px;border-right:1.5px solid rgba(122,74,8,.55);
  border-bottom:1.5px solid rgba(122,74,8,.55);transform:rotate(-45deg)
}

/* Keyed collections use the Rail vocabulary with KEY/VALUE ports. They are
   not generic definition/operation cards and their members are real Pills.
   The outer outline is a Place for relationships; each authored set/get row
   carries its own source node, while runtime contents remain explicitly
   unknown. Weak collections share the shape but never gain a count. */
.vinci-static-definition[data-collection-grammar]{width:min(100%,350px);padding:0;border:0;background:transparent;box-shadow:none}
.vinci-static-definition[data-collection-grammar]>.vinci-static-definition-header{display:none}
.vinci-static-definition[data-collection-grammar]>.vinci-static-definition-body{width:100%}
.vinci-collection-place{
  display:grid;gap:7px;width:100%;box-sizing:border-box;padding:8px;
  border:1px solid rgba(238,150,20,.34);border-radius:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,248,235,.9));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)
}
.vinci-static-definition[data-collection-grammar="weak"] .vinci-collection-place{
  border-style:dashed;background:repeating-linear-gradient(135deg,rgba(122,74,8,.035) 0 7px,transparent 7px 14px),rgba(255,253,249,.96)
}
.vinci-collection-header{display:flex;align-items:center;gap:8px;padding:1px 2px 5px;border-bottom:1px solid rgba(122,74,8,.13)}
.vinci-collection-header>.vinci-static-definition-binding{order:initial;min-width:0;margin:0}
.vinci-collection-header b{color:var(--gold-deep);font:800 9px/1 var(--mono)}
.vinci-collection-honesty{margin-left:auto;color:var(--ink-mute);font:650 6.5px/1 var(--mono);white-space:nowrap}
.vinci-collection-entries{display:grid;gap:5px;min-width:0}
.vinci-collection-identity-routes{
  display:grid;grid-template-columns:minmax(84px,.56fr) minmax(0,1fr);align-items:center;gap:7px;
  min-width:0;padding:6px;border:1px dashed rgba(238,150,20,.25);border-radius:11px;
  background:rgba(255,253,248,.72)
}
.vinci-collection-identity-carrier{display:grid;place-items:center;min-width:0}
.vinci-collection-identity-carrier>.vinci-ball-seat,
.vinci-collection-input-seat>.vinci-ball-seat{width:auto;min-width:72px;min-height:56px}
.vinci-collection-identity-route-list{display:grid;gap:5px;min-width:0}
.vinci-collection-identity-route-list>.vinci-collection-operation{padding:5px 6px}
.vinci-program-operation.vinci-collection-operation,
.vinci-collection-initializer-entry{
  display:grid!important;gap:4px;width:100%;box-sizing:border-box;padding:6px 7px;
  border:0;border-radius:9px;color:var(--ink-soft);background:rgba(255,255,255,.74);
  box-shadow:inset 0 0 0 1px rgba(122,74,8,.1);opacity:1!important
}
.vinci-collection-carrier-row{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.vinci-collection-carrier{flex:0 1 auto;min-width:0;max-width:125px}
.vinci-collection-carrier .k,.vinci-collection-carrier .v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vinci-collection-port{
  position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;padding:4px 6px 4px 15px;
  border:1px solid rgba(238,150,20,.28);border-radius:999px;color:var(--gold-deep);
  background:#fff8ea;font:750 6.5px/1 var(--mono);letter-spacing:.03em
}
.vinci-collection-port>[data-vinci-port-appearance="collection-operation"]{
  position:absolute;left:5px;top:50%;width:7px;height:7px;box-sizing:border-box;
  transform:translateY(-50%);border:2px solid #fff;border-radius:50%;background:var(--gold,#ee9614);
  box-shadow:0 0 0 1px rgba(122,74,8,.35)
}
.vinci-collection-operation-state{color:var(--ink-mute);font:620 6px/1 var(--mono);text-align:center}
.vinci-collection-truth{margin:0;padding:6px 2px 0;border-top:1px dashed rgba(122,74,8,.17);color:var(--ink-mute);font:600 6.5px/1.35 var(--mono);text-align:center}
.vinci-collection-empty{padding:8px;color:var(--ink-mute);font:620 7px/1.3 var(--mono);text-align:center}

/* Object.keys/values/entries is value-producing: an input reference crosses
   an opaque built-in port and a DISTINCT Rail is born. Keep that result
   separate from the keyed-collection identity above and do not invent its
   members or length before execution. */
.vinci-authored-operation.vinci-collection-inspection{width:min(100%,350px);padding:0;border:0;background:transparent;box-shadow:none}
.vinci-collection-inspection>.vinci-authored-operation-header{display:none}
.vinci-collection-inspection-flow{display:grid;grid-template-columns:auto auto minmax(105px,1fr);align-items:center;gap:7px;min-width:0}
.vinci-collection-input-seat{display:grid;place-items:center;min-width:0}
.vinci-collection-result-rail{
  display:grid;gap:5px;min-width:0;padding:6px;border:1px solid rgba(238,150,20,.38);
  border-radius:11px;background:linear-gradient(180deg,#fff,rgba(255,248,235,.92));box-shadow:0 5px 13px rgba(122,74,8,.06)
}
.vinci-collection-result-rail>header{display:flex;align-items:center;gap:5px;min-width:0}
.vinci-collection-result-rail>header>b{color:var(--ink-soft);font:750 7.5px/1 var(--mono);white-space:nowrap}
.vinci-collection-result-rail>header>small{margin-left:auto;color:var(--gold-deep);font:800 7px/1 var(--mono)}
.vinci-collection-result-binding-host{display:flex;min-width:0}
.vinci-collection-result-binding-host .vinci-operation-result-binding{margin:0;padding:0;border:0}
.vinci-collection-result-binding-host .vinci-operation-result-arrow{display:none}
.vinci-collection-result-binding-host .vinci-result-binding-pill{min-width:0}
.vinci-collection-unknown-members{padding:5px;border-radius:7px;color:var(--ink-mute);background:rgba(122,74,8,.045);font:620 6px/1.25 var(--mono);text-align:center}

/* Typed arrays and buffer views reuse the Rail/Pill vocabulary while keeping
   their memory boundary explicit. A literal is an authored input Pill, not an
   observed byte. A spec conversion is conditional, not a witnessed write.
   ArrayBuffer owns the only byte-storage outline; view definitions nest below
   same-storage ports instead of repeating construction cards. */
.vinci-static-definition[data-memory-grammar]{width:min(100%,350px);padding:0;border:0;background:transparent;box-shadow:none}
.vinci-static-definition[data-memory-grammar]>.vinci-static-definition-header{display:none}
.vinci-static-definition[data-memory-grammar]>.vinci-static-definition-body{width:100%;min-width:0}
.vinci-memory-typed-rail,
.vinci-buffer-place,
.vinci-memory-data-view{
  display:grid;gap:7px;width:100%;min-width:0;box-sizing:border-box;padding:8px;
  border:1px solid rgba(238,150,20,.34);border-radius:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,248,235,.9));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)
}
.vinci-memory-definition-header{display:flex;align-items:center;gap:7px;min-width:0;padding:1px 2px 5px;border-bottom:1px solid rgba(122,74,8,.13)}
.vinci-memory-definition-header>.vinci-static-definition-binding{order:initial;min-width:0;margin:0}
.vinci-memory-definition-header>b{color:var(--gold-deep);font:800 9px/1 var(--mono);white-space:nowrap}
.vinci-memory-definition-header>small{margin-left:auto;color:var(--ink-mute);font:650 6.5px/1.2 var(--mono);text-align:right}
.vinci-memory-rail-track{
  display:flex;align-items:flex-start;justify-content:center;gap:7px;max-width:100%;padding:5px;
  border-radius:10px;background:linear-gradient(180deg,rgba(122,74,8,.075),rgba(238,150,20,.035));overflow-x:auto
}
.vinci-memory-member-seat{flex:0 0 auto;min-width:0}
.vinci-memory-member-seat .vinci-memory-member-pill[data-unknown="true"]{border-style:dashed;background:var(--vinci-pill-unknown-bg)}
.vinci-memory-truth{display:block;color:var(--ink-mute);font:600 6.5px/1.35 var(--mono);text-align:center}
.vinci-memory-view-range{display:block;padding:7px;border-radius:8px;color:var(--ink-mute);background:rgba(122,74,8,.045);font:620 6.5px/1.35 var(--mono);text-align:center}
.vinci-typed-write-host{display:grid;gap:5px;padding-top:6px;border-top:1px dashed rgba(122,74,8,.18)}
.vinci-typed-write-host[hidden]{display:none}
.vinci-authored-operation.vinci-typed-write-operation{
  width:100%;gap:4px;padding:6px 7px;border:0;border-radius:9px;background:rgba(255,255,255,.74);
  box-shadow:inset 0 0 0 1px rgba(122,74,8,.1)
}
.vinci-typed-write-target,.vinci-typed-write-truth{color:var(--ink-mute);font:620 6px/1.3 var(--mono);text-align:center}
.vinci-memory-flow-arrow{flex:0 0 auto;color:var(--ink-mute);font:750 9px/1 var(--mono)}
.vinci-spec-conversion-pill[data-spec-static="conditional"]{border-style:dashed;background:rgba(255,248,235,.92)}
.vinci-memory-byte-rail{display:grid;gap:6px;padding:6px;border-radius:10px;background:linear-gradient(180deg,rgba(122,74,8,.075),rgba(238,150,20,.035))}
.vinci-memory-byte-rail>header{display:flex;align-items:center;gap:7px;padding:0 2px}
.vinci-memory-byte-rail>header>b{color:var(--ink-soft);font:750 7.5px/1 var(--mono)}
.vinci-memory-byte-rail>header>small{margin-left:auto;color:var(--ink-mute);font:620 6px/1 var(--mono)}
.vinci-memory-byte-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;min-width:0}
.vinci-memory-byte-track>.vinci-memory-member-seat{justify-self:center}
.vinci-memory-views{display:grid;gap:6px;padding-top:2px}
.vinci-memory-views[hidden]{display:none}
.vinci-memory-view-tether-row{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:6px;min-width:0}
.vinci-memory-view-tether{
  width:auto;height:auto;position:relative;display:grid;place-items:center;min-height:24px;padding:3px 5px 3px 11px;
  border:1px dashed rgba(238,150,20,.34);border-radius:999px;color:var(--gold-deep);
  background:#fff8ea;font:600 9px/1.2 var(--mono);text-align:center
}
.vinci-memory-view-tether::after{display:none}
.vinci-memory-view-tether>[data-vinci-port-appearance="storage-reference"]{
  position:absolute;left:4px;top:50%;width:5px;height:5px;box-sizing:border-box;
  transform:translateY(-50%);border-radius:50%;background:var(--gold,#ee9614)
}
.vinci-memory-view-card{width:100%!important;min-width:0}
.vinci-memory-view-card .vinci-memory-typed-rail,
.vinci-memory-view-card .vinci-memory-data-view{
  gap:4px;padding:2px 0;border:0;border-radius:0;background:transparent;box-shadow:none
}
.vinci-memory-view-card .vinci-memory-definition-header{padding-bottom:4px}
.vinci-memory-view-card .vinci-memory-rail-track{padding:0;background:transparent;overflow:visible}
.vinci-memory-view-card .vinci-memory-view-range{padding:1px 2px;background:transparent;text-align:left}
.vinci-memory-view-card .vinci-memory-truth{font-size:6px}

/* Keep the original storage/view seats readable when their Place narrows.
   Byte Pills retain their full values and order; they wrap instead of
   overflowing a four-column track or widening the shared-storage view. */
.vinci-static-definition[data-memory-grammar],
.vinci-memory-byte-rail,.vinci-memory-views,.vinci-memory-view-card{
  min-width:0;max-width:100%;box-sizing:border-box
}
.vinci-buffer-place,.vinci-memory-data-view,.vinci-memory-typed-rail,
.vinci-memory-byte-rail,.vinci-memory-views{grid-template-columns:minmax(0,1fr)}
.vinci-memory-byte-rail{width:100%}
.vinci-memory-byte-track{display:flex;flex-wrap:wrap;justify-content:center}
.vinci-memory-definition-header{flex-wrap:wrap;width:100%;box-sizing:border-box}
.vinci-memory-definition-header>.vinci-static-definition-binding{
  flex:1 1 100%;max-width:100%;box-sizing:border-box
}
.vinci-memory-view-range{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}

/* Canonical authored operations. Every card is a small visual mechanism;
   runtime-dependent results stay dashed and visibly Unknown. */
.vinci-program-top-operations{position:relative;z-index:12;display:grid;place-items:center;gap:10px;width:100%;margin-top:12px}
.vinci-program-top-operations[hidden],.vinci-function-authored-operations[hidden]{display:none}
.vinci-program-input-boundary{
  position:relative;z-index:8;display:grid;place-items:center;gap:0;width:max-content;
  margin:0;padding:0;border:0;background:transparent;color:var(--gold-deep,#7a4a08);
  box-shadow:none
}
.vinci-program-input-marker{
  display:inline-flex;align-items:center;min-height:18px;padding:2px 8px;box-sizing:border-box;
  border:1px solid rgba(122,74,8,.24);border-radius:999px;background:#fffdf8;
  font:750 6.5px/1 var(--mono);letter-spacing:.13em
}
.vinci-program-input-tether{display:block;width:1px;height:10px;border-left:1px solid rgba(238,150,20,.6)}
.vinci-function-authored-operations{position:relative;z-index:12;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;gap:6px;width:100%;max-width:260px;min-width:0}
.vinci-program-function-body:has(>.vinci-function-authored-operations:not([hidden])){min-height:170px;overflow:visible;padding:14px 8px 24px}
.vinci-program-function:has(.vinci-function-authored-operations:not([hidden])){min-height:240px}
.vinci-authored-operation{
  position:relative;z-index:5;display:grid!important;gap:7px;width:min(100%,286px);box-sizing:border-box;padding:7px 8px;
  border:1px solid rgba(82,73,60,.16);border-radius:14px;color:var(--ink)!important;
  background:#fff;box-shadow:0 3px 10px rgba(42,36,28,.035);opacity:1!important
}
.vinci-authored-operation[data-visual-state="unknown"]{border-style:dashed;background:#fff}
.vinci-authored-operation-header{display:flex;align-items:center;gap:8px;min-width:0}
.vinci-authored-operation-header b{overflow:hidden;font:600 11px/1.35 var(--sans);text-overflow:ellipsis;white-space:nowrap}
.vinci-authored-operation-header small{margin-left:auto;color:var(--ink-mute);font:400 8px/1.35 var(--sans);white-space:nowrap}
.vinci-authored-operation[data-visual-state="unknown"] .vinci-authored-operation-header small{color:#8b6844}
.vinci-database-host{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;min-width:0;width:100%;padding-top:1px}
.vinci-database-ingress{position:relative;z-index:8;display:grid;justify-items:center;gap:0;margin-bottom:10px}
.vinci-database-argument-carrier{max-width:170px}
.vinci-database-argument-carrier[data-unknown="true"]{border-style:dashed;background:var(--vinci-pill-unknown-bg,#faf9f6)}
.vinci-database-argument-carrier .k,.vinci-database-argument-carrier .v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vinci-database-pending-route{position:relative;display:block;width:1px;height:20px;border-left:1px dashed rgba(152,95,11,.55)}
.vinci-database-pending-route::after{
  content:"";position:absolute;left:0;bottom:0;width:5px;height:5px;
  border-right:1px solid rgba(152,95,11,.7);border-bottom:1px solid rgba(152,95,11,.7);transform:translate(-3px,-1px) rotate(45deg)
}
.vinci-database-pending-route small{
  position:absolute;left:7px;top:50%;width:max-content;transform:translateY(-50%);
  color:var(--ink-mute);font:650 6px/1 var(--mono);white-space:nowrap
}
.vinci-database-host>.vhost-database{margin-top:0}
.vinci-authored-operation.vinci-host-boundary-operation,
.vinci-authored-operation.vinci-host-boundary-operation[data-visual-state="unknown"]{
  width:min(100%,290px);padding:0;border:0;background:transparent;box-shadow:none
}
.vinci-host-boundary-route{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;width:100%}
.vinci-host-boundary-row{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;width:100%}
.vinci-host-boundary-state{color:var(--ink-mute);font:650 7px/1.2 var(--mono);letter-spacing:.025em;text-align:center}
.vinci-host-request-carrier{flex:0 0 66px;min-width:0;max-width:66px;padding:5px 7px;flex-direction:column;gap:1px}
.vinci-host-request-carrier .k,.vinci-host-request-carrier .v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vinci-host-request-carrier .k,.vinci-host-request-carrier .v{width:100%;max-width:100%;text-align:center}
.vinci-host-request-carrier .k{font-size:6px}
.vinci-host-request-carrier .v{font-size:8px}
.vinci-host-boundary-row>.vhost-api-node{flex:0 1 112px;min-width:104px;padding-inline:10px}
.vinci-host-boundary-row>.vhost-api-node .vhost-api-kicker{font-size:6.5px}
.vinci-host-boundary-row>.vhost-api-node .vhost-api-endpoint{font-size:8px}
.vinci-host-boundary-link{position:relative;flex:0 0 11px;height:1px;border-top:1px dashed rgba(62,104,112,.52)}
.vinci-host-boundary-link::after{
  content:"";position:absolute;right:0;top:-3px;width:4px;height:4px;border-right:1px solid rgba(62,104,112,.64);
  border-top:1px solid rgba(62,104,112,.64);transform:rotate(45deg)
}
.vinci-host-response-carrier{flex:0 0 auto;min-width:52px;padding:5px 7px}
.vinci-host-response-carrier .k{font-size:6px}.vinci-host-response-carrier .v{font-size:8px}
.vinci-operation-result-binding{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:-2px;padding-top:4px;border-top:1px dashed rgba(122,74,8,.14)}
.vinci-program-operation.vinci-expression-binding-operation{
  width:min(100%,420px);max-width:420px;padding:0;border:0;border-radius:0;
  background:transparent;box-shadow:none
}
.vinci-program-operation.vinci-formula-binding-operation{
  width:auto;max-width:100%;padding:0;border:0;border-radius:0;
  background:transparent;box-shadow:none
}
.vinci-formula-binding{
  display:grid;place-items:center;gap:4px;margin:0;padding:0;border:0;background:transparent
}
/* A formula Binding opens the SAME full inline editor as a Ball field. It is
   a sibling of the field-shaped Binding pill, just as the Ball editor sits
   directly beneath the field it edits — never another framed "compute card". */
.vinci-formula-binding>.vmark-ball-live-field-editor{
  width:min(250px,100%);box-sizing:border-box
}
.vinci-binding-pill.vinci-formula-binding-pill[data-formula-binding-editor="true"]{
  cursor:pointer
}
.vinci-formula-binding .vmark-ball-live-field-editor input[readonly]{
  color:var(--ink);background:#fffdf9;cursor:default
}
.vinci-formula-binding .vmark-ball-live-field-editor-actions>button:disabled{
  opacity:.52;cursor:not-allowed;transform:none
}
.vinci-function-local-definitions>.vinci-binding-pill.vinci-primitive-binding-pill,
.vinci-binding-pill.vinci-formula-binding-pill{
  min-width:96px;justify-content:center
}
.vinci-binding-derivation{
  display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;
  color:var(--ink-mute);font:650 7px/1.35 var(--mono);white-space:nowrap
}
.vinci-binding-derivation-label,.vinci-binding-derivation-truth{
  color:var(--ink-mute);font:650 6px/1.2 var(--mono);letter-spacing:.055em;text-transform:uppercase
}
.vinci-binding-derivation-expression{
  display:inline-flex;align-items:center;gap:3px;color:var(--ink);font:700 8px/1.35 var(--mono)
}
.vinci-binding-derivation-truth{color:#985f0b}
.vinci-binding-derivation .vinci-expression-part{padding:0;line-height:1.35}
.vinci-binding-derivation .vinci-expression-glyph{padding:0;line-height:1.35}
.vinci-binding-derived-result{min-height:20px;padding:3px 7px;font:700 8px/1 var(--mono)}
.semantic-visual-program .vinci-program-operation.vinci-expression-binding-operation{
  /* The Atlas explains the expression; it does not need Studio's wider edit
     surface. Preserve the compact 286px shared device promised by the value
     grammar while leaving the authoring editor room to work in Studio. */
  width:min(100%,286px);max-width:286px
}
.vinci-expression-definition-binding{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;
  width:100%;box-sizing:border-box;margin:0;padding:7px 9px;border:1px solid rgba(122,74,8,.24);
  border-radius:11px;background:rgba(255,253,249,.96);box-shadow:0 5px 14px rgba(76,46,8,.07)
}
.vinci-expression-binding-identity{
  display:grid;align-content:center;gap:2px;min-width:72px;padding-right:8px;
  border-right:1px dashed rgba(122,74,8,.22)
}
.vinci-expression-binding-name{
  overflow:hidden;color:var(--gold-deep);font:700 12px/1.15 var(--mono);
  text-overflow:ellipsis;white-space:nowrap
}
.vinci-expression-binding-role{
  color:var(--ink-mute);font:650 6px/1.2 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap
}
.vinci-expression-edit{
  justify-self:start;margin-top:2px;padding:3px 6px;border:1px solid rgba(122,74,8,.28);
  border-radius:999px;color:var(--gold-deep);background:#fff;cursor:pointer;
  font:700 6px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase
}
.vinci-expression-edit:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.vinci-expression-definition-binding>.vinci-expression-row{
  justify-content:flex-start;min-width:0;padding:0
}
/* A long operator family needs the complete expression card, not only the
   narrow second grid column beside the Binding label. While that family is
   disclosed, give the label and expression their own rows. The options then
   remain in normal flow at their authored 246px width: the result stays above
   them, the next operation is pushed down, and no popup covers either one. */
.vinci-expression-definition-binding:has(
  .vinci-operator-options[data-choice-layout="grouped"]:not([hidden])
){grid-template-columns:1fr;gap:6px}
.vinci-expression-definition-binding:has(
  .vinci-operator-options[data-choice-layout="grouped"]:not([hidden])
)>.vinci-expression-binding-identity{
  padding:0 0 5px;border-right:0;border-bottom:1px dashed rgba(122,74,8,.22)
}
.vinci-expression-definition-binding[data-result-certainty="source-computed"]{
  border-color:rgba(152,95,11,.34);background:rgba(251,250,248,.97)
}
.vinci-value-expression-editor{
  grid-column:1/-1;display:grid;gap:7px;min-width:0;margin-top:2px;padding:9px;
  border-top:1px dashed rgba(122,74,8,.24);background:#fffdf9
}
.vinci-value-expression-heading{
  color:var(--gold-deep);font:750 7px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase
}
.vinci-value-expression-source{
  width:100%;min-width:0;box-sizing:border-box;padding:7px 9px;border:1px solid rgba(21,17,13,.18);
  border-radius:8px;color:var(--ink);background:#fff;font:650 9px/1.3 var(--mono)
}
.vinci-value-expression-source:focus{outline:2px solid rgba(238,150,20,.45);outline-offset:1px}
.vinci-value-expression-actions{display:flex;justify-content:flex-end;gap:6px}
.vinci-value-expression-actions button{
  padding:5px 8px;border:1px solid rgba(122,74,8,.25);border-radius:999px;
  color:var(--gold-deep);background:#fff;cursor:pointer;font:700 6px/1 var(--mono)
}
.vinci-value-expression-actions button[type="submit"]{color:#fff;background:var(--gold-deep)}
.vinci-operation-result-arrow{color:rgba(122,74,8,.52);font:800 10px/1 var(--mono)}
.vinci-operation-result-binding[data-output-only="true"]{cursor:default}
.vinci-operation-result-role{
  color:var(--ink-mute);font:750 6px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase
}
.vinci-binding-pill.vinci-output-binding-static{
  pointer-events:none;cursor:default;border-style:dashed;background:var(--vinci-pill-unknown-bg,#faf9f6);
  box-shadow:none;opacity:1
}
.vinci-binding-pill.vinci-output-binding-static:hover,
.vinci-binding-pill.vinci-output-binding-static:focus-visible{
  border-color:var(--vinci-pill-edge);outline:none;box-shadow:none
}
/* A result binding holds a value that is not known until the program runs, so
   it is the ONE pill drawn dashed — see the unknown state in "C1 · ONE PILL". */
.vinci-result-binding-copy{cursor:default}
.vinci-authored-flow{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;max-width:100%}
/* Compact source/unknown values use the shared Pill's body and typography.
   The flow owns placement only; expected result kinds never redraw its leaf. */
.vinci-mini-mark{
  display:flex;align-items:center;gap:5px;min-width:0;max-width:220px;padding:4px 6px;border:1px solid rgba(71,91,118,.2);
  border-radius:999px;color:#33465f;background:rgba(248,251,255,.97);box-sizing:border-box;
  font:650 9px/1 var(--mono)
}
.vinci-mini-mark.vinci-value-pill[data-unknown="true"]{
  border-style:dashed;color:var(--ink-soft);background:var(--vinci-pill-unknown-bg,#faf9f6)
}
.vinci-mini-flow-arrow{position:relative;flex:0 0 auto;color:rgba(122,74,8,.56);font:800 11px/1 var(--mono)}
.vinci-mini-flow-arrow[data-label]::after{content:attr(data-label);position:absolute;left:50%;top:100%;transform:translateX(-50%);color:var(--ink-mute);font:550 4.5px/1 var(--mono);white-space:nowrap}
.vinci-function-device{
  flex:0 0 auto;display:grid;place-items:center;min-width:27px;height:27px;padding:0 4px;border:1px solid rgba(238,150,20,.52);
  border-radius:50%;color:var(--gold-deep);background:#fff3d8;font:850 8px/1 var(--mono);box-shadow:0 0 0 3px rgba(238,150,20,.07)
}
.vinci-operator-lens{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  min-width:32px;height:32px;padding:0 8px;border:1px solid var(--vinci-data-pill-edge,rgba(203,162,91,.38));
  border-radius:999px;color:var(--gold-deep,#7a4a08);background:#fffdf9;font:500 12px/1 var(--mono);
  box-shadow:0 2px 4px rgba(44,35,20,.03),0 5px 12px rgba(44,35,20,.04);
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease
}
.vinci-discard-well{display:grid;place-items:center;padding:5px 7px;border-bottom:2px solid rgba(21,17,13,.25);color:var(--ink-mute);font:650 6px/1 var(--mono)}
.vinci-conversion-funnel{display:grid;place-items:center;min-width:42px;min-height:28px;padding:3px 7px;clip-path:polygon(0 0,100% 0,76% 100%,24% 100%);color:var(--gold-deep);background:#ffedc7}
.vinci-conversion-funnel b{max-width:62px;overflow:hidden;font:750 6px/1.15 var(--mono);text-align:center;text-overflow:ellipsis;white-space:nowrap}
.vinci-destructure-prism,.vinci-copy-prism{display:grid;place-items:center;width:29px;height:29px;border:1px solid rgba(238,150,20,.45);transform:rotate(45deg);border-radius:5px;color:var(--gold-deep);background:#fff5df;font:800 11px/1 var(--mono)}
.vinci-destructure-prism::first-line,.vinci-copy-prism::first-line{transform:rotate(-45deg)}
.vinci-destructure-outputs{display:grid;gap:3px;max-width:105px}
.vinci-destructure-outputs .vinci-mini-mark{max-width:105px}
.vinci-guarded-route{display:flex;align-items:center;justify-content:center;gap:3px;max-width:100%}
.vinci-optional-guard{display:grid;place-items:center;gap:5px;min-width:70px;padding:8px 12px;border:1px dashed rgba(238,150,20,.54);border-radius:7px;background:#fff9ed}
.vinci-optional-guard small{color:var(--ink-mute);font:500 10px/1.3 var(--mono)}
.vinci-optional-guard b{font:600 12px/1.3 var(--mono)}
/* A control diagram is a flex ROW that could neither shrink nor wrap, so on a
   branch it rendered 327px inside a 309px card and hung 9px off BOTH edges —
   measured on the page, and the largest single source of "escaping" content in
   the atlas (branch 10, completion 11). Grid/flex children also default to
   min-width:auto, which is what stopped it shrinking. */
.vinci-control-diagram{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;min-width:0;max-width:100%}
.vinci-program-operation>*{min-width:0;max-width:100%}
.vinci-control-diagram>*{max-width:100%}
.vinci-control-gate{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;transform:rotate(45deg);border:1px solid rgba(238,150,20,.54);border-radius:5px;color:var(--gold-deep);background:#fff4dc;font:850 11px/1 var(--mono)}
/* The generic IF / Loop test is the shared condition gate: the kind chip and
   the one ValuePill sit inside the gate, so it is a rounded seat rather than
   the rotated glyph diamond. Step-fork and counted-loop layouts keep their
   own gate rules. */
.vinci-control-gate.vinci-function-condition-gate[data-function-condition-form="generic"]{
  display:inline-flex;align-items:center;gap:5px;width:auto;height:auto;min-height:30px;max-width:100%;
  padding:3px 7px 3px 6px;transform:none;border-radius:14px
}
.vinci-control-gate[data-function-condition-form="generic"]>.vinci-function-condition-kind{
  flex:0 0 auto;color:var(--gold-deep);font:850 8px/1 var(--mono);letter-spacing:.08em
}
.vinci-control-gate[data-function-condition-form="generic"]>.vinci-function-condition-evaluation-pill{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:0;max-width:220px;
  min-height:28px;padding:4px 10px;font:600 9px/1.3 var(--mono)
}
/* The authored expression is the pill's name; it must stay readable in full
   and wrap when the seat is narrow, never be clipped to its first word. */
.vinci-control-gate[data-function-condition-form="generic"]>.vinci-function-condition-evaluation-pill>.vinci-value-pill-name{
  display:inline;flex:1 1 auto;width:auto;min-width:0;max-width:none;overflow:visible;text-overflow:clip;
  white-space:normal;overflow-wrap:anywhere;text-align:left
}
.vinci-control-gate[data-function-condition-form="generic"] .vinci-function-condition-operand,
.vinci-control-gate[data-function-condition-form="generic"] .vinci-function-condition-operator{
  display:inline;min-width:0;white-space:normal;overflow-wrap:anywhere
}
.vinci-control-gate[data-function-condition-form="generic"]>.vinci-function-condition-evaluation-pill>.vinci-value-pill-value{flex:0 0 auto}
.vinci-control-gate[data-function-condition-form="generic"]>.vinci-function-condition-source[hidden]{display:none}
.vinci-loop-gate{border-radius:50%;transform:none}
.vinci-switch-gate{border-radius:8px;transform:none}
.vinci-control-lanes{display:grid;gap:7px;min-width:78px}
.vinci-control-lane{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:7px;color:var(--ink-soft)}
.vinci-control-lane i{display:block;border-top:1.25px dashed rgba(142,111,71,.46)}
.vinci-control-lane b{overflow:hidden;font:560 8px/1.2 var(--sans,system-ui);letter-spacing:.025em;text-overflow:ellipsis;white-space:nowrap}
.vinci-control-lane:is([data-state="active"],[data-state="taken"],[data-state="observed"],[data-state="selected"]) i{border-top-style:solid;border-color:#c97d0e}
.vinci-control-lane:is([data-state="active"],[data-state="taken"],[data-state="observed"],[data-state="selected"]) b{color:#985f0b}
/* Binary IF anatomy: entry above the test, two outlets on its lower edge.
   This is also the Foundation assembly. Canonical animated step-forks keep
   their measured Step geometry, but reuse these exact gate/lane/socket nodes. */
.vinci-decision-assembly:is([data-decision-form="generic"],[data-decision-form="standalone"]){
  position:relative;display:grid;place-items:center;box-sizing:border-box;
  grid-template-columns:minmax(0,1fr);
  width:300px;max-width:100%;min-width:0;min-height:102px;margin:10px auto 12px;
  padding:22px 16px 34px;border:1px solid rgba(67,58,44,.12);border-radius:18px;
  background:#fff;box-shadow:0 3px 12px rgba(45,35,20,.035)
}
.vinci-decision-assembly:is([data-decision-form="generic"],[data-decision-form="standalone"])>.vinci-decision-entry{
  position:absolute;top:-5px;left:50%;transform:translateX(-50%);z-index:2
}
.vinci-decision-assembly:is([data-decision-form="generic"],[data-decision-form="standalone"])>.vinci-control-gate{
  position:relative;display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;height:auto;min-width:0;max-width:100%;padding:0;transform:none;
  border:0;border-radius:0;background:transparent;box-shadow:none
}
.vinci-decision-assembly:is([data-decision-form="generic"],[data-decision-form="standalone"])>.vinci-control-gate>.vinci-function-condition-kind{display:none}
.vinci-decision-assembly:is([data-decision-form="generic"],[data-decision-form="standalone"])>.vinci-control-gate>.vinci-function-condition-evaluation-pill{
  width:auto;max-width:100%;min-height:34px;padding:7px 11px;
  font:500 12px/1.4 var(--sans,system-ui)
}
.vinci-decision-assembly:is([data-decision-form="generic"],[data-decision-form="standalone"]) .vinci-function-condition-operator{margin-inline:.3em}
.vinci-decision-assembly:is([data-decision-form="generic"],[data-decision-form="standalone"])>.vinci-control-lanes{
  position:absolute;bottom:-5px;left:0;right:0;display:flex;justify-content:space-around;
  align-items:flex-end;gap:16px;width:100%;min-width:0;padding:0 12px;box-sizing:border-box
}
.vinci-decision-assembly:is([data-decision-form="generic"],[data-decision-form="standalone"])>.vinci-control-lanes>.vinci-control-lane{
  display:flex;flex-direction:column-reverse;align-items:center;gap:9px;min-width:0;max-width:45%
}
.vinci-decision-assembly:is([data-decision-form="generic"],[data-decision-form="standalone"]) .vinci-control-lane-label{
  display:block;max-width:100%;font:500 9px/1.25 var(--sans,system-ui);
  letter-spacing:.02em;color:#787a76;white-space:normal;text-align:center;overflow-wrap:anywhere
}
.vinci-decision-assembly .vinci-control-lane:is([data-state="active"],[data-state="taken"],[data-state="observed"],[data-state="selected"])>.vinci-control-lane-label{color:#985f0b}
.vinci-conditional-room[data-vinci-assembly="conditional-room"]{
  position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  align-content:start!important;justify-items:center!important;gap:0!important;width:min(100%,280px)!important;
  min-width:0!important;min-height:124px!important;margin:8px auto 0!important;padding:67px 10px 9px!important;
  box-sizing:border-box!important;border:1px dashed rgba(122,74,8,.26)!important;border-radius:14px!important;
  background:rgba(255,252,245,.9)!important;box-shadow:none!important;overflow:visible!important
}
.vinci-conditional-room[data-vinci-assembly="conditional-room"]>[data-conditional-room-condition]{
  position:absolute!important;left:50%!important;top:20px!important;z-index:3!important;display:block!important;
  width:calc(100% - 48px)!important;min-width:0!important;margin:0!important;padding:0!important;
  transform:translateX(-50%)!important;background:transparent!important;border:0!important;outline:0!important;border-radius:0!important;box-shadow:none!important
}
.vinci-conditional-room[data-vinci-assembly="conditional-room"][data-conditional-room]
  >[data-conditional-room-condition][data-conditional-room-truth-owner]{outline:0!important}
.vinci-conditional-room[data-vinci-assembly="conditional-room"]>[data-conditional-room-condition]
  >:is(.vinci-authored-operation-header,.vinci-function-playback-step-kind,.vinci-function-playback-source-code){display:none!important}
.vinci-conditional-room[data-vinci-assembly="conditional-room"] [data-conditional-room-condition]
  >.vinci-control-diagram{
  position:relative!important;display:block!important;width:100%!important;min-height:38px!important;margin:0!important;padding:0!important;
  overflow:visible!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important
}
.vinci-conditional-room[data-vinci-assembly="conditional-room"][data-conditional-room]
  [data-conditional-room-condition][data-conditional-room-truth-owner]
  .vinci-function-condition-gate{
  position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;
  min-height:38px!important;margin:0!important;padding:0!important;box-sizing:border-box!important;
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important
}
.vinci-conditional-room[data-vinci-assembly="conditional-room"] [data-conditional-room-condition]
  .vinci-function-condition-kind{display:none!important}
.vinci-conditional-room[data-vinci-assembly="conditional-room"] [data-conditional-room-condition]
  .vinci-function-condition-evaluation-pill{width:auto!important;max-width:100%!important;min-height:34px!important;padding:7px 11px!important}
.vinci-conditional-room[data-vinci-assembly="conditional-room"]>[data-conditional-room-body]{
  display:grid!important;place-items:center!important;align-content:start!important;gap:8px!important;width:100%!important;
  min-width:0!important;min-height:50px!important;margin:0!important;padding:0!important;box-sizing:border-box!important;
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important
}
.vinci-conditional-room[data-vinci-assembly="conditional-room"]>[data-conditional-room-body]
  >.vinci-function-control-body-label{display:none!important}
.vinci-conditional-room[data-vinci-assembly="conditional-room"] [data-conditional-room-entry]{
  position:absolute!important;left:50%!important;top:-6px!important;z-index:10!important;transform:translateX(-50%)!important
}
/* A Single IF owns its entry directly on the room. Counted Loop's existing
   condition-step entry remains nested in its condition region, so offset it
   by that region's 20px placement and keep the one visible room-rim entry. */
.vinci-conditional-room[data-vinci-assembly="conditional-room"]>[data-conditional-room-condition]
  [data-conditional-room-entry]{top:-27px!important}
/* Paths remain the caller's semantic nodes, but the room has no visible
   TRUE/FALSE fork. Only their actual sockets sit on the room rim: FALSE at
   the condition level and TRUE just below the condition on its way to body. */
.vinci-conditional-room[data-vinci-assembly="conditional-room"][data-conditional-room]
  [data-conditional-room-condition]>.vinci-control-diagram>.vinci-control-lanes{position:static!important;display:contents!important}
.vinci-conditional-room[data-vinci-assembly="conditional-room"][data-conditional-room]
  [data-conditional-room-path]{position:static!important;display:contents!important}
.vinci-conditional-room[data-vinci-assembly="conditional-room"][data-conditional-room]
  [data-conditional-room-path]>.vinci-control-lane-label{display:none!important}
.vinci-conditional-room[data-vinci-assembly="conditional-room"][data-conditional-room]
  [data-conditional-room-path="false"]>.vinci-control-lane-line{
  position:absolute!important;right:-29px!important;top:14px!important;z-index:4!important
}
.vinci-conditional-room[data-vinci-assembly="conditional-room"][data-conditional-room]
  [data-conditional-room-path="true"]>.vinci-control-lane-line{
  position:absolute!important;left:50%!important;top:58px!important;z-index:4!important;transform:translateX(-50%)!important;
  border-color:transparent!important;background:transparent!important;box-shadow:none!important;color:transparent!important
}
/* Script-level controls use their source Path ranges to seat the exact body
   Places under the gate. This room is shared by Academy, Lab and app hosts;
   its children keep their canonical IDs and ordinary editor/playback hooks. */
.vinci-program-control-room{
  display:grid!important;grid-template-columns:minmax(0,1fr);justify-items:center;gap:10px;
  width:min(100%,410px);max-width:100%;min-width:0;padding:14px;
  box-sizing:border-box;border:1px dashed rgba(122,74,8,.3)!important;border-radius:16px;
  background:rgba(255,252,245,.9)!important
}
.vinci-program-control-room>.vinci-authored-operation-header{width:100%;justify-content:center}
.vinci-program-control-room>.vinci-control-diagram{
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:7px;
  width:100%;min-width:0;margin:0;box-sizing:border-box
}
.vinci-program-control-room>.vinci-control-diagram>.vinci-control-lanes{
  display:flex;flex-wrap:wrap;justify-content:center;gap:9px;width:100%;min-width:0
}
.vinci-program-control-room>.vinci-control-diagram>.vinci-control-lanes>.vinci-control-lane{min-width:0}
.vinci-program-control-room>.vinci-program-control-bodies{
  display:grid;grid-template-columns:minmax(0,1fr);gap:9px;width:100%;min-width:0
}
.vinci-program-control-room .vinci-program-control-arm{
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:5px;
  width:100%;min-width:0;box-sizing:border-box;padding:8px;
  border:1px dashed rgba(122,74,8,.22);border-radius:12px;background:rgba(255,255,255,.75)
}
.vinci-program-control-room .vinci-program-control-arm-label{
  justify-self:start;color:#796b5b;font:700 8px/1.2 var(--mono);letter-spacing:.08em
}
.vinci-program-control-room .vinci-program-control-arm>.vinci-program-block-scope{
  width:100%;min-width:0;max-width:100%;box-sizing:border-box
}
.vinci-program-control-room .vinci-program-control-arm>[data-operation-id]{max-width:100%}
.vinci-program-control-room>.vinci-program-loop-phase{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;
  width:100%;min-width:0;box-sizing:border-box;padding:7px 9px;
  border:1px solid rgba(122,74,8,.17);border-radius:10px;background:#fff
}
.vinci-program-control-room>.vinci-program-loop-phase small{
  color:#786c5e;font:650 9px/1.3 var(--mono);white-space:normal;overflow-wrap:anywhere
}
.vinci-program-control-room>.vinci-program-loop-phase[data-program-loop-update] small{color:var(--gold-deep)}
.vinci-program-control-room>.vinci-program-loop-continuation{
  justify-self:start;color:#786c5e;font:600 8px/1.3 var(--mono)
}
/* A one-arm IF uses the same top-entry conditional room as a Function IF.
   The inner lexical Place still exists, but its second border would falsely
   suggest a second condition/enclosure. */
.vinci-program-control-room.vinci-conditional-room[data-vinci-assembly="conditional-room"]{
  width:min(100%,360px)!important;max-width:100%!important;min-width:0!important;
  padding-top:67px!important
}
.vinci-program-control-room.vinci-conditional-room>.vinci-authored-operation-header{display:none!important}
.vinci-program-control-room.vinci-conditional-room>[data-conditional-room-body]{border:0;background:transparent;padding:0}
.vinci-program-control-room.vinci-conditional-room>[data-conditional-room-body]>.vinci-program-block-scope{
  width:100%;min-height:0;padding:8px 4px;border:0;background:transparent;box-shadow:none
}
.vinci-program-control-room.vinci-conditional-room>[data-conditional-room-body]>.vinci-program-block-scope>.vinci-program-scope-label{display:none}
@media(max-width:600px){
  .vinci-program-control-room{padding:11px}
  .vinci-program-control-room .vinci-program-control-arm{padding:6px}
  .vinci-program-control-room>.vinci-control-diagram>.vinci-control-lanes{gap:5px}
}
.vinci-program-function[data-function-if-layout="step-fork"] .vinci-decision-assembly
  .vinci-control-lane[data-function-if-branch-anchor]:is([data-state="active"],[data-state="taken"],[data-state="observed"],[data-state="selected"])>.vinci-control-lane-label{color:#985f0b}
.vinci-completion-route{display:grid;grid-template-columns:auto minmax(36px,1fr) auto;align-items:center;gap:5px}
.vinci-completion-origin,.vinci-completion-destination{padding:4px 6px;border:1px solid rgba(150,70,70,.24);border-radius:999px;color:#7d4141;background:#fff7f7;font:700 6.5px/1 var(--mono)}
.vinci-completion-line{height:1px;border-top:1.5px dashed rgba(150,70,70,.45)}
.vinci-completion-line::after{content:"›";float:right;margin-top:-7px;color:#8f4e4e;font:800 10px/1 var(--mono)}
/* Switch cases and authored abrupt-completion cards share the same exit
   Function port primitive, whose default socket/copy are absolutely placed
   around a 1px boundary anchor. In a route card the port must instead own its
   text in the route grid, including when the target name wraps on mobile. */
:is(.vinci-program-control-room,.vinci-completion-operation) .vinci-completion-route{
  grid-template-columns:auto minmax(20px,1fr) minmax(0,62%);width:100%;min-width:0
}
:is(.vinci-program-control-room,.vinci-completion-operation) .vinci-completion-route>.vinci-completion-destination{
  position:relative;left:auto;bottom:auto;display:flex;align-items:center;gap:5px;
  width:auto;height:auto;min-width:0;max-width:100%;box-sizing:border-box
}
:is(.vinci-program-control-room,.vinci-completion-operation) .vinci-completion-destination::after{content:none}
:is(.vinci-program-control-room,.vinci-completion-operation) .vinci-completion-destination>.vinci-function-port-mouth{
  position:static;flex:none;transform:none
}
:is(.vinci-program-control-room,.vinci-completion-operation) .vinci-completion-destination>.vinci-function-port-copy{
  position:static;left:auto;bottom:auto;display:grid;gap:1px;
  width:auto;max-width:100%;min-width:0
}
:is(.vinci-program-control-room,.vinci-completion-operation) .vinci-completion-destination .vinci-function-port-name,
:is(.vinci-program-control-room,.vinci-completion-operation) .vinci-completion-destination .vinci-function-port-copy small{
  white-space:normal;overflow-wrap:anywhere;line-height:1.2
}
.vinci-advanced-device{display:flex;align-items:center;gap:5px;min-width:48px;max-width:92px;padding:5px 7px;border:1px solid rgba(238,150,20,.45);border-radius:8px;color:var(--gold-deep);background:#fff4dc}
.vinci-advanced-device i{display:grid;place-items:center;width:17px;height:17px;border:1px solid currentColor;border-radius:5px;font:800 7px/1 var(--mono);font-style:normal}
.vinci-advanced-device b{overflow:hidden;font:750 6.5px/1.1 var(--mono);text-overflow:ellipsis;white-space:nowrap}

.vinci-program-paths{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;width:min(100%,330px);margin:7px auto 0}
.vinci-program-paths[hidden]{display:none}
.vinci-program-path{display:flex;align-items:center;gap:5px;min-width:74px;max-width:150px;padding:5px 7px;border:1px solid rgba(21,17,13,.1);border-radius:8px;background:rgba(255,255,255,.78)}
.vinci-program-path-line{display:block;flex:0 0 18px;border-top:1.5px dashed rgba(122,74,8,.32)}
.vinci-program-path-copy{display:grid;gap:2px;min-width:0}
.vinci-program-path-label{overflow:hidden;font:650 6.5px/1 var(--mono);text-overflow:ellipsis;white-space:nowrap}
.vinci-program-path-state{color:var(--ink-mute);font:600 5px/1 var(--mono)}
.vinci-program-path:is([data-state="active"],[data-state="taken"],[data-state="observed"],[data-state="done"]) .vinci-program-path-line{border-top-style:solid;border-color:#c97d0e}
.vinci-program-operation[data-state="reading"],.vinci-program-operation[data-state="operating"],.vinci-program-operation[data-state="active"]{opacity:0}
.vinci-program-operation[data-state="done"]{color:#7a4a08;opacity:.42}

.studio-visual-program[data-motion-phase] .vinci-program-function{width:min(100%,420px);min-height:330px;padding:50px 20px}
.studio-visual-program[data-motion-phase] .vinci-program-function-body{min-height:230px;padding:16px}

@media(max-width:700px){
  .studio-visual-program{min-width:0;min-height:0;padding:8px}
  .vinci-program-place{width:min(100%,360px);padding:42px 10px 20px}
  .vinci-program-function{width:min(100%,300px)}
}

@media(prefers-reduced-motion:reduce){
  .studio-visual-program *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ── the physical filter mechanism ─────────────────────────────────────────
   Input rail → predicate gate → PASS exit (to the output Rail) and REJECT
   exit. Both exits are visible before Run and inactive; witnessed evidence
   that the evaluator reproduced lights only what actually happened. */
.vinci-filter-operation{min-width:210px}
.vinci-filter-diagram{display:flex;align-items:center;gap:7px;margin-top:5px}
.vinci-filter-input{color:var(--ink-soft);font:650 7px/1.2 var(--mono);white-space:nowrap}
.vinci-filter-expression{flex:1 1 auto}
.vinci-filter-shared-gate[data-state="witnessed"] .vinci-operator-lens,
.vinci-filter-shared-gate[data-state="testing"] .vinci-operator-lens{border-color:var(--gold);box-shadow:0 0 0 3px rgba(238,150,20,.16)}
.vinci-filter-gate{position:relative;display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:1.5px solid rgba(238,150,20,.54);border-radius:9px;background:#fff4dc}
.vinci-filter-gate[data-state="witnessed"],.vinci-filter-gate[data-state="testing"]{border-color:var(--gold);box-shadow:0 0 0 3px rgba(238,150,20,.16)}
.vinci-filter-glyph{color:var(--gold-deep);font:850 11px/1 var(--mono);font-style:normal}
.vinci-filter-predicate{color:var(--ink);font:700 8px/1.2 var(--mono);white-space:nowrap}
.vinci-filter-exits{display:grid;gap:4px}
.vinci-rail-member[data-filter-verdict="pass"]{outline:1.5px solid rgba(238,150,20,.55);outline-offset:2px;border-radius:10px}
.vinci-rail-member[data-filter-verdict="reject"]{opacity:.55}
.vinci-rail-member .vinci-rail-nested-host .vinci-ball-seat{display:inline-block}

/* While a member Ball travels the filter phrase, its Rail chain must not
   clip or bury it: the track's scroll container opens and the ancestors
   take the traveller's stacking. At rest these rules never apply. */
.vinci-rail-track:has(.vf-ballwrap[data-filter-travelling]){overflow:visible}
.vinci-rail-track:has(.vf-ballwrap[data-loop-travelling]){overflow:visible}
.vinci-program-rail:has(.vf-ballwrap[data-filter-travelling]),
.vinci-rail-member:has(.vf-ballwrap[data-filter-travelling]),
.vinci-rail-nested-host:has(.vf-ballwrap[data-filter-travelling]),
.vinci-program-scope:has(.vf-ballwrap[data-filter-travelling]){z-index:60}
.vinci-program-rail:has(.vf-ballwrap[data-loop-travelling]),
.vinci-rail-member:has(.vf-ballwrap[data-loop-travelling]),
.vinci-rail-nested-host:has(.vf-ballwrap[data-loop-travelling]),
.vinci-program-scope:has(.vf-ballwrap[data-loop-travelling]){z-index:60}
/* A member in flight is never dimmed: its verdict describes where it comes
   to rest, and the reject journey is the most instructive beat to watch. */
.vinci-rail-member:has(.vf-ballwrap[data-filter-travelling]){opacity:1}

/* A resolved for…of wears one border INSIDE the exact authored Array. The
   border and underline are overlays only; members remain their canonical
   Rail seats and the moving object remains its exact Ball DOM node. */
.vinci-loop-rail-border{
  position:absolute;z-index:6;box-sizing:border-box;
  pointer-events:none;transition:left .24s ease,width .24s ease,opacity .18s ease
}
.vinci-loop-rail-border[data-border-empty="true"]{border-style:dashed;opacity:.48}
.vinci-loop-rail-border-label{
  position:absolute;left:8px;top:-8px;padding:2px 6px;border-radius:999px;
  color:#6b3c00;background:#fff8eb;font:750 6px/1 var(--mono);letter-spacing:.035em;white-space:nowrap
}
.vinci-loop-rail-current{
  position:absolute;z-index:9;height:3px;border-radius:999px;background:var(--gold);
  box-shadow:0 0 0 2px rgba(238,150,20,.14);opacity:0;pointer-events:none;
  transition:left .2s ease,width .2s ease,opacity .14s ease
}
.vinci-loop-rail-current[data-active="true"]{opacity:1}
.vinci-rail-member[data-loop-state="done"]>.vinci-rail-member-value{opacity:.5}
.vinci-rail-member[data-loop-state="done"]::after{
  content:"✓";position:absolute;right:1px;bottom:3px;z-index:10;color:#985f0b;font:800 8px/1 var(--mono)
}
.vinci-program-function[data-loop-active="true"]{
  border-color:var(--gold);box-shadow:0 0 0 5px rgba(238,150,20,.12),0 18px 38px rgba(90,52,12,.12)
}
/* Members admitted to a filter output are references to the same Balls. */
.vinci-filter-output-member{border-style:dashed;background:rgba(255,249,237,.9)}
.vinci-filter-output-member .vinci-rail-member-value small{color:var(--gold-deep)}

/* The declaration keyword is its own mark on the Ball — a compact chip, read
   differently from a field, because `let` is a binding fact and not a value
   the object holds. The references pill names every route to this one
   identity; it appears only when more than one name reaches the same Ball. */
.vinci-ball-binding-details.vinci-ball-declaration-chip{
  position:absolute;top:44px;left:44px;z-index:2;display:none;align-items:center;gap:0;max-width:none;
  padding:3px 10px;border-radius:999px;border:1px dashed rgba(122,74,8,.3);
  background:rgba(255,253,247,.72);box-shadow:0 2px 7px rgba(122,74,8,.08)}
.vmark-ball-live[data-ball-edit-mode="true"]>.vinci-ball-binding-details.vinci-ball-declaration-chip:not([hidden]){
  display:inline-flex
}
.vinci-ball-binding-details.vinci-ball-declaration-chip .v{
  color:rgba(95,55,8,.72);font:750 8px/1 var(--mono);letter-spacing:.08em
}
.vinci-ball-references-pill{
  align-self:center;display:inline-flex;align-items:baseline;gap:6px;max-width:100%;
  padding:4px 10px;border-radius:999px;border:1px dashed rgba(122,74,8,.5);
  background:rgba(255,255,255,.94)}
.vinci-ball-references-pill .k{color:var(--gold-deep);font:800 7px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.vinci-ball-reference-name{display:inline-flex;align-items:center;gap:3px;color:var(--ink);font:700 9px/1.2 var(--mono);white-space:nowrap}
.vinci-ball-reference-name+.vinci-ball-reference-name::before{content:"·";margin-right:3px;color:var(--ink-mute)}
.vinci-ball-reference-tether{
  display:inline-block;width:8px;height:1px;border-left:0;border-top:1.5px dashed rgba(122,74,8,.5)
}
.vinci-ball-reference-tether::after{
  left:auto;right:-1px;bottom:-2px;width:4px;height:4px;border-right:1.5px solid rgba(122,74,8,.55);
  border-bottom:1.5px solid rgba(122,74,8,.55);transform:rotate(-45deg)
}
.vinci-ball-primary-reference-tether{margin-left:5px}
.vmark-ball-live:not([data-state="expanded"]) .vinci-ball-references-pill{display:none}
/* A filter output Rail must stay inside its Place however many members it
   admits: its chips wrap and the track scrolls rather than pushing the Rail
   (and its count badge) off the canvas. */
.vinci-program-rail[data-definition-id^="filter-output-rail:"]{max-width:100%}
.vinci-program-rail[data-definition-id^="filter-output-rail:"] .vinci-rail-track{flex-wrap:wrap;max-height:104px;overflow-y:auto}
/* A travelling member carries its name over unrelated cards; the label needs
   its own ground so it stays readable in flight. */
.vf-ballwrap[data-filter-travelling] .vmark-ball-live-label{
  padding:1px 7px;border-radius:999px;background:rgba(255,253,250,.96);
  box-shadow:0 2px 7px rgba(21,17,13,.16)}
/* A computed key names the binding its name will come from. It is drawn as a
   reference, not a literal, because the actual name is unknown until run. */
.vfield-computed-key{
  padding:0 5px;border:1px dashed rgba(122,74,8,.55);border-radius:6px;
  color:var(--gold-deep);font:750 8px/1.4 var(--mono)}
.vfield-computed-key[data-computed-key-read-only="true"]{cursor:help}
.vfield-computed-key[data-computed-key-read-only="true"]:focus-visible{
  outline:2px solid var(--gold-deep);outline-offset:2px}
/* These two marks must win inside the expanded ball, where a later rule sets
   border-width and previously flattened them back to a plain solid pill. */
.vfield[data-key-from],
.studio-visual-program .vmark-ball-live[data-state="expanded"] .vfield[data-key-from]{
  border-style:dashed}
/* An internal slot is not a field the object owns — it must not read as one. */
.vfield[data-internal-slot],
.studio-visual-program .vmark-ball-live[data-state="expanded"] .vfield[data-internal-slot]{
  border-style:dotted;border-color:rgba(122,74,8,.42);
  background:repeating-linear-gradient(135deg,rgba(122,74,8,.05) 0 6px,transparent 6px 12px),rgba(255,255,255,.92);
  font-style:italic}
.vinci-lexical-this-note{color:var(--ink-soft);font:650 8px/1.4 var(--mono);text-align:center}

.vinci-operator-picker{position:relative;display:inline-flex;align-items:center}
.vinci-operator-picker>button.vinci-operator-lens{cursor:pointer;background:rgba(255,255,255,.96)}
.vinci-operator-picker>button.vinci-operator-lens:hover,.vinci-operator-picker>button.vinci-operator-lens[data-operator-picker="open"]{border-color:rgba(173,126,48,.58);background:#fffbf4;box-shadow:0 2px 4px rgba(44,35,20,.04),0 5px 14px rgba(44,35,20,.07)}
.vinci-operator-picker>button.vinci-operator-lens:focus-visible{outline:2px solid #7a4a08;outline-offset:2px}
.vinci-operator-picker[data-operator-family="coercion"]>button.vinci-operator-lens::after{
  content:attr(data-control-label) " \25BE";margin-left:6px;padding-left:6px;border-left:1px solid rgba(122,74,8,.2);
  color:var(--ink-mute);font:500 10px/1.2 var(--vinci-data-pill-font-family,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);letter-spacing:0;text-transform:none;white-space:nowrap
}
.vinci-operator-picker[data-operator-family="coercion"]>button.vinci-operator-lens[data-operator-picker="open"]::after{content:"type menu \25B4"}
.vinci-operator-options{position:absolute;top:calc(100% + 6px);left:50%;z-index:40;display:flex;flex-wrap:wrap;gap:4px;justify-content:center;width:max-content;max-width:164px;padding:6px;border:1px solid rgba(203,162,91,.26);border-radius:13px;background:#fff;box-shadow:0 2px 5px rgba(44,35,20,.04),0 9px 24px rgba(44,35,20,.08);transform:translateX(-50%)}
.vinci-operator-picker:has(>.vinci-operator-lens[data-operator-picker="open"]){display:contents}
.vinci-operator-picker:has(>.vinci-operator-lens[data-operator-picker="open"])>.vinci-operator-options{
  position:static;top:auto;left:auto;z-index:auto;order:2;flex:0 0 auto;
  max-width:164px;margin:0 auto;transform:none}
.vinci-expression-row:has(.vinci-operator-lens[data-operator-picker="open"])::after{
  content:"";order:1;flex:0 0 100%;height:0}
.vinci-operator-options[hidden]{display:none}
.vinci-operator-option{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:30px;min-height:28px;padding:5px 7px;border:1px solid transparent;border-radius:8px;background:#fff;color:var(--ink,#15110d);font:500 11px/1.3 var(--mono);cursor:pointer;transition:background .16s ease,border-color .16s ease}
.vinci-operator-option[data-readonly-choice="true"]{cursor:default}
.vinci-operator-option:not([data-readonly-choice="true"]):hover{border-color:rgba(203,162,91,.38);background:#fffbf4}
.vinci-operator-option[aria-selected="true"]{border-color:rgba(173,126,48,.44);background:#fff5e4;color:#7a4a08}
.vinci-operator-option:focus-visible{outline:2px solid #7a4a08;outline-offset:1px}
.vinci-operator-options[data-choice-layout="grouped"]{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:8px;width:294px;max-width:294px;padding:8px
}
.vinci-operator-picker:has(>.vinci-operator-lens[data-operator-picker="open"])>.vinci-operator-options[data-choice-layout="grouped"]{
  width:min(100%,294px);max-width:294px
}
.vinci-operator-options[data-choice-layout="grouped"][hidden]{display:none}
.vinci-operator-choice-group{display:grid;align-content:start;gap:4px;min-width:0}
.vinci-operator-choice-group+.vinci-operator-choice-group{padding-left:6px;border-left:1px solid rgba(21,17,13,.09)}
.vinci-operator-choice-heading{
  color:var(--ink-mute);font:800 6px/1.2 var(--mono);letter-spacing:.07em;text-align:left;text-transform:uppercase;white-space:nowrap
}
.vinci-operator-choice-members{display:grid;gap:3px;min-width:0}
.vinci-operator-options[data-choice-layout="grouped"] .vinci-operator-option{
  width:100%;min-width:0;padding:5px 4px;font-size:10px;justify-content:flex-start;text-align:left;white-space:nowrap
}
.vinci-function-callable-mark{align-self:center;padding:2px 5px;border:1px solid rgba(122,74,8,.28);border-radius:5px;color:#7a4a08;background:rgba(253,247,238,.9);font:650 6px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.vinci-expression-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;padding:2px 0;font:500 12px/1.5 var(--mono);color:var(--ink,#15110d)}
/* An expression PART is a fragment of the source line, not a value — it stays
   plain text and is deliberately NOT made a pill, because a pill would claim
   the fragment is a thing the program holds. What it does owe the vocabulary
   is one line box: the same fragment measured 16px, 17px, 17.3px and 18.4px
   in different cards purely because nested spans carried their own leading. */
.vinci-expression-part{padding:2px 1px;font:500 12px/1.5 var(--mono);letter-spacing:0}
.vinci-expression-part *{line-height:1.5}
.vinci-expression-part[data-unknown="true"]{border-bottom:1px dashed rgba(122,74,8,.45)}
.vinci-expression-part[data-source-read="true"]{
  color:#7a4a08;border-bottom:1px solid rgba(152,95,11,.36);font-weight:500
}
.vinci-return-value-source{color:#7a4a08;border-bottom:1px solid rgba(152,95,11,.48);font-weight:750}
.vinci-expression-glyph{color:#7a4a08;font-weight:500}
.vinci-expression-arrow{color:var(--ink-mute,#756c61);font-weight:600}
.vinci-expression-row .vinci-operator-lens{padding:2px 8px;font:500 12px/1.4 var(--mono)}

/* A quiet concise arithmetic body still owns its result seat. On a narrow
   Function, use its existing header and expression rows instead of a single
   intrinsic-width line that clips the authored operands and observed result. */
@media(max-width:700px){
  [data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
    .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
    .vinci-function-written-line:not([data-current="true"]):not([data-function-fold])>.vinci-function-row-mark>.vinci-authored-operation:not([data-vinci-l1="await"]):not(:has(>.vinci-operation-result-binding))[data-operator-family="arithmetic"]{
    display:grid!important;grid-template-columns:minmax(0,1fr);width:min(100%,286px)!important;
    min-width:0;max-width:100%;box-sizing:border-box;white-space:normal
  }
  [data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
    .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
    .vinci-function-written-line:not([data-current="true"]):not([data-function-fold])>.vinci-function-row-mark>.vinci-authored-operation:not([data-vinci-l1="await"]):not(:has(>.vinci-operation-result-binding))[data-operator-family="arithmetic"]>.vinci-authored-operation-header{
    display:flex!important;flex-wrap:wrap;justify-content:center;max-width:100%
  }
  [data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
    .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
    .vinci-function-written-line:not([data-current="true"]):not([data-function-fold])>.vinci-function-row-mark>.vinci-authored-operation:not([data-vinci-l1="await"]):not(:has(>.vinci-operation-result-binding))[data-operator-family="arithmetic"]>.vinci-expression-row{
    display:flex!important;flex-wrap:wrap;min-width:0;max-width:100%;white-space:normal
  }
}

/* Legacy generic marks retain their original paint. Function/Decision socket
   leaves use the shared .vinci-port-socket contract defined above; the wrapper
   must not repaint an empty opening as a permanently filled gold dot. */
.vinci-port,
.vinci-function-port-mouth:not(.vinci-port-socket),
.studio-visual-program .vinci-function-port-mouth:not(.vinci-port-socket),
.semantic-visual-program .vinci-function-port-mouth:not(.vinci-port-socket){
  width:9px;height:9px;border:2px solid #fff;border-radius:50%;
  background:#efc681;box-shadow:0 0 0 1px rgba(161,116,48,.42)}
.vinci-port[data-state="active"],
.vinci-function-port-mouth[data-state="active"]{
  background:var(--gold,#ee9614);box-shadow:0 0 0 1px rgba(161,116,48,.58),0 0 0 4px rgba(238,150,20,.1)}

/* ── C1 · ONE PILL VOCABULARY ────────────────────────────────────────────────
   Compact semantic carriers keep the shared `.vmark-pill` proportions below.
   The Primitive itself and a Ball's data field are the one deliberate larger
   data-Pill register: the feedback explicitly names the published Mapper field
   as their common reference. Keeping that pair on one token lets it match the
   Mapper exactly without inflating parameter seats, operator results, Rail
   cells, alias disclosures, or other compact semantic Pills.

   50 -> 45 -> 29 (artifacts/night/probes/coh-01-vocab-census.mjs). Of the 29
   rows the census still prints, TWO are the pill: known and unknown. Ten more
   are those same two (and their key/value spans) measured through an ancestor
   transform — scale(1.08) on [data-semantic-focus], scale(.82) on a collapsed
   Ball's bloom row — since the census reads getBoundingClientRect. Measured by
   LAYOUT box instead, all 175 value pills on the atlas are 2 shapes, full stop.
   The last 13 rows are marks that are NOT values and are left alone on purpose:
   expression fragments, glyphs, the miniature marks in an operation flow, and
   the chrome-less seat a Rail gives a member that carries a real Ball.

   The two registers are named in one place so neither can silently drift. */
:root{
  --vinci-pill-h:32px;
  --vinci-pill-pad:8px 14px;
  --vinci-pill-edge:rgba(238,150,20,.28);
  --vinci-pill-bg:rgba(255,255,255,.96);
  /* One unknown tint, written opaque on purpose: four carriers each had their
     own near-white (#faf9f6, rgba(246,246,246,.96), rgba(255,249,237,.96),
     rgba(255,255,255,.85)) and read as four different marks. */
  --vinci-pill-unknown-bg:#faf9f6;
  --vinci-pill-shadow:0 4px 14px rgba(21,17,13,.06);
  /* Measured from sol/mapper.html#object: 38px rendered height, 8x14
     padding, radius 20, and a 2px edge. Typography follows the shared
     system-font direction requested on 14 September 2026.
     These are the reference Atlas's values and they are load-bearing beyond
     taste: renderer/vinci-marks.mjs paints its own Ball fields with exactly
     this face (2px, rgba(255,215,0,.3), 0 6px 16px rgba(0,0,0,.2)) and is
     byte-identical to the original. While these tokens carried a quieter 1px
     tan edge and a soft warm shadow, ONE Pill had TWO faces depending on which
     consumer drew it — sol/l1-object-ball.html against the Atlas routes. The
     quieter values were never asked for in any accepted comment or report. */
  --vinci-data-pill-h:38px;
  --vinci-data-pill-pad:8px 14px;
  --vinci-data-pill-border:2px;
  /* Fully round (decision 0026, 29 Sep 2026): one pill shape. On a 38px pill 999px draws
     what 20px drew; a pill that grows taller keeps its round ends instead of becoming a box. */
  --vinci-data-pill-radius:999px;
  --vinci-data-pill-font-size:13px;
  --vinci-data-pill-font-weight:500;
  --vinci-data-pill-line-height:normal;
  --vinci-data-pill-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --vinci-data-pill-edge:rgba(255,215,0,.3);
  --vinci-data-pill-bg:rgba(255,255,255,.95);
  --vinci-data-pill-shadow:0 6px 16px rgba(0,0,0,.2);
}
.vinci-binding-pill,
.vinci-rail-member{
  min-width:0;min-height:var(--vinci-pill-h);box-sizing:border-box;
  padding:var(--vinci-pill-pad);border:1px solid var(--vinci-pill-edge);border-radius:999px;
  background:var(--vinci-pill-bg);box-shadow:var(--vinci-pill-shadow);
  /* line-height matches the Ball field exactly (1.35) so the two pills are one
     shape by measurement, not merely by intention. */
  font:12px var(--mono);line-height:1.35;white-space:nowrap}
.vinci-binding-pill{color:var(--gold-deep);cursor:pointer}
/* A scope navigator's title names the enclosing function; it is not another
   data value. Keep the Binding identity for source routes, but let the title
   read as plain text inside the function frame. */
.vinci-program-function[data-function-scope-navigator="true"]
  >.vinci-program-function-label>.vinci-function-name-pill,
.vinci-program-function[data-function-scope-navigator="true"]
  >.vinci-program-function-label>.vinci-function-name-pill:hover,
.vinci-program-function[data-function-scope-navigator="true"]
  >.vinci-program-function-label>.vinci-function-name-pill:focus-visible{
  min-width:0;min-height:0;padding:0;border:0!important;border-radius:0;
  background:transparent!important;box-shadow:none!important;color:var(--gold-deep);cursor:default
}
.vinci-program-function[data-function-scope-navigator="true"]
  >.vinci-program-function-label>.vinci-function-name-pill .vinci-binding-pill-name{
  font:700 15px/1.1 var(--mono);letter-spacing:.01em
}
.vinci-program-function[data-function-scope-navigator="true"]
  >.vinci-program-function-label>.vinci-function-name-tether{display:none}
/* The two halves of a pill are the reference's `.k` and `.v`: same size as the
   pill, the key heavier. They carried five different sizes (10, 9, 8, 7.5, 7)
   depending on which card the pill happened to sit in. */
.vinci-binding-pill-name{font:700 12px/1.35 var(--mono);letter-spacing:.015em}
.vinci-binding-pill-value{color:var(--ink-soft);font:600 12px/1.35 var(--mono);white-space:pre}
/* A Rail member is a value in an ordered Place — a Pill, not a grey box; its
   index is that value's key, so it is typeset as one. */
.vinci-rail-member{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-color:rgba(203,162,91,.32);box-shadow:0 2px 4px rgba(44,35,20,.025),0 5px 12px rgba(44,35,20,.035)}
.vinci-rail-member .vinci-rail-member-index{
  position:static;color:#827b70;font:500 11px/1 var(--mono);opacity:1;font-variant-numeric:tabular-nums}
.vinci-rail-member .vinci-rail-member-value{
  display:inline-flex;align-items:center;gap:4px;max-width:none;font:12px/1 var(--mono)}
/* A member cell that seats a real Ball or Pill draws no chrome (vinci-marks
   makes it a seat) — but the pill it seats is the SAME pill, not an 11px one. */
:is(.studio-visual-program,.semantic-visual-program,.vinci-mark-preview)
  .vinci-rail-member[data-member-mark] .vmark-pill{
  padding:var(--vinci-pill-pad);font-size:12px}
/* …and the ordinal under that seat is the same key as the ordinal inside a
   plain member pill, so it is typeset the same. */
:is(.studio-visual-program,.semantic-visual-program,.vinci-mark-preview)
  .vinci-rail-member[data-member-mark] > .vinci-rail-member-index{
  color:#827b70;font:500 9px/1 var(--mono);letter-spacing:0;opacity:1}
/* A Ball already owns a readable face, so its array ordinal rides on that
   face instead of consuming a separate row underneath. The index remains the
   Rail seat's DOM child—this is presentation only, not Ball identity. */
:is(.studio-visual-program,.semantic-visual-program,.vinci-mark-preview)
  .vinci-program-rail .vinci-rail-member[data-member-mark="ball"] > .vinci-rail-member-index{
  position:absolute;z-index:8;left:50%;top:50%;margin:0;transform:translate(-50%,-50%);
  color:#281501;font:850 9px/1 var(--mono);letter-spacing:0;opacity:1;
  text-shadow:0 1px 1px rgba(255,255,255,.9),0 0 4px rgba(255,255,255,.38);pointer-events:none
}
/* The generic Atlas Ball wrapper reserves 72px so a loose example label has
   breathing room. Inside a compact Array, the owner boundary supplies that
   room; the seat only needs to fit its 32px Ball and the longest short label. */
:is(.studio-visual-program,.semantic-visual-program,.vinci-mark-preview)
  .vinci-rail-member[data-member-mark="ball"] :is(.vf-ballwrap,.vmark-ball-live-wrap){
  min-width:44px
}
/* A label-free Array Ball and its ordinal share the seat's center. Empty
   value lanes must not add a flex gap, and the inline Ball wrapper must not
   reserve a text baseline underneath the face. Keep the same seat and Ball. */
:is(.studio-visual-program,.semantic-visual-program,.vinci-mark-preview)
  .vinci-rail-member[data-member-mark="ball"] > .vinci-rail-member-value:empty{display:none}
:is(.studio-visual-program,.semantic-visual-program,.vinci-mark-preview)
  .vinci-rail-member[data-member-mark="ball"] :is(.vinci-ball-seat,.vf-ballwrap){
  display:grid;place-items:center
}
/* Expanding a member opens the same full Ball, so its semantic seat must grow
   with that Ball instead of retaining the compact preview's 240px width. The
   shared Rail track owns overflow and keeps the other members in order. */
:is(.studio-visual-program,.semantic-visual-program,.vinci-mark-preview)
  .vinci-rail-member[data-member-mark="ball"]:has(.vmark-ball-live[data-state="expanded"]),
:is(.studio-visual-program,.semantic-visual-program,.vinci-mark-preview)
  .vinci-rail-member[data-member-mark="ball"]:has(.vmark-ball-live[data-state="expanded"])
  :is(.vinci-rail-nested-host,.vinci-ball-seat,.vf-ballwrap){
  width:max-content;max-width:none
}
/* An opened Ball's center holds its field Pills, so the ordinal cannot stay
   on the center (it printed `name: Messi0`). It stays on the same Ball face,
   in the lower band between the field rows (up to four, centered) and the
   page dots at the Ball's foot, and keeps its key typesetting.
   A Ball that playback opens while it travels (a loop's body work) is not a
   resting seat: its ordinal and its Rail stay exactly as they were. */
:is(.studio-visual-program,.semantic-visual-program,.vinci-mark-preview)
  .vinci-program-rail .vinci-rail-member[data-member-mark="ball"]:has(.vmark-ball-live[data-state="expanded"]):not(:has([data-loop-travelling],[data-filter-travelling],[data-loop-work-open])) > .vinci-rail-member-index{
  top:78%
}
/* The seat's middle is the Ball's face only while the seat holds the Ball
   alone. After a run the same seat also holds the Ball's caption and its
   value Pill; its middle then fell on the caption ('me0ssi'). The ordinal is
   anchored to its own Ball instead, so it stays on that face however the seat
   grows. A Ball in flight has left the seat: the ordinal keeps the seat's
   middle until the Ball is back. */
@supports (position-anchor: --vinci-rail-member-ball) {
  :is(.studio-visual-program,.semantic-visual-program,.vinci-mark-preview)
    .vinci-program-rail .vinci-rail-member[data-member-mark="ball"]{anchor-scope:--vinci-rail-member-ball}
  :is(.studio-visual-program,.semantic-visual-program,.vinci-mark-preview)
    .vinci-program-rail .vinci-rail-member[data-member-mark="ball"]
    .vmark-ball-live:not(.vmark-ball-live .vmark-ball-live){anchor-name:--vinci-rail-member-ball}
  :is(.studio-visual-program,.semantic-visual-program,.vinci-mark-preview)
    .vinci-program-rail .vinci-rail-member[data-member-mark="ball"] > .vinci-rail-member-index{
    position-anchor:--vinci-rail-member-ball;left:anchor(center,50%);top:anchor(center,50%)
  }
  :is(.studio-visual-program,.semantic-visual-program,.vinci-mark-preview)
    .vinci-program-rail .vinci-rail-member[data-member-mark="ball"]:has(.vmark-ball-live[data-state="expanded"]):not(:has([data-loop-travelling],[data-filter-travelling],[data-loop-work-open])) > .vinci-rail-member-index{
    top:anchor(78%,78%)
  }
}
/* An opened Ball is 370px or more. Beside its compact siblings it overran the
   track and was cut at the track's edge. Members in order wrap onto the next
   row instead, so the opened Ball fits the track. */
.vinci-rail-track:has(> .vinci-rail-member[data-member-mark="ball"] .vmark-ball-live[data-state="expanded"]):not(:has([data-loop-travelling],[data-filter-travelling],[data-loop-work-open])){
  flex-wrap:wrap;row-gap:8px
}
/* The collection name labels its one enclosing boundary. It remains the real
   lexical Binding (and keeps its inspector/provenance), but it must not draw a
   second Pill-shaped owner inside the Array it already names. */
.vinci-program-rail > .vinci-rail-header > .vinci-rail-binding-pill{
  min-width:0;min-height:0;margin:0;padding:0 1px;border:0;border-radius:0;
  color:var(--gold-deep);background:transparent;box-shadow:none
}
.vinci-program-rail > .vinci-rail-header > .vinci-rail-binding-pill:is(:hover,:focus-visible){
  border:0;background:transparent;box-shadow:none;outline:1px dashed rgba(122,74,8,.34);outline-offset:3px
}
.vinci-program-rail > .vinci-rail-header > .vinci-rail-binding-pill .vinci-binding-pill-name{
  font:760 13px/1.1 var(--mono);letter-spacing:.015em
}
/* The Primitive and Formula share the Mapper's data-Pill token. This is
   intentionally narrower than `.vinci-binding-pill`: a parameter seat or a
   compact result binding is not the user's loose Primitive example. */
.vinci-binding-pill.vinci-primitive-binding-pill,
.vinci-binding-pill.vinci-formula-binding-pill{
  box-sizing:border-box;min-height:var(--vinci-data-pill-h);
  padding:var(--vinci-data-pill-pad);border:var(--vinci-data-pill-border) solid var(--vinci-data-pill-edge);
  border-radius:var(--vinci-data-pill-radius);background:var(--vinci-data-pill-bg);
  box-shadow:var(--vinci-data-pill-shadow);
  font:var(--vinci-data-pill-font-weight) var(--vinci-data-pill-font-size)/var(--vinci-data-pill-line-height) var(--vinci-data-pill-font-family);
  color:#222}
.vinci-binding-pill.vinci-primitive-binding-pill .vinci-binding-pill-name,
.vinci-binding-pill.vinci-primitive-binding-pill .vinci-binding-pill-value,
.vinci-binding-pill.vinci-formula-binding-pill .vinci-binding-pill-name,
.vinci-binding-pill.vinci-formula-binding-pill .vinci-binding-pill-value{
  font-family:var(--vinci-data-pill-font-family);font-size:var(--vinci-data-pill-font-size);
  font-weight:var(--vinci-data-pill-font-weight);line-height:var(--vinci-data-pill-line-height)}
.vinci-binding-pill.vinci-primitive-binding-pill .vinci-binding-pill-value,
.vinci-binding-pill.vinci-formula-binding-pill .vinci-binding-pill-value{font-weight:700}
.vinci-binding-pill.vinci-formula-binding-pill .vinci-binding-pill-value{
  display:inline-flex;align-items:center;gap:3px;white-space:normal
}
/* Keep the original expression reader's name inside its own result seat.
   An intrinsic-width grid child can otherwise center its name beyond the
   seat's clipping edge, leaving only nested operand controls reachable. */
.vinci-formula-binding>.vinci-formula-binding-pill[data-vinci-text-full]{
  width:100%;min-width:0;max-width:100%
}
.vinci-formula-binding>.vinci-formula-binding-pill[data-vinci-text-full]>[data-vinci-value-pill-name]{
  flex:0 0 auto;max-width:50%
}
.vinci-formula-binding>.vinci-formula-binding-pill[data-vinci-text-full]>[data-vinci-value-pill-value]{
  flex:1 1 auto;min-width:0
}
.vinci-binding-pill[data-compact-source-boundary]{
  flex-wrap:wrap;column-gap:4px;max-width:100%;min-width:0;height:auto;min-height:32px;overflow:visible;white-space:normal
}
.vinci-compact-source-boundary{
  display:block;flex:1 1 100%;min-width:0;max-width:100%;margin-top:3px;
  color:var(--ink-mute);font:650 7px/1.35 var(--mono);
  text-align:center;white-space:normal;overflow-wrap:anywhere
}
.vinci-binding-pill.vinci-formula-binding-pill .vinci-expression-part,
.vinci-binding-pill.vinci-formula-binding-pill .vinci-expression-glyph{
  display:inline;color:inherit;padding:0;font:inherit;line-height:inherit
}
.vinci-binding-pill.vinci-formula-binding-pill .vinci-operator-picker{display:inline-flex;align-items:center}
.vinci-binding-pill.vinci-formula-binding-pill .vinci-operator-lens{width:25px;min-width:25px;height:25px;padding:0 4px;font-size:11px}
.vinci-binding-pill.vinci-formula-binding-pill .vinci-expression-result{
  min-height:20px;padding:3px 6px;font-size:8px;line-height:1
}
.vinci-binding-computation-truth{
  color:#985f0b;font:650 6px/1.2 var(--mono);letter-spacing:.055em;text-transform:uppercase
}
.vinci-binding-computation-truth[data-result-certainty="unknown"]{color:var(--ink-mute)}
.vinci-binding-pill.vinci-primitive-binding-pill .vinci-binding-pill-value[data-kind="number"],
.vinci-binding-pill.vinci-formula-binding-pill .vinci-binding-pill-value[data-kind="number"]{color:#985f0b}
/* ── The unknown pill ───────────────────────────────────────────────────────
   Unknown is a STATE of the one pill, not a different mark: same body, dashed
   edge, one tint. Said once, never twice. */
.vinci-binding-pill.vinci-empty-binding-pill,
.vinci-binding-pill.vinci-result-binding-pill,
.vinci-rail-member[data-member-kind="unknown-reference"],
.vinci-rail-member[data-member-kind="spread-unknown"],
.vinci-expression-result[data-unknown="true"]{
  border-style:dashed;background:var(--vinci-pill-unknown-bg)}
.vinci-expression-outcome{display:contents}
.vinci-expression-result-array{width:max-content;min-width:0;max-width:100%;margin:0}
:is(.vinci-expression-result,.vinci-expression-result-array)[hidden]{display:none!important}
.vinci-expression-result-array>.vinci-rail-track{flex-wrap:wrap;overflow:visible}
.vinci-expression-result-array .vinci-rail-member-value{max-width:none}
.vinci-expression-result.vinci-value-pill[data-unknown="true"]{
  color:var(--ink-mute,#756c61);border-style:dashed;background:var(--vinci-pill-unknown-bg)
}
.vinci-expression-result{display:inline-flex;align-items:center;justify-content:center;text-align:center}
/* Restored 2026-09-07: the expected RESULT SHAPE is drawn, not just described.
   Without these three marks a rail-shaped, a ball-shaped and a union-shaped
   expected result all rendered as the same chip, which is a distinction the
   reference Atlas makes and a reader relies on. */
.vinci-expression-result[data-result-mark="rail"]{
  min-width:48px;border-radius:7px;background-image:linear-gradient(90deg,
    transparent 31%,rgba(122,74,8,.12) 31%,rgba(122,74,8,.12) 34%,
    transparent 34%,transparent 65%,rgba(122,74,8,.12) 65%,
    rgba(122,74,8,.12) 68%,transparent 68%)
}
.vinci-expression-result[data-result-mark="ball"]{
  width:38px;min-width:38px;height:38px;padding:0;border-radius:50%
}
.vinci-expression-result[data-result-mark="union"]{
  border-style:dashed;outline:1px dotted rgba(122,74,8,.2);outline-offset:2px
}
.vinci-expression-result.vinci-value-pill[data-certainty="source-computed"]{
  border-style:solid;border-color:rgba(152,95,11,.45);color:#7a4a08;background:#f9f7f5;
  box-shadow:0 3px 10px rgba(122,74,8,.1)
}
/* Expected result shape is provenance, not an object identity or Array seat.
   Actual objects and Arrays use their shared constructors when facts exist. */
@media(max-width:700px){
  .vinci-expression-definition-binding{grid-template-columns:1fr;gap:6px}
  .vinci-expression-binding-identity{padding:0 0 5px;border-right:0;border-bottom:1px dashed rgba(122,74,8,.22)}
}
/* A hole in a Rail is an absence, not an unknown value: it keeps no body. */
.vinci-rail-member[data-member-kind="hole"]{
  min-width:34px;border-style:dashed;background:transparent;box-shadow:none;color:var(--ink-mute)}

/* ── C4 · THE HONESTY MARKS MUST BE READABLE ────────────────────────────────
   The "?" and the "unknown" labels inside a mounted Sol scene take their
   colour from --ink-3, which sol-scene-renderer sets to #a39a8e = 2.77:1 on
   its own paper. sol-translator-page already raises it for the scenes IT
   mounts; the semantic-fragment scenes mounted by visual-program-renderer get
   a different css text and never received the fix. A rule on the HOST element
   wins over the shadow tree's own :host rule, and custom properties inherit
   across the boundary, so the fix reaches them from out here. */
.vinci-semantic-scene-host,.sol-scene-host{--ink-3:#756c61}

/* Loop-body IF — the canonical decision grammar for a Branch nested inside a
 * counted-Loop BODY. Row-scoped mirror of the direct-exits block above:
 * shell-level [data-function-if-layout] stays owned by whole-function shapes. */
[data-function-source-row][data-function-if-layout="loop-body"] [data-function-if-decision-node]{
  width:100%!important;max-width:100%!important;padding:0!important;border:0!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important
}
[data-function-source-row][data-function-if-layout="loop-body"] [data-function-if-diagram="loop-body"]{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  grid-template-areas:"decision" "fork" "anchors";justify-items:center;gap:0;
  width:min(100%,330px)!important;max-width:330px!important;margin:auto
}
[data-function-source-row][data-function-if-layout="loop-body"] .vinci-control-lanes{
  grid-area:anchors;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:44px;width:100%;min-width:0
}
[data-function-source-row][data-function-if-layout="loop-body"] .vinci-control-lane[data-function-if-branch-anchor]{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:10px auto;
  place-items:center;gap:0;min-width:0
}
[data-function-source-row][data-function-if-layout="loop-body"] .vinci-control-lane[data-function-if-branch-anchor="TRUE"]>.vinci-control-lane-label{color:#985f0b;border-color:rgba(152,95,11,.35)}
[data-function-source-row][data-function-if-layout="loop-body"] .vinci-control-lane[data-function-if-continuation="loop-next"]>.vinci-control-lane-label{color:#944c3b;border-color:rgba(169,79,59,.3)}

/* Loop canon shared by composed L1/L2: the collection wears the ring. */
.vinci-control-operation[data-atlas-loop-ring="true"]{
  position:relative!important;display:grid!important;place-items:center!important;
  box-sizing:border-box;width:min(100%,330px)!important;min-height:118px;
  margin:12px auto 42px!important;padding:26px 16px 30px!important;
  overflow:visible!important;white-space:normal!important;
}
[data-atlas-loop-ring="true"]>.vinci-authored-operation-header{position:absolute;top:9px;left:12px;right:12px}
[data-atlas-loop-ring="true"]>.vinci-authored-operation-header>small{display:none!important}
[data-atlas-loop-ring="true"] .vinci-loop-gate:not([data-function-condition-form="generic"]),
[data-atlas-loop-ring="true"] .vinci-mini-flow-arrow{display:none!important}
/* Inside the ring the shared loop-test gate keeps its ValuePill but wears no
   seat chrome of its own; the ring is the Loop's border. */
[data-atlas-loop-ring="true"] .vinci-loop-gate[data-function-condition-form="generic"]{
  border:0!important;background:transparent!important;padding:0!important;min-height:0!important
}
[data-atlas-loop-contains-rail="true"]>.vinci-control-diagram{position:absolute;inset:0;pointer-events:none}
[data-atlas-loop-contains-rail="true"] .vinci-control-test-pill{display:none!important}
[data-atlas-loop-ring="true"]>.vinci-rail-seat{position:relative;z-index:8;max-width:100%;margin:4px 0 0}
[data-atlas-loop-ring="true"] .vinci-control-lanes{
  position:absolute!important;left:36px;right:36px;bottom:-8px;
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));height:16px;
}
[data-atlas-loop-ring="true"] .vinci-control-lane{position:relative;display:block!important;width:54px;height:16px;justify-self:center}
[data-atlas-loop-ring="true"] .vinci-control-lane-line{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
}
[data-atlas-loop-ring="true"] .vinci-control-lane-label{
  position:absolute;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%);
  font:750 7px/1 var(--mono);letter-spacing:.08em;
}
[data-atlas-loop-emptied-rack="true"]:empty{display:none!important}

/* The iterator's existing typed receiver is the loop entry, not a second
   stop inside it. Keep its anchor fixed while a Ball opens in the body. */
.vinci-program-control-room[data-program-control-kind="loop"]:has(>[data-program-loop-item]){
  padding-top:48px!important;margin-top:28px!important
}
.vinci-program-control-room[data-program-control-kind="loop"]>[data-program-loop-item]{
  position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  margin:0;z-index:8
}
.vinci-program-control-room[data-program-control-kind="loop"]:has(>[data-program-loop-item])>[data-program-control-bodies]>[data-program-control-outcome="loop-body"]{
  position:relative;margin-top:10px;padding:0;border:0;background:transparent
}
/* The loop boundary already encloses its body. Preserve the actual lexical
   scope and Path identities without drawing two more boxes around the code. */
.vinci-program-control-room[data-program-control-kind="loop"]:has(>[data-program-loop-item])>[data-program-control-bodies]>[data-program-control-outcome="loop-body"]>.vinci-program-block-scope{
  width:100%;min-height:0;padding:8px 0;border:0;background:transparent;box-shadow:none
}
.vinci-program-control-room[data-program-control-kind="loop"]:has(>[data-program-loop-item])>[data-program-control-bodies]>[data-program-control-outcome="loop-body"]>.vinci-program-block-scope>.vinci-program-scope-label{
  display:none!important
}
.vinci-program-control-room[data-program-control-kind="loop"] [data-program-loop-path]{
  position:absolute!important;left:50%;top:0;bottom:auto;transform:translate(-50%,-50%);
  display:block!important;width:54px;height:16px;z-index:6
}
.vinci-program-control-room[data-program-control-kind="loop"] [data-program-loop-path]>.vinci-control-lane-label{
  top:calc(100% + 3px);bottom:auto
}
.vinci-program-control-room[data-program-control-kind="loop"] [data-program-control-arm]:has(>[data-program-loop-path])>.vinci-program-control-arm-label{display:none}
.vinci-program-control-room[data-program-control-kind="loop"] [data-program-control-outcome="loop-exit"]:has(>[data-program-loop-path]){
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:54px;height:0;min-height:0;padding:0;border:0;background:transparent
}

/* L1 Await owns this treatment in every consumer. No Atlas-page selector,
   lesson id or L2 name is needed to receive it. */
.vinci-authored-operation[data-vinci-l1="await"] {
  width:320px; max-width:100%; min-width:0; padding:14px;
  border:1px solid rgba(70,65,57,.13); border-radius:16px;
  background:#fff; box-shadow:0 3px 12px rgba(40,34,22,.035);
}
[data-vinci-l1="await"] > .vinci-authored-operation-header {
  margin-bottom:12px;
}
[data-vinci-l1="await"] > .vinci-await-flow {
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:10px; width:100%; min-width:0;
}
.vinci-await-operand {
  color:#494b49; font:500 12px/1.5 var(--mono,monospace);
  min-width:0; max-width:100%; white-space:pre-wrap; overflow-wrap:anywhere;
}
.vinci-await-source { margin-top:10px; max-width:100%; color:#7e827d; }
.vinci-await-source > summary {
  cursor:pointer; width:fit-content; font:400 11px/1.5 var(--sans,system-ui);
  text-transform:none; letter-spacing:0;
}
.vinci-await-source > code {
  display:block; margin-top:8px; padding:10px; border-radius:8px;
  background:#f8f9f8; color:#535852; font:400 11px/1.6 var(--mono,monospace);
  white-space:pre-wrap; overflow-wrap:anywhere; max-width:100%; box-sizing:border-box;
}
/* The IF assembly already owns its boundary. Avoid a second operation card
   around that same gate, both in the gallery and inside another function. */
.vinci-authored-operation[data-operation-kind="branch"]:has(> .vinci-decision-assembly) {
  border:0; background:transparent; box-shadow:none;
}

/* Shared clause and binding assemblies. Hosts only place these devices. */
.vinci-clause-step{position:relative;display:grid;gap:12px;place-items:center;box-sizing:border-box;padding:22px 16px;border:1px solid #e8e6e0;border-radius:16px}
.vinci-clause-step>.vinci-function-playback-step-kind{font:500 11px/1.3 var(--sans,system-ui);color:#73746d}
.vinci-clause-step>.vinci-function-playback-source-code{font:12px/1.5 var(--mono);max-width:100%;overflow-wrap:anywhere}
.vinci-clause-step>[data-function-step-port="input"]{position:absolute;top:-5px;left:50%;transform:translateX(-50%)}
.vinci-clause-step>[data-function-step-port="output"]{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%)}
.vinci-binding-seat{position:relative;display:grid;gap:12px;place-items:center;padding:18px;border:1px dashed #d9dfd8;border-radius:16px}
.vinci-binding-seat>.vinci-function-loop-local-scope-label{font:500 11px/1.3 var(--sans,system-ui);color:#7c7873}

/* Optional repeat continuation of the shared room. Both real exits live on
   its lower rim, independently of an Atlas/Function page or outer wrapper. */
.vinci-conditional-room[data-conditional-room-exits="repeat"]>[data-conditional-room-condition]{
 height:calc(100% - 20px)!important;pointer-events:none!important
}
.vinci-conditional-room[data-conditional-room-exits="repeat"]>[data-conditional-room-condition]>.vinci-control-diagram{
 position:static!important
}
.vinci-conditional-room[data-conditional-room-exits="repeat"] .vinci-function-condition-gate{pointer-events:auto!important}
.vinci-conditional-room[data-conditional-room-exits="repeat"][data-conditional-room]
 [data-conditional-room-path="false"]>.vinci-control-lane-line{
 top:auto!important;bottom:-5px!important;right:4px!important;pointer-events:auto!important
}
.vinci-conditional-room[data-conditional-room-exits="repeat"]>[data-conditional-room-repeat]{
 position:absolute!important;left:32px!important;bottom:0!important;top:auto!important;
 width:1px!important;height:1px!important;min-height:1px!important;margin:0!important;padding:0!important;
 visibility:visible!important;opacity:1!important;border:0!important;background:transparent!important;box-shadow:none!important;pointer-events:none!important
}
.vinci-conditional-room[data-conditional-room-exits="repeat"]>[data-conditional-room-repeat]>:not(.vinci-function-step-output-port){visibility:hidden!important}
.vinci-conditional-room[data-conditional-room-exits="repeat"]>[data-conditional-room-repeat]>.vinci-function-step-output-port{visibility:visible!important}

/* The editor belongs to the condition layer, above the room's body and routes.
   Raising only the inner gate cannot escape its condition stacking context. */
.vinci-conditional-room[data-vinci-assembly="conditional-room"]
 >[data-conditional-room-condition]:has([data-condition-expression-editor="true"]){
 z-index:30!important;pointer-events:auto!important
}
.vinci-conditional-room [data-condition-expression-editor="true"]{
 position:absolute!important;top:0;left:50%;transform:translateX(-50%);
 z-index:1;pointer-events:auto
}

/* A lexical arm whose only statement exits still owns a real scope. Keep its
   boundary readable without reserving an empty work area or wrapping its name. */
[data-function-scope-role="arm"] > .vinci-function-row-mark > .vinci-program-block-scope:not(:has([data-vinci-node-id])) {
  box-sizing:border-box;min-width:88px!important;min-height:30px!important;
  padding:8px 10px!important;
}
[data-function-scope-role="arm"] > .vinci-function-row-mark > .vinci-program-block-scope:not(:has([data-vinci-node-id])) > .vinci-program-scope-label {
  position:static!important;white-space:nowrap;transform:none!important;margin:0;
}

/* Invalid drafts retain the existing source-owned view, visibly marked. */
.semantic-source-draft-note{margin:0 0 16px;color:#8a6552;font:12px/1.5 var(--sans,system-ui);text-align:center}

/* Source relationship geometry follows the shared composition, not a route. */
[data-module-scope-folded="true"]{display:none!important}
.vinci-source-relationship-route[hidden]{display:none}
.vinci-program-definitions[data-source-class-layout="pair"]{display:grid;grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);place-items:center;justify-content:center;gap:10px;width:100%;max-width:500px;padding:28px 8px;box-sizing:border-box}
.vinci-program-definitions[data-source-class-layout]>.vinci-static-definition[data-definition-kind="class"]{width:100%;min-width:0}
.vinci-program-definitions[data-source-class-layout] .vinci-class-schema.vinci-class-blueprint-ball[data-state="expanded"]{width:min(190px,100%);min-height:190px;padding:28px 22px;box-sizing:border-box}
.vinci-program-definitions[data-source-class-layout="list"]{display:grid;justify-items:center;gap:10px;max-width:500px}
.vinci-program-definitions[data-source-class-layout="list"]>.vinci-source-relationship{margin-top:-5px;margin-bottom:12px}

.vinci-program-top-operations[data-source-module-layout="pair"]{display:grid;grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);align-items:center;gap:12px;width:100%;max-width:540px;padding:22px 4px;box-sizing:border-box}
.vinci-program-top-operations[data-source-module-layout="pair"]>[data-operation-id]{width:100%;min-width:0;box-sizing:border-box}
.vinci-source-relationship[data-relationship-orientation="vertical"]>.vinci-source-relationship-route{width:20px;height:48px}
.vinci-source-relationship[data-relationship-orientation="vertical"] .vinci-reference-tether{height:40px;transform:none}

/* Shared between-step connection. The owner supplies order and active state. */
.vinci-control-connection[data-control-connection-layout]{display:flex;flex-direction:column;align-items:center;flex:0 0 10px;width:10px;height:10px;color:rgba(122,74,8,.34)}
.vinci-control-connection[data-control-connection-layout]>svg.vinci-function-playback-line{display:block;position:static;width:1.5px;height:2px;min-height:1px;flex:1 1 0;background:none!important;overflow:visible}
.vinci-control-connection[data-control-connection-layout]>svg>.vinci-control-route{stroke:currentColor;stroke-width:1}
.vinci-control-connection[data-control-connection-layout]>.vinci-port-socket{position:static;box-sizing:border-box;width:6px;height:6px;flex:0 0 6px;border:1px solid currentColor;border-radius:50%;background:#fff;transform:none}
.vinci-control-connection[data-control-connection-layout][data-active="true"]{color:rgba(238,150,20,.8)}
.vinci-semantic-fragment>[data-refusal-source]{display:block;max-width:100%;margin-top:6px;font:12px/1.6 ui-monospace,SFMono-Regular,monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:#6b6259}

/* Keep method ownership below the name, clear of the centered entry label. */
.vinci-program-function-label:has(>.vmark-facts>[data-fact-kind="method-owner"]){
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
}

/* ── The script's call is a card ────────────────────────────────────────────
   The ƒ chip is the declaration's face on the rack and stays small. The
   script's own call is the one thing on the canvas — the activation the
   reader opens — and it reads at the size the closed cover used to: a card
   with the name in Georgia and "click to see more" at its edge. */
.vinci-program-script-calls>.vinci-script-call>.vinci-call-operation[data-call-mark]{
  /* 360, not the cover's 320: `ƒ converseUntil ( job ) ▸ click to see more`
     is 331px, and at 320 the arguments were being squeezed (min-width:0)
     to make it fit — in a 269px stage right under the name. Now the
     arguments keep their width and, where the line is still too long, the
     caption takes the next line. */
  width:min(100%,360px);min-height:64px;box-sizing:border-box;padding:14px 16px 14px 18px;gap:8px;
  border:1px solid rgba(21,17,13,.14);border-radius:18px;background:#fffefb;
  box-shadow:0 1px 2px rgba(44,35,20,.05),0 6px 18px rgba(44,35,20,.05);white-space:normal;flex-wrap:wrap
}
.vinci-program-script-calls>.vinci-script-call>.vinci-call-operation[data-call-mark]>.vinci-function-call-arguments{flex:0 0 auto;min-width:max-content}
.vinci-program-script-calls>.vinci-script-call>.vinci-call-operation[data-call-mark]::before{font-size:15px;opacity:.7}
.vinci-program-script-calls>.vinci-script-call>.vinci-call-operation[data-call-mark]>.vinci-call-mark-callee{
  font:500 19px/1.25 Georgia,"Iowan Old Style","Times New Roman",serif;letter-spacing:-.01em;color:#231a10;text-transform:none
}
.vinci-program-script-calls>.vinci-script-call>.vinci-call-operation[data-call-mark]>.vinci-function-call-arguments{margin-left:0}
.vinci-program-script-calls>.vinci-script-call>.vinci-call-operation[data-call-mark]>.vinci-call-mark-disclosure{
  margin-left:auto;padding-left:8px;font:700 6.5px/1 var(--mono);color:var(--gold-deep);letter-spacing:.02em;white-space:nowrap
}
.vinci-program-script-calls>.vinci-script-call>.vinci-call-operation[data-call-mark]>.vinci-call-mark-disclosure::after{content:" click to see more"}
.vinci-program-script-calls>.vinci-script-call:has(>.vinci-program-function[data-scope-view="open"])>.vinci-call-operation[data-call-mark]>.vinci-call-mark-disclosure::after{content:" click to see less"}
/* Opened, the card IS the L1 function: the borrowed shell stands where the
   card stood — its own name, entry port and dock, body, exit port and return,
   exactly as an open function looks anywhere else — and the closed card
   steps out of the way. The shell's own "click to see less" sends it home.
   The seat sizes to its contents up to the open cap, like any open function. */
.vinci-program-script-calls>.vinci-script-call:has(>.vinci-program-function[data-scope-view="open"]){
  width:fit-content;min-width:min(100%,420px);max-width:min(100%,760px);box-sizing:border-box
}
.vinci-program-script-calls>.vinci-script-call:has(>.vinci-program-function[data-scope-view="open"])>.vinci-call-operation[data-call-mark]{
  display:none
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-script-calls>.vinci-script-call>.vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"]{
  width:100%;min-width:0;max-width:100%;box-sizing:border-box
}
/* ── A borrowed body takes the room it is given ──────────────────────────────
   Opened inside a binding pill, converseUntil shrink-wrapped to 285px and
   stacked its six parameters one per line: the generic open-function rule
   (fit-content) outranked the seat's "fill the seat". Inside a seat the body
   fills it, the pill fills its row, the row fills the frame, and the frame
   that holds them grows to the open cap — so an inner activation reads at
   the same width as the outer one. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-value-pill-slot>.vinci-program-function[data-function-scope-navigator="true"][data-scope-view="open"]{
  width:100%;min-width:0;max-width:100%;box-sizing:border-box
}
.vinci-function-written-line:has(>.vinci-function-row-mark>.vinci-value-pill[data-value-slot]>.vinci-value-pill-slot>.vinci-program-function[data-scope-view="open"]),
.vinci-function-row-mark:has(>.vinci-value-pill[data-value-slot]>.vinci-value-pill-slot>.vinci-program-function[data-scope-view="open"]){
  width:100%;max-width:100%
}
.vinci-function-row-mark>.vinci-value-pill[data-value-slot]:has(>.vinci-value-pill-slot>.vinci-program-function[data-scope-view="open"]){
  width:100%;max-width:100%
}
.vinci-program-script-calls>.vinci-script-call:has(.vinci-value-pill-slot>.vinci-program-function[data-scope-view="open"]){
  width:min(100%,760px)
}
/* The borrowed dock wraps to the width it now has, not to a 280px column. */
.vinci-value-pill-slot>.vinci-program-function[data-scope-view="open"] .vinci-function-parameter-dock{max-width:min(100%,640px)}
/* ── No lanes at rest ────────────────────────────────────────────────────────
   The IF/loop control routes are an SVG overlay on the whole shell; with the
   body scrolling inside a long function, lanes for rows that are scrolled
   away still drew across it and past its foot, down over `return:`. At rest
   the marks are the picture (rule 5); the routes belong to Flow, which stamps
   them when a run lands on the shell. A completed captured route remains
   visible until Reset removes its selection; clearing the travelling beat
   alone must not hide the outcome the reader just observed. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]:not([data-function-play-state]):not([data-witness-playback-stage]):not([data-function-beat-active="true"]):not(:has(>.vinci-function-control-route-svg [data-function-path-route-geometry]:is([data-state="active"],[data-state="observed"])))
  >.vinci-function-control-route-svg{
  visibility:hidden
}

/* ── F · the run, drawn on ───────────────────────────────────────────────────
   A live run stamps the same marks: the frame that is running or awaiting is
   lit, the call mark that runs it is lit, a one-line note says what it is
   waiting for, and one marker travels from the Ball to the entry port of the
   function that received its value. Nothing is copied; at rest nothing of
   this is painted. */
.vinci-ball-ghost{
  display:block;width:32px;height:32px;margin:14px auto;border:1.5px dashed rgba(122,74,8,.35);border-radius:50%;opacity:.7
}
/* The Ball on loan sits in the parameter seat that received it: the seat's
   pill says `work ← job`, the Ball beside it IS job. */
.vinci-function-parameter-slot>.vinci-ball-seat{
  display:inline-grid;width:auto;min-height:0;margin:0 0 0 4px;vertical-align:middle;gap:0
}
.vinci-function-parameter-slot>.vinci-ball-seat>.vinci-program-input-boundary,
.vinci-function-parameter-slot>.vinci-ball-seat .vinci-program-input-tether{display:none}
.vinci-function-parameter-slot>.vinci-ball-seat .vf-ballwrap{margin:0}
.vinci-function-parameter-slot{display:inline-flex;align-items:center;gap:4px}
@media (prefers-reduced-motion:reduce){.vinci-ball-seat{transition:none!important}}
.vinci-program-function[data-runtime-state="running"],
.vinci-program-function[data-runtime-state="awaiting"],
.vinci-program-function[data-runtime-state="waiting"],
.vinci-program-function[data-runtime-state="suspended"]{
  border-color:rgba(233,161,42,.7)!important;box-shadow:0 0 0 3px rgba(233,161,42,.16),0 6px 18px rgba(44,35,20,.08)!important
}
.vinci-program-function[data-runtime-state="done"]{border-color:rgba(152,95,11,.45)!important}
.vinci-program-function[data-runtime-state="error"]{border-color:rgba(190,60,40,.6)!important}
.vinci-call-operation[data-call-mark][data-function-beat-active="true"]{
  border-color:rgba(233,161,42,.8);background:#fff1d6;box-shadow:0 0 0 3px rgba(233,161,42,.18)
}
.vinci-run-status{
  position:absolute;left:14px;top:34px;z-index:21;max-width:calc(100% - 28px);padding:3px 8px;border-radius:999px;
  background:#fff1d6;color:#7a4a08;font:600 9px/1.3 var(--sans, system-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.vinci-program-function[data-scope-view="collapsed"]>.vinci-run-status{display:none}
.vinci-run-status[data-runtime-state="done"]{display:none}

/* Steps and blocks — 2026-09-12 */
/* ── Steps, one after the other; blocks that open like a function ───────────
   Opened, a long function is a column of stations on one line. The line is
   the sequence connector that already sits before every statement row
   (control-connection): at rest it is the 10px hairline between two
   consecutive stations and nothing else — no dots, no numbers, no stems.
   The list gap is 0, so the segment IS the rhythm. A connector a run lights
   keeps its lit rule; the typed-step ports a run shows sit exactly on the
   segment's two ends.

   An IF / loop / switch row is a block. Closed, it is the script call card's
   block to the pixel — the keyword in the ƒ's seat, the real condition pill
   as the identity, `N steps ▸` at the right — and the whole card opens on a
   click, as the ƒ chip does. Open, the same card grows into a frame that
   takes the open shell's face and is its own size container (so the mark
   clamps written in cqw finally clamp to the lane), with its steps inside on
   the same line, at the same centre. Only ▾ folds it back; Escape with focus
   inside folds it before it steps out of the function.

   Every rule is scoped under the navigator's open written-order shell
   (rule 5); the L2 surface never mints data-function-scope-navigator.
   Aliases used in the comments: G = the canonical-surface guard the rest-
   state rules above wear; NAV = the navigator's open shell; ROW = a row
   that carries data-function-fold; OPEN = open by the reader or by a run
   landing inside it; CLOSED = the rest. */

/* ═══ 1 · THE LINE — one hairline, only between stations ═══════════════════ */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-order{width:100%;gap:0}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  :is(.vinci-function-control-bodies,.vinci-function-control-body,.vinci-function-scope-body){gap:0}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]:not([data-witness-playback-stage])
  .vinci-function-playback-connector[data-control-connection-layout="sequence"]:not([data-active="true"]){
  display:block;flex:none;width:1px;height:10px;margin:0;padding:0;border:0;background:rgba(122,74,8,.26)
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]:not([data-witness-playback-stage])
  .vinci-function-playback-connector[data-control-connection-layout="sequence"]:not([data-active="true"])>*{display:none}
/* a part lives inside its station; side-by-side arms are not one after the other */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  :is(.vinci-function-row-parts,.vinci-function-branch-fan) .vinci-function-playback-connector[data-control-connection-layout="sequence"]:not([data-active="true"]){display:none}
/* a station is exactly its mark: no 72px seat around a 36px rail, no room
   above an Await for a port that is hidden at rest */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-row-mark>.vinci-rail-seat{min-height:0}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-typed-step][data-function-await-step]:not(.vinci-clause-step):not([data-function-if-child-step-row]):not([data-current="true"]):not([data-receiving="true"]){padding-top:0}
/* Preserve the row's authored intrinsic width, and centre the row itself on
   its sequence lane. Centring only its mark still leaves a small binding at
   the start of a sequence whose items are stretched. Branch cards and
   expression parts own separate lanes. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line:not([data-function-fold]):not([data-function-expression-part]):not([data-function-if-child-step-row]):not([data-branch-step-card]){
  justify-self:center;align-self:center
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]:not([data-witness-playback-stage])
  .vinci-function-playback-connector[data-control-connection-layout="sequence"]{
  justify-self:center;align-self:center
}
/* a mark narrower than its row is centred on the line (the idiom an opened call already uses) */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line:not([data-function-fold]):not([data-function-expression-part])>.vinci-function-row-mark{
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;width:100%;min-width:0;box-sizing:border-box
}
/* the arrival stub is route furniture and sleeps with the routes at rest */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]:not([data-function-play-state]):not([data-witness-playback-stage]):not([data-function-beat-active="true"])
  .vinci-function-source-row[data-function-path-arrival-ids]::before{display:none}

/* ═══ 2 · THE BLOCK CARD — closed, the script call card; open, the same card grown ═══ */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]{
  position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:10px;row-gap:4px;
  width:min(100%,360px);max-width:100%;min-height:64px;box-sizing:border-box;padding:14px 16px 14px 18px;
  border:1px solid rgba(21,17,13,.14);border-radius:18px;background:#fffefb;
  box-shadow:0 1px 2px rgba(44,35,20,.05),0 6px 18px rgba(44,35,20,.05)
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold="closed"]:not(:has(>.vinci-function-control-bodies [data-current="true"])){cursor:pointer}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold="closed"]:not(:has(>.vinci-function-control-bodies [data-current="true"])):hover{
  border-color:rgba(122,74,8,.55);box-shadow:0 2px 6px rgba(122,74,8,.12)
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold="closed"]:not(:has(>.vinci-function-control-bodies [data-current="true"])):hover>.vinci-function-fold{color:var(--gold-deep)}
/* the band: the call card's own wrap rule — glyph · identity · disclosure at
   the right; when the line is too long the disclosure takes the next line */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-row-mark{order:0;flex:0 1 auto;width:auto;min-width:0;max-width:100%}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>:is(.vinci-function-playback-step-kind,.vinci-function-playback-source-code){order:2;flex:1 0 100%}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-row-parts{order:3;flex:1 0 100%;width:100%;margin:0}
/* the keyword · the real condition pill, on one line: the mark's host chain
   is emptied of chrome, not removed (the one !important beats 2602's grid) */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-row-mark>.vinci-control-operation{
  position:static;display:flex!important;flex-wrap:nowrap;align-items:flex-start;gap:9px;width:auto;max-width:100%;min-width:0;
  padding:0;border:0;border-radius:0;background:transparent;box-shadow:none
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-row-mark>.vinci-control-operation>.vinci-authored-operation-header{
  display:flex;flex:0 0 auto;align-items:center;gap:8px;min-height:34px;min-width:0
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-row-mark>.vinci-control-operation>.vinci-authored-operation-header>b{
  flex:0 0 auto;min-width:0;max-width:none;overflow:visible;
  font:italic 600 15px/1 Georgia,"Iowan Old Style","Times New Roman",serif;
  letter-spacing:0;text-transform:lowercase;color:var(--gold-deep);opacity:.85
}
/* the pill's `?` is that fact; it returns as soon as data-unknown goes */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-row-mark>.vinci-control-operation>.vinci-authored-operation-header>small[data-fact-kind="execution-evidence"][data-unknown="true"]{display:none}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-row-mark>.vinci-control-operation>.vinci-control-diagram{
  position:static;flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;gap:6px 8px;
  width:auto;min-width:0;max-width:100%;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold] .vinci-control-diagram>.vinci-control-gate{
  display:flex;flex:0 1 auto;align-items:center;justify-content:flex-start;width:auto;height:auto;min-width:0;max-width:100%;min-height:0;
  padding:0;transform:none;border:0;border-radius:0;background:transparent;box-shadow:none
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold] .vinci-control-gate>.vinci-function-condition-evaluation-pill{
  flex:0 1 auto;width:auto;min-width:0;max-width:100%;min-height:34px;padding:7px 11px;font:500 12px/1.4 var(--sans,system-ui);white-space:normal
}
/* the pill's editor opens in the pill's place and takes the pill's room: its
   own `max-width:min(100%,680px)` lost the 100% to the mark clamp above
   (written for a Change mark), and the 545px editor ran 200px past the
   shell; inside the card it wraps its parts instead — the room decides */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold] .vinci-control-gate .vinci-value-pill-editor{
  flex:0 1 auto;min-width:0;max-width:100%
}
/* a break opportunity at each comparison operator: `!==` wraps at the operator, never inside a name */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold] .vinci-function-condition-operator::before,
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold] .vinci-function-condition-operator::after{content:"\200B"}
/* loop only: a second quiet line under the pill */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold] .vinci-control-diagram>.vinci-counted-loop-facts{
  flex:1 0 100%;order:9;display:flex;flex-wrap:wrap;gap:4px 14px;padding-left:11px;color:var(--ink-mute);font:500 9px/1.3 var(--mono)
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold] .vinci-control-diagram>.vinci-counted-loop-facts>.vinci-counted-loop-update{color:var(--ink-mute)}
/* a for…of / for…in mark wears the collection ring (loop-boundary, CSS ~3460,
   with !important width/margin/padding and an absolute header). In the card
   the CARD is the loop's border: the ring's chrome goes, the keyword returns
   to the ƒ seat, the iterable's pill is the identity — `loop ( work.items: ? )` */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-row-mark>.vinci-control-operation[data-atlas-loop-ring="true"]{
  width:auto!important;min-height:0;margin:0!important;padding:0!important;place-items:start!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-row-mark>.vinci-control-operation[data-atlas-loop-ring="true"]>.vinci-authored-operation-header{
  position:static;top:auto;left:auto;right:auto
}
/* ports: measurable, unpainted; on the card's own edges (the row is the
   containing block). A lit lane returns at the card's foot, as `return:`
   hangs under the shell's. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold] .vinci-control-diagram>.vinci-decision-entry{
  position:absolute;top:-5px;left:50%;transform:translateX(-50%);z-index:2;visibility:hidden
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold] .vinci-control-diagram>.vinci-control-lanes{
  position:absolute;left:0;right:0;bottom:-5px;display:flex;justify-content:space-around;align-items:flex-end;gap:16px;
  width:100%;min-width:0;padding:0 12px;box-sizing:border-box;visibility:hidden
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold] .vinci-control-diagram>.vinci-control-lanes:has(.vinci-control-lane[data-state]:not([data-state="unlit"])){visibility:visible}
/* the disclosure: the fold button, in the shell's scope-control register */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-fold{
  order:1;flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;gap:5px;
  min-height:21px;margin:0 -6px 0 auto;padding:4px 6px;border:0;border-radius:999px;background:transparent;
  color:var(--ink-mute);font:500 9px/1.2 var(--mono);letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-fold:hover,
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-fold:focus-visible{
  outline:none;border:0;color:var(--gold-deep);background:rgba(255,246,229,.98);box-shadow:0 0 0 2px rgba(238,150,20,.15)
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-fold>.vinci-function-fold-what{display:none}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-fold>.vinci-function-fold-count{color:inherit;font:inherit}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-fold>.vinci-function-fold-tri{color:var(--gold-deep);font:700 9px/1 var(--mono);transform:none}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line:is([data-function-fold="open"],[data-function-fold="closed"]:has(>.vinci-function-control-bodies [data-current="true"]))>.vinci-function-fold>.vinci-function-fold-tri{transform:rotate(90deg)}

/* ═══ 3 · THE FRAME — open, the card grows; inside it, three frames become none ═══ */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line:is([data-function-fold="open"],[data-function-fold="closed"]:has(>.vinci-function-control-bodies [data-current="true"])){
  width:100%;max-width:100%;padding:14px 18px 14px 18px;cursor:default;container-type:inline-size;
  box-shadow:0 1px 2px rgba(44,35,20,.05),0 8px 24px rgba(44,35,20,.06)
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-control-bodies{
  order:4;flex:1 0 100%;display:grid;grid-template-columns:minmax(0,1fr);gap:0;width:100%;max-width:100%;margin-top:8px
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-control-bodies>.vinci-function-control-body{
  width:100%;max-width:100%;padding:0;border:0;gap:0;place-items:center;grid-template-columns:minmax(0,1fr)
}
/* the keyword names a lone path; two arms or cases keep their captions */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-control-bodies>.vinci-function-control-body:only-child>.vinci-function-control-body-label{display:none}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-control-bodies>.vinci-function-control-body>.vinci-function-control-body-label{
  justify-self:center;margin:6px 0 2px;color:var(--ink-mute);font:600 9px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase
}
/* the arm's block scope keeps its node, its id and its locals; the frame IS the block */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-control-bodies>.vinci-function-control-body>[data-function-scope-role="arm"],
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-control-bodies>.vinci-function-control-body>[data-function-scope-role="arm"]>.vinci-function-row-mark{width:100%;max-width:100%;min-width:0}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold] [data-function-scope-role="arm"]>.vinci-function-row-mark>.vinci-program-block-scope{
  width:100%;min-width:0;max-width:100%;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold] [data-function-scope-role="arm"]>.vinci-function-row-mark>.vinci-program-block-scope>.vinci-program-scope-label{display:none}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold] [data-function-scope-role="arm"]>.vinci-function-row-mark>.vinci-program-block-scope>.vinci-program-definitions{
  min-height:0;gap:10px;grid-template-columns:minmax(0,1fr);place-items:center
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold] [data-function-scope-role="arm"]>.vinci-function-row-mark>.vinci-program-block-scope>:is(.vinci-program-definitions,.vinci-program-block-scopes):not(:has(*)){display:none}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold] [data-function-scope-role="arm"]>.vinci-function-row-mark>.vinci-program-block-scope>.vinci-function-scope-body{
  margin-top:0;padding:0;border:0;gap:0;grid-template-columns:minmax(0,1fr);place-items:center
}
/* nothing inside sets a frame's width */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold] .vinci-function-row-mark>:is(.vinci-authored-operation,.vinci-control-operation){max-width:100%}

/* ═══ 4 · the fold itself: closed bodies are gone; a run landing inside reopens them ═══ */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"] .vinci-function-written-line[data-function-fold="closed"]>.vinci-function-control-bodies{display:none!important}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"] .vinci-function-written-line[data-function-fold="closed"]:has(>.vinci-function-control-bodies [data-current="true"])>.vinci-function-control-bodies{display:grid!important}

/* ═══ 5 · the script call card gets the hover the chip has (3611 at (0,4,0) was beating 150) ═══ */
.vinci-program-script-calls>.vinci-script-call>.vinci-call-operation[data-call-mark]:is(:hover,:focus-visible){
  outline:none;border-color:rgba(122,74,8,.55);box-shadow:0 2px 6px rgba(122,74,8,.12)
}

/* ═══ 7 · STATIONS — every step is its one line at rest (2026-09-12, second look) ═══
   The Await card, the builtin-call card and the throw card were the rows that
   still broke "one after the other": 187px of header, `agent(…) → ?`, an
   Expression disclosure and a caption, for a step whose whole meaning is the
   pill already inside it — `question: await agent(`…`)`. At rest, in the
   navigator's open shell, an authored operation shows only what names it:
   the real binding pill when it binds (the same pill a `read` or a `compute`
   row is), else its own header line as a pill — name plus arguments, one
   line, clamped. The evidence chrome (`Unknown until run`, an outcome that
   is still `?`) waits for the run: the step a run is on ([data-current]) and
   an outcome that has a value show in full, exactly as before. Nothing is
   cloned; nothing is removed from the DOM. */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line:not([data-current="true"]):not([data-function-fold])>.vinci-function-row-mark>.vinci-authored-operation:not([data-vinci-l1="await"]){
  display:inline-grid!important;justify-items:center;gap:0;width:auto;min-width:0;max-width:100%;padding:0;
  border:0;border-radius:0;background:transparent;box-shadow:none
}
/* the caption and the empty outcome wait for the run */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line:not([data-current="true"]):not([data-function-fold])>.vinci-function-row-mark>.vinci-authored-operation:not([data-vinci-l1="await"])>.vinci-authored-operation-header>small[data-fact-kind="execution-evidence"][data-unknown="true"]{display:none}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line:not([data-current="true"]):not([data-function-fold])>.vinci-function-row-mark>.vinci-authored-operation:not([data-vinci-l1="await"]) .vinci-expression-outcome:not([data-certainty="runtime-observed"][data-unknown="false"]):has(.vinci-value-pill-value[data-kind="unknown"]){display:none}
/* bound: the binding pill is the station */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line:not([data-current="true"]):not([data-function-fold])>.vinci-function-row-mark>.vinci-authored-operation:not([data-vinci-l1="await"]):has(>.vinci-operation-result-binding)>:is(.vinci-authored-operation-header,.vinci-expression-row,details.vinci-await-source){display:none}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line:not([data-current="true"]):not([data-function-fold])>.vinci-function-row-mark>.vinci-authored-operation:not([data-vinci-l1="await"])>.vinci-operation-result-binding{justify-content:center;margin:0;padding:0;border:0;max-width:100%}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line:not([data-current="true"]):not([data-function-fold])>.vinci-function-row-mark>.vinci-authored-operation:not([data-vinci-l1="await"])>.vinci-operation-result-binding>.vinci-operation-result-arrow{display:none}
/* unbound (a call for its effect, a throw): the header line is the station, as a pill */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line:not([data-current="true"]):not([data-function-fold])>.vinci-function-row-mark>.vinci-authored-operation:not([data-vinci-l1="await"]):not(:has(>.vinci-operation-result-binding)){
  display:inline-flex!important;flex-wrap:nowrap;align-items:baseline;justify-content:center;gap:0 8px;
  padding:8px 16px;border:1.5px solid rgba(122,74,8,.28);border-radius:999px;background:#fff;
  box-shadow:0 1px 2px rgba(122,74,8,.06)
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line:not([data-current="true"]):not([data-function-fold])>.vinci-function-row-mark>.vinci-authored-operation:not([data-vinci-l1="await"]):not(:has(>.vinci-operation-result-binding))[data-operation-kind="abrupt-edge"]{border-style:dashed;border-color:rgba(160,64,40,.4)}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line:not([data-current="true"]):not([data-function-fold])>.vinci-function-row-mark>.vinci-authored-operation:not([data-vinci-l1="await"]):not(:has(>.vinci-operation-result-binding))>.vinci-authored-operation-header{display:contents}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line:not([data-current="true"]):not([data-function-fold])>.vinci-function-row-mark>.vinci-authored-operation:not([data-vinci-l1="await"]):not(:has(>.vinci-operation-result-binding))>.vinci-authored-operation-header>b{
  flex:0 0 auto;min-width:0;max-width:min(100%,210px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 12px/1.5 var(--sans)
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line:not([data-current="true"]):not([data-function-fold])>.vinci-function-row-mark>.vinci-authored-operation:not([data-vinci-l1="await"]):not(:has(>.vinci-operation-result-binding))>.vinci-expression-row{display:contents}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line:not([data-current="true"]):not([data-function-fold])>.vinci-function-row-mark>.vinci-authored-operation:not([data-vinci-l1="await"]):not(:has(>.vinci-operation-result-binding))>.vinci-expression-row>:is(.vinci-expression-part,.vinci-await-operand){
  display:block;flex:0 1 auto;min-width:48px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink-mute);font:400 10px/1.5 var(--mono)
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line:not([data-current="true"]):not([data-function-fold])>.vinci-function-row-mark>.vinci-authored-operation:not([data-vinci-l1="await"]):not(:has(>.vinci-operation-result-binding))>details.vinci-await-source{display:none}
/* the parts line: quiet, in the fold's own hand; gone inside a closed card */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line>details.vinci-function-row-parts>summary{
  width:fit-content;margin:0 auto;padding:1px 6px;font-size:0;line-height:0;color:var(--ink-mute);background:none
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line>details.vinci-function-row-parts>summary::before{display:none}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line>details.vinci-function-row-parts>summary::after{
  content:attr(data-function-row-parts-label);font:500 9px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line>details.vinci-function-row-parts[open]>summary::after{content:attr(data-function-row-parts-label-open)}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line>details.vinci-function-row-parts>summary:hover{color:var(--gold-deep);background:none}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold="closed"]>details.vinci-function-row-parts{display:none}

/* An opened Await operand owns a Function boundary, not a pill diameter. */
.vinci-function-source-row:has(.vinci-await-source > .vinci-program-function[data-function-borrowed-by]),
.vinci-function-written-line:has(.vinci-await-source > .vinci-program-function[data-function-borrowed-by]) { width:100%; align-self:stretch; }
.vinci-advanced-operation[data-vinci-l1="await"]:has(.vinci-await-source > .vinci-program-function[data-function-borrowed-by]) {
 display:block!important; width:100%!important; max-width:none!important; border-radius:20px!important; box-sizing:border-box;
}
.vinci-await-source:has(> .vinci-program-function[data-function-borrowed-by]) {display:block!important; width:100%; min-width:0;box-sizing:border-box;}
.vinci-await-source > .vinci-program-function[data-function-borrowed-by] {display:block;width:100%!important;min-width:0!important;max-width:none!important;box-sizing:border-box;}

/* Awaited direct Calls retain the Call L1 as their one visible instruction.
   Keep the native outcome seat for runtime handoff, but show it only while
   an observed value occupies it. No future binding or duplicate reference. */
.vinci-authored-operation[data-vinci-l1="await"][data-await-presentation="call"] {
  display:flex;flex-direction:column;align-items:center;width:max-content;max-width:100%;
  padding:8px 0;border:0;background:transparent;box-shadow:none;gap:8px;
}
[data-await-presentation="call"] > .vinci-authored-operation-header {order:0;margin:0;font-size:11px;gap:8px;}
[data-await-presentation="call"] > .vinci-authored-operation-header [data-unknown="true"] {display:none;}
[data-await-presentation="call"] > .vinci-await-source {order:1;display:block;margin:0;max-width:100%;}
[data-await-presentation="call"] > .vinci-await-source > :is(summary,code) {display:none;}
[data-await-presentation="call"] > .vinci-await-flow {order:2;}
[data-await-presentation="call"] > .vinci-await-flow > .vinci-await-operand {display:none;}
[data-await-presentation="call"] > .vinci-await-flow:not(:has([data-value-slot])) {display:none;}
[data-await-presentation="call"] > .vinci-await-flow .vinci-expression-outcome::before {display:none;}
[data-await-presentation="call"] > .vinci-await-flow .vinci-expression-result[data-value-slot] {border:0;box-shadow:none;background:transparent;}

[data-await-presentation="call"] {align-self:center;margin-inline:auto;}
[data-await-presentation="call"] > .vinci-authored-operation-header {justify-content:center;}
.vinci-program-input-boundary {gap:6px;padding:8px;}
.vinci-program-input-socket {display:block;width:28px;height:28px;border:1px dashed #c9bfad;border-radius:50%;}
.vinci-program-input-name {font:12px var(--mono,monospace);color:#302c26;}
.vinci-program-input-boundary > .vinci-program-input-marker {border:0;background:none;color:#8b7f6f;font-size:8px;}
.vinci-program-input-boundary > .vinci-program-input-tether {display:none;}
[data-ball-seat]:has(> .vinci-program-input-boundary) > .vf-ballwrap {display:none;}
.vinci-program-input-boundary[data-input-arrived=true]:has(> .vf-ballwrap) > :is(.vinci-program-input-socket,.vinci-program-input-name) {display:none;}

.vinci-function-row-mark:has(> [data-await-presentation="call"]) {display:flex;justify-content:center;width:100%;}
.vinci-function-written-line:has(> .vinci-function-row-mark > [data-await-presentation="call"]) {align-self:stretch;width:100%;}

/* ── L1 Await · 2026-09-17 ── */
/* The expression form of Await (`await <expr>`, not an awaited direct Call)
   is one step in the Call family: a white card on the Function's centre line,
   an entry socket above and an exit socket below, the L1's name as a chip,
   the operand → result flow unchanged, `Unknown until run` as a quiet note,
   and the Expression disclosure as a fold pill. Only the drawing changes;
   the awaited-Call form ([data-await-presentation="call"]) is untouched. */
.vinci-authored-operation[data-vinci-l1="await"][data-await-form="expression"]{
  position:relative;overflow:visible;width:fit-content;min-width:min(320px,100%);max-width:min(600px,100%);
  margin:6px auto;padding:14px 18px;justify-self:center;box-sizing:border-box;
  grid-template-columns:minmax(0,1fr);justify-content:stretch;justify-items:stretch;
  border:1px solid #e0e3dd;border-radius:18px;background:#fff;
  box-shadow:0 1px 3px rgba(32,36,28,.016),0 8px 26px -10px rgba(32,36,28,.12);
}
/* on the Function's centre line: the written line is max-content wide inside a
   stretched flex column, so it must centre itself rather than sit at the start */
.vinci-function-written-line:has(> .vinci-function-row-mark > [data-vinci-l1="await"][data-await-form="expression"]){
  align-self:center;margin-inline:auto;overflow:visible;
}
.vinci-function-row-mark:has(> [data-vinci-l1="await"][data-await-form="expression"]){overflow:visible;}
/* the sockets: the port atom, positioned by this consumer on the card's edge */
[data-vinci-l1="await"][data-await-form="expression"] > .vinci-await-port{
  position:absolute;left:50%;z-index:5;transform:translateX(-50%);margin:0;
  --vinci-port-size:10px;--vinci-port-edge-width:1px;--vinci-port-edge:rgba(122,74,8,.42);
  --vinci-port-fill:#fff;--vinci-port-shadow:0 0 0 4px #fff;
}
[data-vinci-l1="await"][data-await-form="expression"] > .vinci-await-port[data-await-port="entry"]{top:-5px;}
[data-vinci-l1="await"][data-await-form="expression"] > .vinci-await-port[data-await-port="exit"]{bottom:-5px;}
/* header: the chip top-left, the evidence note top-right */
[data-vinci-l1="await"][data-await-form="expression"] > .vinci-authored-operation-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;justify-self:stretch;margin:0 0 12px;
}
[data-vinci-l1="await"][data-await-form="expression"] > .vinci-authored-operation-header > b{
  display:inline-block;flex:0 0 auto;padding:4px 7px;border-radius:6px;
  background:#fbf3e4;color:#8a5c21;font:650 9.5px/1 var(--mono,'JetBrains Mono',ui-monospace,monospace);
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
}
[data-vinci-l1="await"][data-await-form="expression"] > .vinci-authored-operation-header > small[data-vinci-foundation="owner-qualifier"]{
  flex:0 1 auto;margin-left:auto;padding:0;border:0;background:none;
  color:#8a9199;font:400 10.5px/1.4 var(--sans,system-ui,sans-serif);letter-spacing:0;text-transform:none;text-align:right;
}
/* the flow row stays as it is (operand → result pill; `?` stays dashed) */
[data-vinci-l1="await"][data-await-form="expression"] > .vinci-await-flow{width:100%;justify-self:stretch;}
/* the Expression disclosure: a quiet fold pill that still opens the source */
[data-vinci-l1="await"][data-await-form="expression"] > .vinci-await-source{margin-top:10px;justify-self:start;width:100%;}
[data-vinci-l1="await"][data-await-form="expression"] > .vinci-await-source > summary{
  display:inline-flex;align-items:center;gap:7px;width:fit-content;max-width:100%;
  padding:3px 10px 3px 9px;border:1px solid #ebe7df;border-radius:999px;background:#fff;
  color:#8a9199;font:400 10.5px/1.4 var(--sans,system-ui,sans-serif);letter-spacing:0;text-transform:none;
  list-style:none;cursor:pointer;
}
[data-vinci-l1="await"][data-await-form="expression"] > .vinci-await-source > summary::-webkit-details-marker{display:none;}
[data-vinci-l1="await"][data-await-form="expression"] > .vinci-await-source > summary::before{
  content:'';display:inline-block;box-sizing:border-box;width:5px;height:5px;flex:none;
  border:solid #96938d;border-width:1px 1px 0 0;transform:rotate(45deg);transition:transform .15s;
}
[data-vinci-l1="await"][data-await-form="expression"] > .vinci-await-source[open] > summary::before{transform:rotate(135deg);}
/* ── end L1 Await ── */

/* ── L1 Loop · 2026-09-17 ── */
/* A Loop in the written order is one Step of its Function, in the family of
   the Call row: a white card on the Function's centre line, an entry socket
   above and an exit socket below, the L1's name as a chip beside its
   continue-test pill, the counted facts as one quiet line under the pill,
   and the fold as a quiet pill in the card's corner. The body keeps the
   renderer's enclosure. Only the drawing changes: the row, its gate, its
   facts and its fold are the same nodes as before; the sockets are the port
   atom, placed on the card's edge by this row (data-function-loop-step). */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold][data-function-loop-step="card"]{
  position:relative;overflow:visible;align-self:center;margin-inline:auto;
  width:fit-content;min-width:min(100%,400px);max-width:min(100%,600px);box-sizing:border-box;
  padding:14px 18px;row-gap:0;
  border:1px solid #e0e3dd;border-radius:18px;background:#fff;
  box-shadow:0 1px 3px rgba(32,36,28,.016),0 8px 26px -10px rgba(32,36,28,.12)
}
/* open, the same card grows to the shell's width; the family's shadow stays */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold][data-function-loop-step="card"]:is([data-function-fold="open"],[data-function-fold="closed"]:has(>.vinci-function-control-bodies [data-current="true"])){
  width:100%;max-width:100%;padding:14px 18px;container-type:normal;
  box-shadow:0 1px 3px rgba(32,36,28,.016),0 8px 26px -10px rgba(32,36,28,.12)
}
/* the sockets: the port atom on the card's edge at its centre line */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold][data-function-loop-step="card"]>.vinci-loop-step-socket{
  position:absolute;left:50%;z-index:5;transform:translateX(-50%);margin:0;order:0;
  --vinci-port-size:10px;--vinci-port-edge-width:1px;--vinci-port-edge:rgba(122,74,8,.42);
  --vinci-port-fill:#fff;--vinci-port-shadow:0 0 0 4px #fff
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold][data-function-loop-step="card"]>.vinci-loop-step-socket[data-function-loop-step-port="entry"]{top:-5px}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold][data-function-loop-step="card"]>.vinci-loop-step-socket[data-function-loop-step-port="exit"]{bottom:-5px}
/* the mark takes the card's width; the keyword header goes — the chip names
   the L1 — and the pill stays on the Function's centre line, as the IF card's
   does, with the facts line under it (the gate's grid: vinci-function-universal.css) */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold][data-function-loop-step="card"]>.vinci-function-row-mark{
  order:0;flex:1 0 100%;width:100%;max-width:100%;min-width:0;padding-right:0;box-sizing:border-box;overflow:visible
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold][data-function-loop-step="card"]>.vinci-function-row-mark>.vinci-control-operation{
  display:flex!important;flex-direction:column;align-items:stretch;gap:0;width:100%;max-width:100%
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold][data-function-loop-step="card"]>.vinci-function-row-mark>.vinci-control-operation>.vinci-authored-operation-header{display:none}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold][data-function-loop-step="card"]>.vinci-function-row-mark>.vinci-control-operation>.vinci-control-diagram{
  width:100%;max-width:100%;justify-content:center;align-items:center;row-gap:8px;column-gap:12px
}
/* the counted facts: one quiet line — start · let i = 0 · loop back · i++ */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold][data-function-loop-step="card"] .vinci-control-diagram>.vinci-counted-loop-facts{
  flex:1 0 100%;order:9;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 0;
  min-width:0;max-width:100%;margin:0;padding:0;text-align:center;
  color:#8a9199;font:500 11px/1.4 var(--sans,-apple-system,system-ui,sans-serif);letter-spacing:0;text-transform:none
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold][data-function-loop-step="card"] .vinci-control-diagram>.vinci-counted-loop-facts>small{
  display:inline;flex:0 1 auto;min-width:0;overflow:visible;white-space:normal;text-overflow:clip;font:inherit;color:inherit;letter-spacing:0;text-transform:none
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold][data-function-loop-step="card"] .vinci-control-diagram>.vinci-counted-loop-facts>small+small::before{content:"·";margin:0 .55em}
/* the fold: a quiet pill in the card's top-right corner */
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold][data-function-loop-step="card"]>.vinci-function-fold{
  position:absolute;top:12px;right:12px;z-index:4;order:1;margin:0;
  display:inline-flex;align-items:center;gap:5px;min-height:0;padding:4px 8px;
  border:1px solid #ebe7df;border-radius:999px;background:#fff;box-shadow:none;
  color:#8a9199;font:500 10.5px/1.2 var(--sans,-apple-system,system-ui,sans-serif);letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold][data-function-loop-step="card"]>.vinci-function-fold:is(:hover,:focus-visible){
  outline:none;color:#8a5c21;border-color:#e6d5b6;background:#fffaf0;box-shadow:none
}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold][data-function-loop-step="card"]>.vinci-function-fold>.vinci-function-fold-count{font:inherit;color:inherit}
[data-vinci-program]:not([data-canonical-function-surface="true"]):not(#semantic-stage[data-canonical-function="true"] *):not([data-vinci-function-presentation="canonical"] *)
  .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold][data-function-loop-step="card"]>.vinci-function-fold>.vinci-function-fold-tri{color:#8a9199;font:700 9px/1 var(--mono,ui-monospace,monospace)}
/* ── end L1 Loop ── */

/* Array members retain their native pill material without a cast shadow. */
.vinci-rail-member>.vmark-pill,.vinci-rail-member>.vinci-rail-member-value>.vinci-value-pill{box-shadow:none!important;filter:none!important}

/* The declaration keyword inside an open Binding Pill sits quietly above the
   name, as a small caption: `let` over `goals: 5`. A plain word when the host
   cannot rewrite it, a subtle chooser when it can. */
.vinci-binding-declaration-control{flex:1 0 100%;order:-1;display:inline-flex;align-items:center;width:max-content;min-height:0;margin:-2px 0 -2px 2px;padding:0;border:0;background:transparent;color:#a89b83;font:500 10px/1.4 var(--mono,ui-monospace,monospace);letter-spacing:.08em}
select.vinci-binding-declaration-control{appearance:none;-webkit-appearance:none;padding-right:13px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='m1 1 3 3 3-3' fill='none' stroke='%23a89b83' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 1px center;cursor:pointer}
select.vinci-binding-declaration-control:hover{color:#7a6a4d}
select.vinci-binding-declaration-control:focus-visible{outline:none;color:#7a6a4d;box-shadow:0 0 0 2px rgba(201,171,112,.3);border-radius:4px}

/* Execution furniture stays outside Program Scope while the one original
   object is borrowed by the shared Change director and then returned. */
[data-function-execution] .vinci-program-operation[data-destructure-playback]{
  display:flex!important;position:relative!important;flex-direction:column;gap:16px;padding:20px;max-width:100%;box-sizing:border-box
}
[data-function-execution] .vinci-program-operation[data-function-mutation-execution]{
  display:flex!important;position:relative!important;inset:auto!important;transform:none!important;flex-direction:column;align-items:center;gap:12px;min-height:72px;width:fit-content;max-width:100%;margin:20px auto;padding:16px;border:1px solid var(--vinci-pill-edge);border-radius:18px
}
[data-function-execution] .vinci-program-operation[data-function-mutation-execution]::before{
  content:'Change field';color:var(--ink-mute);font:400 12px/1.4 var(--sans)
}
[data-destructure-destination]{font:500 16px/1.4 var(--mono);color:var(--ink)}

/* A borrowed native Function needs a definite share of a flex Binding's
   existing value seat; inline-size containment contributes no intrinsic width. */
@layer vinci-function-contract {
 .vinci-value-pill[data-value-slot="activation"]:has(>.vinci-value-pill-slot>.vinci-program-function[data-function-borrowed-by][data-scope-view="open"])>.vinci-value-pill-slot {
  flex:1 1 0!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;
 }
}