/* Canonical Function presentation shared by Atlas hosts and compact cover
   expansions.

   Host contract:
   - Atlas compatibility: #semantic-stage[data-canonical-function="true"]
   - Reusable host: [data-vinci-function-presentation="canonical"]
   - Direct VisualProgram child: [data-canonical-function-surface="true"]
   - Structure: data-canonical-function-play="false"
   - Flow: data-canonical-function-play="true" plus the renderer-owned rehearsal
     DOM and state attributes installed by function-rehearsal-surface.mjs.

   Every selector is host-scoped so importing this file cannot restyle unrelated
   VisualPrograms or page chrome. */

:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-primary-view-switch{
  position:relative;z-index:3;display:grid;grid-template-columns:auto auto minmax(0,1fr);
  align-items:center;gap:5px;margin:14px 16px 0;padding:5px;border:1px solid rgba(21,17,13,.1);
  border-radius:999px;background:rgba(255,253,250,.96);box-shadow:0 5px 18px rgba(21,17,13,.05)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-primary-view-switch button{
  min-height:30px;border:0;border-radius:999px;padding:0 13px;color:var(--soft,var(--ink-soft,#6b6259));
  background:transparent;cursor:pointer;font:700 8px/1 var(--mono);
  letter-spacing:.08em;text-transform:uppercase
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-primary-view-switch button[aria-pressed="true"]{
  color:#fffaf2;background:var(--char,var(--ink,#15110d));box-shadow:0 4px 11px rgba(21,17,13,.18)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-primary-view-switch button:focus-visible{
  outline:2px solid var(--orange,var(--gold,#ee9614));outline-offset:2px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-primary-view-switch>span{
  justify-self:end;padding:0 11px;color:var(--mute,var(--ink-mute,#9a8f83));font:550 7px/1.35 var(--mono);
  letter-spacing:.04em;text-align:right
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-function-transport{
  position:relative;z-index:4;display:grid;grid-template-columns:auto auto auto auto minmax(72px,1fr) auto;
  align-items:center;gap:5px;margin:8px 16px 0;padding:5px;border:1px solid rgba(238,150,20,.22);
  border-radius:14px;background:rgba(255,250,240,.94);box-shadow:0 5px 18px rgba(90,52,12,.055)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-function-transport[hidden]{display:none!important}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-function-transport button{
  min-height:29px;padding:0 11px;border:1px solid rgba(122,74,8,.18);border-radius:999px;
  color:var(--char,var(--ink,#15110d));background:#fff;cursor:pointer;font:700 7px/1 var(--mono);
  letter-spacing:.055em;text-transform:uppercase
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-function-transport button:first-child{color:#fffaf2;background:var(--char,var(--ink,#15110d))}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-function-transport button:disabled{cursor:wait;opacity:.5}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-function-transport button:focus-visible{
  outline:2px solid var(--orange,var(--gold,#ee9614));outline-offset:2px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-function-transport output{
  justify-self:end;color:var(--mute,var(--ink-mute,#9a8f83));font:550 7px/1.4 var(--mono);
  letter-spacing:.025em;text-align:right
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-function-transport input[type="range"]{
  width:100%;min-width:90px;accent-color:var(--orange,var(--gold,#ee9614));cursor:pointer
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-function-transport input[type="range"]:disabled{cursor:wait;opacity:.5}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-function-transport [data-canonical-function-counter]{
  min-width:38px;color:var(--gold-deep);font-weight:750;text-align:center
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-function-transport [data-canonical-loop-status]{
  grid-column:1/-1;justify-self:start;width:100%;padding:2px 7px 3px;
  overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap
}

/* Function playback keeps both control groups under #semantic-stage (the
   single-canvas and browser contracts depend on that ownership), but presents
   them as one compact toolbar ABOVE the dotted Vinci floor. The dots belong to
   the picture, not to its transport. */
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]){
  display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:6px;align-items:center;background-image:none
}
/* Compact consumers such as a Function cover expose the canonical Flow
   directly.  They still mount the same transport, canvas, source rows, and
   director; only the Atlas' Structure/Flow chooser is intentionally absent. */
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])[data-canonical-function-mode="flow-only"]{
  grid-template-columns:minmax(0,1fr)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]):has(
  >.semantic-visual-program[data-canonical-function-play="false"]
){
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  >.semantic-visual-program[data-canonical-function-play="false"]{
  grid-column:1;grid-row:1
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-primary-view-switch{
  grid-column:1;grid-row:1;grid-template-columns:auto auto;width:max-content;min-width:0;
  margin:8px 0 7px 10px;padding:3px;border-color:rgba(21,17,13,.09);border-radius:11px;
  background:#fff;box-shadow:none
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-primary-view-switch>span{display:none}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-primary-view-switch button{
  min-height:27px;padding-inline:8px;font-size:7px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-function-transport{
  grid-column:2;grid-row:1;grid-template-columns:auto auto auto auto minmax(56px,1fr) auto;
  min-width:0;margin:8px 10px 7px 0;padding:3px;border-color:rgba(21,17,13,.09);
  border-radius:11px;background:#fff;box-shadow:none
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])[data-canonical-function-mode="flow-only"]>.semantic-function-transport{
  grid-column:1;margin-inline:10px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-function-transport button{
  min-height:27px;padding-inline:7px;font-size:6.5px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-function-transport input[type="range"]{
  min-width:56px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-function-transport [data-canonical-function-counter]{
  min-width:30px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-function-transport [data-canonical-loop-status]{
  padding:1px 4px 2px;font-size:6.5px
}

/* One Function interior serves both Structure and Flow. The renderer owns the
   persistent Local Scope shelf and source rows; playback changes only their
   state and temporarily moves the exact canonical marks between their seats. */
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program:is(
  [data-canonical-function-surface="true"],
  [data-canonical-function-play="true"],
  [data-canonical-function-play="false"]
){
  grid-column:1/-1;grid-row:2;width:100%;min-width:0;max-width:100%;box-sizing:border-box
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program .vinci-program-function[data-scope-reader="written-order"]{
  max-width:calc(100% - 12px);box-sizing:border-box
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]{
  /* A written source tree is a reader, not a miniature flowchart. Give its
     real rows enough measure to keep nested IF ports and scope contents from
     sitting on the same central route. This applies to every canonical
     Function using the shared written-order grammar. */
  width:min(100%,880px);padding-inline:20px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program .vinci-program-function[data-scope-reader="written-order"][data-scope-view="open"]
  [data-function-body]{
  width:100%;height:auto;min-width:0;max-width:100%;min-height:0;max-height:none;
  box-sizing:border-box;overflow:visible
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program [data-function-source-order]{
  display:grid;place-items:stretch;gap:10px;width:100%;min-width:0;max-width:100%;box-sizing:border-box
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program [data-function-source-order]>.vinci-function-playback-scope{
  position:relative;box-sizing:border-box;display:grid;place-items:center;width:100%;min-width:0;min-height:72px;
  padding:17px 8px 5px;border:1px dashed rgba(152,95,11,.24);border-radius:13px;
  background:rgba(251,250,248,.62)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program [data-function-source-order]>.vinci-function-playback-scope
  .vinci-function-playback-scope-title{
  position:absolute;left:10px;top:7px;color:rgba(122,74,8,.62);
  font:750 6.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program [data-function-source-order]>.vinci-function-playback-scope
  .vinci-function-playback-scope-contents{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-width:0;min-height:48px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program [data-function-source-order]>.vinci-function-playback-scope
  :is(.vinci-function-playback-scope-seat,.vinci-function-playback-scope-bindings){
  display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;max-width:100%;flex-wrap:wrap
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program [data-function-source-row]{
  position:relative;box-sizing:border-box;display:grid;place-items:center;gap:5px;width:100%;min-width:0;
  min-height:42px;padding:18px 8px 7px;border:1px solid rgba(122,74,8,.13);border-radius:11px;
  background:rgba(255,255,255,.68)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program [data-function-source-row]>.vinci-function-playback-step-kind{
  position:absolute;left:9px;top:6px;color:#827769;font:750 6px/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program [data-function-source-row]>.vinci-function-playback-source-code{
  position:static;display:block;width:calc(100% - 12px);max-width:100%;overflow:hidden;color:#675d52;
  font:620 7px/1.25 var(--mono);text-align:center;text-overflow:ellipsis;white-space:nowrap;transform:none
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program [data-function-source-row]>.vinci-function-row-mark{
  display:grid;grid-template-columns:minmax(0,1fr);place-items:center;width:100%;min-width:0;max-width:100%;overflow:visible
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program [data-function-source-row][data-function-statement-kind="create"]
  .vinci-ball-seat:has(>.vinci-ball-home-anchor:only-child){
  display:none;min-height:0;height:0;overflow:hidden
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program [data-function-source-row][data-function-operation-only="true"]{
  border-color:rgba(238,150,20,.2);background:rgba(255,251,243,.62)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program [data-function-source-row][data-function-operation-only="true"]
  [data-function-row-mark]{
  min-height:30px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program [data-function-source-row][data-function-operation-only="true"]
  [data-operation-kind="mutation"]{
  position:relative;inset:auto;transform:none;display:inline-flex!important;visibility:visible;opacity:1
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program [data-function-source-order]
  :is(.vinci-function-playback-scope-seat,.vinci-function-row-mark) :is(.vf-ballwrap,.vmark-ball-live-wrap){
  max-width:100%;min-width:0
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program [data-function-source-order] .vmark-ball-live[data-state="expanded"]{
  --vinci-ball-expanded:min(240px,calc(100vw - 96px));max-width:100%;box-sizing:border-box
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program .vinci-program-function[data-scope-reader="written-order"]
  :is(.vinci-function-call-routes,.vinci-function-parameter-dock,.vinci-function-return-output){
  max-width:calc(100vw - 44px)
}
/* An embedded host (the Lancy canvas iframe) can report a zero-width viewport,
   which collapses a viewport-relative cap to nothing. The parameter dock keeps
   a fixed cap and wraps its slots instead. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program .vinci-program-function[data-scope-reader="written-order"]
  .vinci-function-parameter-dock{
  width:max-content;max-width:280px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program .vinci-program-function[data-scope-reader="written-order"]
  :is(.vinci-call-operation,.vinci-function-return-output){
  overflow:hidden;text-overflow:ellipsis
}

/* A Function declaration owns dormant parameter Binding seats. A direct call
   owns separate authored argument ValuePills. Flow only moves these persistent
   marks and changes their explicit frame state; Structure never shows a fake
   live environment. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-parameter-input{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(64px,max-content);align-items:center;
  justify-content:center;gap:5px;max-width:100%
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-parameter-slot{
  box-sizing:border-box;display:grid;place-items:center;min-width:64px;min-height:34px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-parameter-seat{
  min-height:25px;padding:4px 9px;border:1px dashed rgba(122,74,8,.24);border-radius:999px;
  color:#8b8175;background:rgba(255,255,255,.82);box-shadow:none;
  transition:transform .38s cubic-bezier(.32,.72,0,1),opacity .24s ease,border-color .24s ease,
    background-color .24s ease,box-shadow .3s ease
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-parameter-seat[data-function-parameter-state="dormant"]
  [data-vinci-value-pill-name]{opacity:.72}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-parameter-seat:is([data-function-parameter-state="receiving"],[data-function-parameter-state="bound"]){
  border-style:solid;border-color:rgba(152,95,11,.42);color:#62450f;background:#fff;
  box-shadow:0 6px 16px rgba(122,74,8,.09)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-parameter-seat:is(
    [data-function-parameter-state="bound-reference"],
    [data-function-parameter-state="returning-reference"],
    [data-function-parameter-state="returned-reference"]
  ){
  border-style:solid;border-color:rgba(152,95,11,.42);color:#62450f;background:#fff;
  box-shadow:0 6px 16px rgba(122,74,8,.09)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-parameter-input{
  display:inline-flex;align-items:center;justify-content:center;gap:6px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-parameter-input>.vinci-function-parameter-slot{
  width:max-content;min-width:max-content
}
/* A source Call is the incoming flight. Its parameter Binding is the visible
   Function-entry socket; do not draw a second rectangular Call Step above it.
   The hidden Call node remains renderer-owned provenance for playback. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-call-routes[data-function-shared-entry-route="true"]{
  display:none!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-call-operation[data-function-entry-handoff="true"]{
  display:none!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-program-function:has(>.vinci-function-call-routes[data-function-shared-entry-route="true"]){
  margin-top:34px!important
}
/* That 34px offset is for a standalone canonical Function whose hidden Call
   route needs a little intake room.  In the shared L2 program, each Function
   already owns a real Return-to-Entry transport lane.  Keep the full lane even
   when the next Function has a source Call route; otherwise the later shared
   rule crowds its Entry handle against the prior Return handle. */
[data-atlas-l2-program-canvas="shared"]
  >.vinci-program-place.atlas-l2-program-layout-host
  >.atlas-l2-program-node[data-atlas-l2-program-visual-order]:not(
    [data-atlas-l2-program-visual-order="0"]
  ){
  margin-top:78px!important
}

/* The Ball and its highlighted connector are the motion while the readable
   evidence queue drains. Runtime truth may change a compact card's intrinsic
   height, but easing that geometry underneath an already sampled SVG route
   makes the destination Port drift and produces a snap at docking. Resolve
   cover geometry immediately during a carrier story; ordinary idle and
   configuration transitions resume as soon as the queue settles. */
[data-atlas-l2-program-surface][data-atlas-l2-presentation-busy="true"]
  .vfc-function-cover,
[data-atlas-l2-program-surface][data-atlas-l2-presentation-busy="true"]
  .vfc-function-cover *{
  transition-duration:0s!important;
  transition-delay:0s!important
}
@media(pointer:coarse){
  [data-atlas-l2-program-canvas="shared"]
    >.vinci-program-place.atlas-l2-program-layout-host
    >.atlas-l2-program-node[data-atlas-l2-program-visual-order]:not(
      [data-atlas-l2-program-visual-order="0"]
    ){
    margin-top:85px!important
  }
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-entry[data-function-call-entry-handoff="true"]::before{
  display:block!important;bottom:15px!important;height:91px!important;
  border-left-style:solid!important;border-left-color:rgba(122,74,8,.42)!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-entry[data-function-call-entry-handoff="true"]>.vinci-function-port-mouth[hidden]{
  display:none!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-entry[data-function-call-entry-handoff="true"]>.vinci-function-parameter-dock{
  top:0!important;bottom:auto!important;transform:translate(-50%,-50%)!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-entry[data-function-call-entry-handoff="true"]
  :is(.vinci-function-parameter-input,.vinci-function-parameter-slot){
  display:grid;place-items:center;overflow:visible
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-entry[data-function-call-entry-handoff="true"]
  .vinci-function-parameter-slot[hidden]{
  display:none!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-entry .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,.9);box-shadow:none;overflow:visible
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-entry .vinci-function-object-parameter-seat[data-function-shared-entry-socket]
  >[data-vinci-value-pill-name]{
  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
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-entry .vinci-function-object-parameter-seat[data-function-shared-entry-socket]
  >[data-vinci-value-pill-value]{display:none!important}
/* Explicit non-shared Calls use the typed rectangular Step. A Call already
   projected as the Function-entry handoff must never be resurrected by these
   stronger layout rules during hot reconciliation. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-call-operation.vinci-function-object-call-step[data-function-expected-carrier="object"]:not([data-function-entry-handoff="true"]){
  display:grid;box-sizing:border-box;width:min(286px,calc(100vw - 96px));min-width:0;max-width:286px;
  min-height:80px;padding:18px 14px 10px;border:1px solid rgba(238,150,20,.36);border-radius:15px;
  color:inherit;background:rgba(255,255,255,.97);box-shadow:0 9px 22px rgba(122,74,8,.09);overflow:visible
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-object-call-step>:is(small,b){display:block!important;visibility:visible;opacity:1}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-object-call-step>small{
  position:absolute;left:12px;top:11px;grid-column:auto!important;grid-row:auto!important;
  align-self:auto;font-size:7px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-object-call-step>b{
  position:absolute;left:48px;right:auto;top:10px;grid-column:auto!important;grid-row:auto!important;
  align-self:auto;max-width:210px;overflow:hidden;
  text-align:left;text-overflow:ellipsis;font-size:9px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-object-call-step>.vinci-function-call-arguments{
  position:relative;display:grid!important;place-items:start center;width:100%;height:34px;
  min-width:0;margin:10px 0 0;overflow:visible
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-object-call-step .vinci-function-parameter-slot[data-function-parameter-expected-kind="object"]{
  position:relative;display:grid;place-items:start center;box-sizing:border-box;
  width:36px;min-width:36px;height:52px;min-height:52px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-object-parameter-seat[data-function-parameter-expected-kind="object"]{
  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,.42);
  border-radius:50%;color:#62450f;background:rgba(255,255,255,.7);box-shadow:none;overflow:visible
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-object-parameter-seat[data-function-parameter-expected-kind="object"]
  >[data-vinci-value-pill-name]{
  position:absolute;left:50%;top:-3px;display:block;transform:translateX(-50%);
  color:#6e5a3c;font:750 8px/1 var(--mono);letter-spacing:.035em;white-space:nowrap
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-object-parameter-seat[data-function-parameter-expected-kind="object"]
  >[data-vinci-value-pill-value]{display:none!important}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-object-parameter-seat[data-function-parameter-expected-kind="object"]:not(
    [data-function-parameter-state="dormant"]
  ){
  border-color:transparent;background:transparent;box-shadow:none
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-object-parameter-seat[data-function-parameter-expected-kind="object"]:not(
    [data-function-parameter-state="dormant"]
  )>[data-vinci-value-pill-name]{opacity:0}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-object-call-step>.vinci-function-call-input-port{top:-6px}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-object-call-step>.vinci-function-call-output-port{bottom:-6px}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-object-call-step>.vinci-function-call-port{
  width:12px;height:12px;visibility:visible;opacity:1;border-color:rgba(122,74,8,.5)
}
/* Every authored Call at a Function boundary uses the same Step grammar.
   Multi-call examples keep their source arguments visible, but remain dormant:
   their ports and arguments are source facts, while no runtime path is lit. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-call-operation.vinci-function-boundary-call-step:not(.vinci-function-object-call-step){
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;
  box-sizing:border-box;flex:1 1 0;width:min(272px,calc(50vw - 34px));min-width:0;max-width:272px;
  min-height:80px;padding:18px 12px 9px;border-radius:15px;overflow:visible;white-space:normal
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-boundary-call-step:not(.vinci-function-object-call-step)>small{
  position:absolute;left:12px;top:10px;font-size:7px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-boundary-call-step:not(.vinci-function-object-call-step)>b{
  grid-column:1/-1;min-width:0;max-width:100%;overflow:hidden;text-align:center;
  text-overflow:ellipsis;white-space:nowrap;font-size:9px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-boundary-call-step:not(.vinci-function-object-call-step)>.vinci-function-call-arguments{
  grid-column:1/-1;display:flex!important;align-items:center;justify-content:center;align-self:end;
  flex-wrap:wrap;gap:3px;width:100%;min-width:0;margin:7px 0 0;overflow:visible;
  opacity:1!important;visibility:visible!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-boundary-call-step:not(.vinci-function-object-call-step)
  .vinci-function-argument-pill{
  min-width:0;max-width:78px;padding:4px 6px;font-size:7px;overflow:hidden;text-overflow:ellipsis
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-boundary-call-step:not(.vinci-function-object-call-step)>.vinci-function-call-port{
  width:12px;height:12px;visibility:visible;opacity:1;border-color:rgba(122,74,8,.5)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-call-routes:has(>.vinci-function-boundary-call-step:not(.vinci-function-object-call-step)){
  top:-132px;width:min(566px,calc(100vw - 56px));max-width:100%;align-items:stretch;justify-content:center;gap:12px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-call-routes:has(>.vinci-function-boundary-call-step:not(.vinci-function-object-call-step))::after{
  display:block!important;height:52px!important;border-left-style:solid;border-left-color:rgba(122,74,8,.42)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-program-function:has(>.vinci-function-call-routes>.vinci-function-boundary-call-step:not(.vinci-function-object-call-step)){
  margin-top:max(104px,calc(var(--vinci-call-routes-height,0px) + 30px))
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-call-routes:has(
    >.vinci-function-boundary-call-step:not(.vinci-function-object-call-step)
    +.vinci-function-boundary-call-step:not(.vinci-function-object-call-step)
  ){
  top:-132px;flex-direction:row;width:min(370px,calc(100vw - 40px));gap:12px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-call-routes:has(
    >.vinci-function-boundary-call-step:not(.vinci-function-object-call-step)
    +.vinci-function-boundary-call-step:not(.vinci-function-object-call-step)
  )>.vinci-function-boundary-call-step{
  flex:1 1 0;width:0;min-width:0;max-width:none
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-call-routes:has(
    >.vinci-function-boundary-call-step:not(.vinci-function-object-call-step)
    +.vinci-function-boundary-call-step:not(.vinci-function-object-call-step)
  )>.vinci-function-boundary-call-step::after{
  content:"";position:absolute;left:50%;top:100%;height:12px;transform:translateX(-50%);
  border-left:1.5px solid rgba(122,74,8,.42)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-call-routes:has(
    >.vinci-function-boundary-call-step:not(.vinci-function-object-call-step)
    +.vinci-function-boundary-call-step:not(.vinci-function-object-call-step)
  )::before{
  content:"";position:absolute;left:25%;right:25%;top:calc(100% + 12px);
  border-top:1.5px solid rgba(122,74,8,.42)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-call-routes:has(
    >.vinci-function-boundary-call-step:not(.vinci-function-object-call-step)
    +.vinci-function-boundary-call-step:not(.vinci-function-object-call-step)
  )::after{
  top:calc(100% + 12px);height:40px!important
}
/* One Call owns one repeatable argument → parameter dock. This is the same
   Call anatomy used by the canonical IF, generalized to N source-authored
   parameter Bindings and mixed value forms. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-call-operation.vinci-function-boundary-call-step.vinci-function-parameter-call-step:not(.vinci-function-object-call-step){
  position:relative;display:grid;box-sizing:border-box;
  flex:0 1 430px;width:min(430px,calc(100vw - 96px))!important;min-width:0;
  max-width:430px!important;min-height:112px;
  padding:24px 16px 12px;border:1px solid rgba(238,150,20,.36);border-radius:15px;
  color:inherit;background:rgba(255,255,255,.97);box-shadow:0 9px 22px rgba(122,74,8,.09);
  overflow:visible;white-space:normal
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-parameter-call-step:not(.vinci-function-object-call-step)>small{
  position:absolute;left:12px;top:11px;font-size:7px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-parameter-call-step:not(.vinci-function-object-call-step)>b{
  position:absolute;left:48px;right:12px;top:10px;max-width:none;overflow:hidden;
  text-align:left;text-overflow:ellipsis;white-space:nowrap;font-size:9px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-parameter-call-step:not(.vinci-function-object-call-step)>.vinci-function-call-arguments{
  display:flex!important;align-items:flex-end;justify-content:center;flex-wrap:wrap;gap:9px;
  width:100%;min-width:0;margin:12px 0 0;overflow:visible
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-call-binding-slot{
  position:relative;display:grid;grid-template-rows:minmax(24px,auto) 8px minmax(30px,auto);
  place-items:center;box-sizing:border-box;min-width:86px;max-width:126px;padding:0 3px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-call-binding-slot::after{
  content:"";grid-row:2;width:0;height:8px;border-left:1px solid rgba(122,74,8,.28)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-call-binding-slot>.vinci-function-argument-pill{
  grid-row:1;box-sizing:border-box;max-width:112px;margin:0;overflow:hidden;text-overflow:ellipsis
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-call-binding-slot>.vinci-function-argument-pill[hidden]{display:none!important}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-call-binding-slot>.vinci-function-parameter-slot{
  grid-row:3;display:grid;place-items:center;width:max-content;min-width:68px;min-height:30px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-call-binding-slot[data-function-parameter-expected-kind="object"]::after{visibility:hidden}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-value-parameter-seat{min-width:68px;max-width:112px;justify-content:center}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-array-parameter-seat{
  position:relative;box-sizing:border-box;min-width:86px;min-height:28px;padding-inline:12px;
  border-style:double;border-width:3px;border-radius:10px;background:rgba(255,255,255,.9)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-argument-pill.vinci-function-argument-rail{
  min-width:82px;border-style:double;border-width:3px;border-radius:10px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-parameter-call-step>.vinci-function-call-input-port{top:-6px}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-parameter-call-step>.vinci-function-call-output-port{bottom:-6px}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-parameter-call-step>.vinci-function-call-port{
  width:12px;height:12px;visibility:visible;opacity:1;border-color:rgba(122,74,8,.5)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-call-routes:has(>.vinci-function-parameter-call-step:not(.vinci-function-object-call-step)){
  top:-162px;width:min(460px,calc(100vw - 56px));max-width:100%
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-call-routes:has(>.vinci-function-parameter-call-step:not(.vinci-function-object-call-step))::after{
  height:70px!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-program-function:has(>.vinci-function-call-routes>.vinci-function-parameter-call-step:not(.vinci-function-object-call-step)){
  margin-top:max(134px,calc(var(--vinci-call-routes-height,0px) + 30px))
}
@media (max-width:480px){
  :where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
    .vinci-call-operation.vinci-function-boundary-call-step.vinci-function-parameter-call-step:not(.vinci-function-object-call-step){
    flex-basis:330px;width:min(330px,calc(100vw - 54px))!important;max-width:330px!important;
    padding-inline:10px
  }
  :where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
    .vinci-function-parameter-call-step:not(.vinci-function-object-call-step)>.vinci-function-call-arguments{
    gap:6px
  }
  :where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
    .vinci-function-call-binding-slot{min-width:76px;max-width:98px;padding-inline:1px}
  :where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
    .vinci-function-call-routes:has(>.vinci-function-parameter-call-step:not(.vinci-function-object-call-step)){
    width:min(342px,calc(100vw - 42px))
  }
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-program-function:has(>.vinci-function-call-routes>.vinci-function-object-call-step:not([data-function-entry-handoff="true"])){margin-top:66px}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-call-routes:has(>.vinci-function-object-call-step:not([data-function-entry-handoff="true"])){top:-108px}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-call-routes:has(>.vinci-function-object-call-step:not([data-function-entry-handoff="true"]))::after{
  display:block!important;height:20px!important;border-left-style:solid;border-left-color:rgba(122,74,8,.42)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  >.semantic-visual-program[data-canonical-function-play="true"]:has(.vinci-function-object-call-step:not([data-function-entry-handoff="true"])){
  min-height:580px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-program-function:has(>.vinci-function-entry[data-state="passed"])
  .vinci-function-object-parameter-seat[data-function-shared-entry-socket]{
  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%)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-call-arguments{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;margin-left:5px;overflow:visible;
  opacity:1;visibility:visible;transition:opacity .26s ease,visibility 0s linear 0s
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-call-arguments:is([hidden],[data-state="dormant"]){
  display:inline-flex!important;opacity:0;visibility:hidden;transition-delay:0s,.26s
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-call-operation[data-function-parameter-inside-call="true"]
  .vinci-function-call-arguments[data-state="parameter-interface"]{
  display:flex!important;margin-left:0;opacity:1;visibility:visible
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-argument-pill{
  position:relative;z-index:36;min-height:23px;padding:3px 8px;border-color:rgba(238,150,20,.34);
  background:#fff;box-shadow:0 5px 13px rgba(122,74,8,.09);will-change:transform,opacity
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-argument-pill [data-vinci-value-pill-name]{display:none}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  .vinci-function-argument-pill[data-function-argument-transfer="settled"]{
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  [data-function-compute-input-seat]{
  display:flex;align-items:center;justify-content:center;gap:4px;min-height:26px;margin-bottom:4px;
  opacity:1;visibility:visible;transition:opacity .24s ease,visibility 0s linear 0s
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  [data-function-compute-input-seat][hidden]{
  display:flex!important;opacity:0;visibility:hidden;transition-delay:0s,.24s
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program
  [data-function-frame-moving="true"]{
  position:relative;z-index:60;pointer-events:none;will-change:transform,opacity
}

/* Generic call frames reserve entry, source and scope geometry. The exact
   pills can therefore travel without recentering siblings or resizing the
   Function underneath a running beat. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-program-function{
  width:100%!important;max-width:350px!important;transition:min-height .46s cubic-bezier(.32,.72,0,1),
    padding .46s cubic-bezier(.32,.72,0,1),opacity .3s ease,border-color .3s ease,
    box-shadow .38s ease!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-program-function:not([data-function-play-state="done"]){min-height:276px!important;padding-top:68px!important}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-program-function:not([data-function-play-state="done"]) [data-function-body]{
  min-height:214px!important;padding-block:0!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-function-playback-sequence{min-height:214px!important}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-function-parameter-dock{top:20px!important;bottom:auto!important}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-function-playback-scope-bindings{
  box-sizing:border-box;min-width:min(220px,100%);justify-content:flex-start
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-function-playback-scope-seat:empty{display:none;min-width:0;min-height:0}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-function-playback-scope-seat[data-function-scope-active-resident]{
  position:absolute;left:50%;top:calc(50% - 9.5px);display:block!important;
  width:0;height:0;min-width:0!important;min-height:0!important;transform:translateX(-50%)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-function-playback-scope-seat[data-function-scope-binding-active="true"]{
  position:relative
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-function-playback-scope-seat[data-function-scope-active-resident][data-function-scope-binding-active="true"]{
  position:absolute
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-function-playback-scope-seat[data-function-scope-binding-active="true"]::after{
  content:attr(data-function-scope-binding-name);position:absolute;left:50%;top:calc(50% + 21px);
  transform:translateX(-50%);color:#985f0b;font:750 7px/1 var(--mono);
  letter-spacing:.04em;white-space:nowrap
}
/* The persistent Ball carries the local Binding name while it is inside the
   Function. Do not paint a second `player` under the now-empty Scope seat. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program [data-function-flow-carrier]>.vmark-ball-live-wrap{
  position:relative;display:grid;place-items:center;width:100%;min-width:0;height:100%;overflow:visible
}
/* A compact returned Ball is one clickable primitive. Its field ValuePills
   still exist for identity and later inspection, but must not intercept the
   opening gesture before the Ball has expanded. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program [data-function-flow-carrier]
  .vmark-ball-live[data-state="collapsed"]>*{pointer-events:none}
/* Playback changes Step height intentionally. Do not let browser scroll
   anchoring reinterpret those graph-local changes as a viewport movement of
   the Ball—especially at the stacked mobile breakpoint. */
html:has(#semantic-stage[data-canonical-function="true"]),
#semantic-stage[data-canonical-function="true"]{scrollbar-gutter:stable}
html:has(#semantic-stage[data-canonical-function="true"]),
body:has(#semantic-stage[data-canonical-function="true"]),
#semantic-stage[data-canonical-function="true"],
#semantic-stage[data-canonical-function="true"]>.semantic-visual-program,
#semantic-stage[data-canonical-function="true"] .vinci-program-motion-layer,
#semantic-stage[data-canonical-function="true"] [data-function-flow-carrier]{
  overflow-anchor:none
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program [data-function-flow-carrier]>.vmark-ball-live-wrap>.vmark-ball-live-label{
  position:absolute;left:50%;top:calc(100% + 4px);margin:0;transform:translateX(-50%);
  color:var(--gold-deep);white-space:nowrap;transition:opacity .18s ease,color .18s ease
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program [data-function-flow-carrier][data-function-binding-role="parameter"]
  >.vmark-ball-live-wrap>.vmark-ball-live-label{color:#985f0b}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program [data-function-flow-carrier]>.vmark-ball-live-wrap
  >.vmark-ball-live:is([data-state="expanded"],[data-state="mutation"],[data-state="collapsing"])
  +.vmark-ball-live-label{opacity:0}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-subphase="condition-read"]
  [data-function-flow-carrier]>.vmark-ball-live-wrap>.vmark-ball-live-label{
  opacity:0!important;visibility:hidden!important;transition:none!important
}
/* Return owns the carrier as soon as it reaches the Function-exit mouth. Hide
   the local `player` binding during the mouth/compaction hand-off so it cannot
   collide with the Return editor before the result-bay resident flag settles. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-event="return.request"]:is(
    [data-function-flow-subphase="step-contracting"],
    [data-function-flow-subphase="step-output-clearance"],
    [data-function-flow-subphase="function-exit"]
  ) [data-function-flow-carrier]>.vmark-ball-live-wrap>.vmark-ball-live-label,
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-event="function.close"]:is(
    [data-function-flow-subphase="caller-result"],
    [data-function-flow-subphase="caller-binding"]
  ) [data-function-flow-carrier]>.vmark-ball-live-wrap>.vmark-ball-live-label{
  opacity:0!important;visibility:hidden!important
}
/* The same persistent carrier finishes inside Return. Its binding label is
   local-scope context, so it quietly leaves while the compact Ball occupies
   the Return pill's result bay. The outer 34px actor remains director-owned. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program [data-function-flow-carrier][data-function-return-resident="true"]
  >.vmark-ball-live-wrap>.vmark-ball-live-label{
  opacity:0!important;visibility:hidden
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program [data-function-flow-carrier][data-function-return-resident="true"]
  .vmark-ball-live[data-state="collapsed"]{
  box-sizing:border-box;width:30px!important;height:30px!important;max-width:30px!important;max-height:30px!important;
  padding:4px!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program :is(
    .vinci-function-return-output[data-function-return-carrier="resident"],
    .vinci-function-return-port[data-function-return-carrier="resident"] .vinci-function-return-output
  )>[data-vinci-value-pill-value]{
  opacity:0!important;visibility:hidden!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program:has([data-function-flow-carrier][data-function-binding-role="parameter"])
  .vinci-function-playback-scope-seat[data-function-scope-binding-active="true"]::after{
  display:none
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-function-playback-source-code{
  transform:translateX(-50%) translateY(0)!important;
  transition:color .25s ease,opacity .25s ease!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-function-playback-step[data-current="true"] .vinci-function-playback-source-code{
  transform:translateX(-50%) translateY(-4px)!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-program-function[data-function-play-state="done"]{
  min-height:118px!important;padding:62px 13px 10px!important
}

/* Canonical Function playback. The Function, Ball, property-read operations
   and ValuePills remain the renderer's authored nodes. This CSS only seats
   those identities in a compact four-statement reading order. */
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]{
  grid-column:1/-1;grid-row:2;width:100%;min-height:540px;padding:10px 12px 24px;
  border-top:1px solid rgba(21,17,13,.065);
  background-image:radial-gradient(circle,rgba(122,74,8,.06) .7px,transparent .8px);
  background-size:28px 28px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"] .vinci-program-place{
  min-height:0;padding:20px 12px 24px;border-color:rgba(21,17,13,.075);
  background:rgba(255,255,255,.56);box-shadow:inset 0 1px rgba(255,255,255,.8)
}
/* Canonical play folds the program scope only once its actors have been
   lifted into the motion layer. A scope that still holds a Ball or Rail (a
   Call with several object-like arguments, or a definition the director does
   not carry) stays visible: an actor must never disappear at rest. */
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-place>.vinci-program-scope:not(:has(.vf-ballwrap, .vinci-program-rail)){display:none!important}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"] .vinci-program-function{
  width:min(100%,350px);min-height:366px;padding:36px 12px 14px;overflow:visible;
  border:1px solid rgba(57,48,37,.18);border-radius:20px;background:rgba(255,255,255,.96);
  box-shadow:0 18px 44px rgba(54,40,24,.09);opacity:1;
  transition:width .46s cubic-bezier(.32,.72,0,1),min-height .46s cubic-bezier(.32,.72,0,1),
    padding .46s cubic-bezier(.32,.72,0,1),opacity .3s ease,border-color .3s ease,box-shadow .38s ease
}
/* A Function with authored Return exit ports must keep its bottom band free:
   the play-mode padding above collapses to 14px and the return pills land on
   the last ladder row (and stop being clickable) without this reserve. */
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-return-count]:not([data-function-return-count="0"]),
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-play-state="active"][data-function-return-count]:not([data-function-return-count="0"]){
  padding-bottom:62px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-semantic-focus]{
  border:1px solid rgba(57,48,37,.18);box-shadow:0 14px 34px rgba(54,40,24,.08)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function::after{
  content:attr(data-function-play-label);position:absolute;right:14px;top:15px;color:#8e8274;
  font:750 7px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function:is([data-function-play-state="ready"],[data-function-play-state="called"]){
  width:min(100%,350px);opacity:1;border-color:rgba(57,48,37,.2);box-shadow:0 18px 44px rgba(54,40,24,.09)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-play-state="active"]{
  width:min(100%,350px);min-height:366px;padding:36px 12px 14px;opacity:1;
  border-color:rgba(57,48,37,.22);box-shadow:0 22px 54px rgba(54,40,24,.13)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-play-state="done"]{
  width:min(100%,250px);min-height:72px;padding:16px 13px 5px;opacity:.7;
  border-color:rgba(152,95,11,.22);box-shadow:0 12px 28px rgba(122,74,8,.07)
}
/* A completed source rehearsal is still the proof the Ball just traversed.
   Keep that graph open while its geometry hold exists; compacting the whole
   callee during Close shifted the viewport underneath the returning Ball. */
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-play-state="done"]:has([data-function-flow-geometry-hold]){
  width:min(100%,350px);min-height:366px;padding:36px 12px 62px;opacity:1;
  border-color:rgba(152,95,11,.22);box-shadow:0 18px 44px rgba(122,74,8,.08)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-if-layout="step-fork"][data-function-play-state="done"]:has(
    [data-function-flow-geometry-hold]){width:min(100%,470px)}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-play-state="done"]:has([data-function-flow-geometry-hold])
  [data-function-body]{
  max-height:none;min-height:306px;padding:4px 0 10px;opacity:1;transform:translateY(0);overflow:visible
}
/* The step-fork story starts with a real top-level Ball travelling into the
   call. Function Flow v5 does the same for straight-line examples such as
   Messi, so any persistent carrier keeps its authored outer home visible. */
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-place:has(.vinci-program-function[data-function-if-layout="step-fork"])>.vinci-program-scope,
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]:has([data-function-flow-carrier])
  .vinci-program-place>.vinci-program-scope{
  display:block!important;width:100%;min-height:0;padding:0 0 10px;border:0;
  background:transparent;box-shadow:none
}
/* The step-fork ledger seats two side-by-side Call steps, so the play-mode
   350px frame halves each of them; give this layout the width messi gives one
   full-width step.  The compacted done state keeps its own width above. */
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-if-layout="step-fork"],
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-if-layout="step-fork"]:is([data-function-play-state="ready"],[data-function-play-state="called"],[data-function-play-state="active"],[data-function-play-state="paused"]){
  width:min(100%,470px)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function>.vinci-program-function-label{
  left:16px;top:13px;max-width:calc(100% - 128px);font-size:15px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function [data-function-body]{
  display:block;max-height:none;min-height:306px;padding:4px 0 10px;overflow:visible;
  opacity:1;transform:translateY(0);border:0!important;border-radius:14px;
  background:transparent!important;
  transition:max-height .44s cubic-bezier(.32,.72,0,1),min-height .44s cubic-bezier(.32,.72,0,1),
    padding .44s cubic-bezier(.32,.72,0,1),opacity .28s ease,transform .44s cubic-bezier(.32,.72,0,1)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function [data-function-body]::before{display:none}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function [data-function-body]>:not(.vinci-function-playback-sequence){display:none!important}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-body-closing="true"] [data-function-body],
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-play-state="done"] [data-function-body]{
  max-height:0;min-height:0;padding-block:0;opacity:0;transform:translateY(-7px);overflow:hidden
}
#semantic-stage[data-canonical-function="true"]>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-scope-control{display:grid!important}
#semantic-stage[data-canonical-function="true"]>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function::after{display:none}
:where(#semantic-stage[data-canonical-function-mode="flow-only"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-play="true"] .vinci-program-function::after{
  content:none;display:none
}
#semantic-stage[data-canonical-function="true"]>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-scope-view="collapsed"]{
  width:min(100%,250px);min-height:93px;padding:17px 8px 10px;opacity:1;
  border-radius:18px;border-color:rgba(57,48,37,.2);box-shadow:0 13px 28px rgba(54,40,24,.09)
}
#semantic-stage[data-canonical-function="true"]>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-scope-view="collapsed"]>.vinci-program-function-label{
  left:12px;top:13px;max-width:calc(100% - 112px)
}
#semantic-stage[data-canonical-function="true"]>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-scope-view="collapsed"]>.vinci-function-cover-summary{
  display:flex;align-items:center;justify-content:center;min-height:38px;margin-top:20px;padding:2px 5px 0
}
#semantic-stage[data-canonical-function="true"]>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-cover-summary[hidden]{display:none!important}
#semantic-stage[data-canonical-function="true"]>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-cover-summary>.vinci-field-change[data-operation-kind="mutation"]{
  display:inline-flex!important;min-height:36px
}
#semantic-stage[data-canonical-function="true"]>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-cover-summary>.vinci-field-change .vinci-operation-field,
#semantic-stage[data-canonical-function="true"]>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-cover-summary>.vinci-field-change .vinci-operation-mechanism{padding-block:9px}
#semantic-stage[data-canonical-function="true"]>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-scope-control button:disabled{cursor:wait;opacity:.42}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-port-mouth{width:12px;height:12px;border-width:1.5px}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-entry::before,:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-exit::after{height:18px}

:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .vinci-function-playback-sequence[hidden]{display:none!important}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-sequence{
  box-sizing:border-box;display:flex;flex-direction:column;align-items:center;width:100%;height:auto;min-height:296px;
  overflow:visible;color:#4f463b
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-scope{
  position:relative;box-sizing:border-box;display:grid;place-items:center;width:100%;height:72px;flex:0 0 72px;
  border:1px dashed rgba(152,95,11,.2);border-radius:15px;background:rgba(251,250,248,.48);
  transition:border-color .3s ease,background-color .3s ease,box-shadow .3s ease
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-scope[data-state="opening"]{
  border-color:rgba(152,95,11,.38);background:rgba(250,249,248,.72)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-scope:is([data-state="bound"],[data-state="using"]){
  border-color:rgba(152,95,11,.46);background:rgba(250,249,248,.8);box-shadow:0 8px 22px rgba(122,74,8,.045)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-scope-title{
  position:absolute;left:10px;top:7px;color:rgba(87,80,72,.52);
  font:750 6.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-scope-contents{
  box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:7px;width:100%;height:100%;
  min-width:0;padding:15px 8px 3px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-scope-seat{
  display:grid;flex:0 0 auto;place-items:center;min-width:56px;min-height:54px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-scope-bindings{
  display:flex;min-width:0;min-height:38px;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-scope-bindings>.vinci-binding-pill{
  flex:0 0 auto;margin:0;will-change:transform
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-scope-bindings>.vinci-binding-pill[data-function-scope-binding="moving"]{
  z-index:28;box-shadow:0 9px 22px rgba(122,74,8,.14),0 0 0 3px rgba(122,74,8,.07)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-connector{
  display:flex;flex:0 0 10px;height:10px;flex-direction:column;align-items:center;color:rgba(122,74,8,.22)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-line{display:block;width:1px;flex:1;background:currentColor}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-port{
  box-sizing:border-box;display:block;width:6px;height:6px;flex:0 0 6px;border:1px solid currentColor;
  border-radius:50%;background:#fff
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-connector[data-active="true"]{color:rgba(238,150,20,.8)}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-step{
  position:relative;box-sizing:border-box;display:grid;place-items:center;width:min(100%,286px);height:44px;flex:0 0 auto;
  padding:15px 8px 4px;border:1px solid rgba(122,74,8,.2);border-radius:12px;background:rgba(255,255,255,.76);
  box-shadow:0 6px 16px rgba(67,49,28,.025);opacity:.67;
  transition:height .46s cubic-bezier(.32,.72,0,1),opacity .28s ease,border-color .28s ease,
    background-color .28s ease,box-shadow .34s ease
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-step[data-visited="true"]{opacity:.84}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-step[data-current="true"]{
  opacity:1;border-color:rgba(238,150,20,.55);background:rgba(255,250,240,.92);box-shadow:0 10px 24px rgba(119,76,19,.08)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-step-kind{
  position:absolute;left:9px;top:7px;color:#7d7367;
  font:750 6px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-step-seat{
  position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-width:0;min-height:22px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-active-prefix{
  display:none;flex:0 0 auto;color:#714607;font:720 9px/1.2 var(--mono);white-space:nowrap
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-step[data-current="true"] .vinci-function-playback-active-prefix:not([hidden]){
  display:inline-flex
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-actor-seat{display:grid;place-items:center;min-width:0;min-height:0}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read .vinci-function-playback-actor-seat[data-function-read-dock="value"]{
  position:absolute;z-index:10;display:grid;width:108px;height:108px;overflow:visible;
  transform:translate(-50%,-50%);place-items:center;pointer-events:none
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read .vinci-function-playback-actor-seat[data-function-read-dock="value"]
  :is(.vf-balllabel,.vmark-ball-live-label){display:none}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-actor-seat:empty{display:none}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-step:is([data-current="true"],[data-receiving="true"]):not(.vinci-function-playback-mutation){
  height:132px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-create:is([data-current="true"],[data-receiving="true"]){
  height:92px;padding-top:31px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-create:is([data-current="true"],[data-receiving="true"]) .vinci-function-playback-step-seat{
  min-height:58px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-mutation{
  align-content:start;height:46px;padding-top:27px;overflow:visible
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-mutation:is([data-current="true"],[data-receiving="true"]){height:144px}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-expression{
  position:absolute;left:50%;top:21px;width:calc(100% - 24px);max-width:calc(100% - 24px);overflow:hidden;
  color:rgba(79,70,59,.78);font:620 7px/1 var(--mono);text-align:center;text-overflow:ellipsis;white-space:nowrap;
  transform:translateX(-50%) translateY(0);transition:color .25s ease,opacity .25s ease
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-step[data-current="true"] .vinci-function-playback-source-code{
  opacity:0;transform:translateX(-50%) translateY(-4px);pointer-events:none
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read:is([data-current="true"],[data-receiving="true"]) .vinci-function-playback-step-seat{
  min-height:40px;overflow:visible;
  transition:min-height .46s cubic-bezier(.32,.72,0,1)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-step.vinci-function-playback-read:is([data-current="true"],[data-receiving="true"]){
  height:58px;overflow:visible
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-step.vinci-function-playback-read:is(
    [data-function-read-phase="opening"],
    [data-function-read-phase="open"],
    [data-function-read-phase="receiving"],
    [data-function-read-phase="shell-fading"],
    [data-function-read-phase="source-lingering"],
    [data-function-read-phase="source-fading"],
    [data-function-read-phase="scalar"],
    [data-function-read-phase="actor-contracting"],
    [data-function-read-phase="source-pinned"],
    [data-function-read-phase="source-key-releasing"],
    [data-function-read-phase="source-value-ready"],
    [data-function-read-phase="actor-returning"]
  ){
  height:144px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read:is(
    [data-function-read-phase="opening"],
    [data-function-read-phase="open"],
    [data-function-read-phase="receiving"],
    [data-function-read-phase="shell-fading"],
    [data-function-read-phase="source-lingering"],
    [data-function-read-phase="source-fading"],
    [data-function-read-phase="scalar"],
    [data-function-read-phase="actor-contracting"],
    [data-function-read-phase="source-pinned"],
    [data-function-read-phase="source-key-releasing"],
    [data-function-read-phase="source-value-ready"],
    [data-function-read-phase="actor-returning"]
  ) .vinci-function-playback-step-seat{
  min-height:126px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read:has([data-function-read-result="source-derived"]):not([data-current="true"]){
  height:58px;padding-top:17px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read:has([data-function-read-result="source-derived"])
  .vinci-function-playback-source-code{opacity:0;pointer-events:none}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  [data-function-read-result="pending"][hidden]{display:none!important}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-result]{
  margin:0;transition:opacity .25s ease,transform .36s cubic-bezier(.32,.72,0,1)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-result]>.vinci-operation-result-binding
  >.vinci-binding-pill{
  box-sizing:border-box;display:grid;width:96px;height:38px;min-width:96px;max-width:none;min-height:38px;
  padding:4px;grid-template-columns:56px 28px;grid-template-rows:28px;column-gap:4px;
  align-items:center;justify-content:center;border-radius:19px;
  transition:width .44s cubic-bezier(.32,.72,0,1),height .44s cubic-bezier(.32,.72,0,1),
    padding .44s cubic-bezier(.32,.72,0,1),border-radius .44s cubic-bezier(.32,.72,0,1),
    grid-template-columns .44s cubic-bezier(.32,.72,0,1),
    grid-template-rows .44s cubic-bezier(.32,.72,0,1),
    border-color .25s ease,box-shadow .32s ease
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-result]>.vinci-operation-result-binding
  >.vinci-binding-pill>[data-vinci-value-pill-name]{
  display:flex;width:56px;height:28px;align-items:center;justify-content:center;white-space:nowrap;
  transition:width .44s cubic-bezier(.32,.72,0,1),height .44s cubic-bezier(.32,.72,0,1)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-result]>.vinci-operation-result-binding
  >.vinci-binding-pill>[data-vinci-value-pill-value]{
  box-sizing:border-box;display:grid;width:28px;height:28px;place-items:center;border-radius:14px;
  outline:1px dashed transparent;outline-offset:-2px;background:transparent;white-space:nowrap;
  transition:width .44s cubic-bezier(.32,.72,0,1),height .44s cubic-bezier(.32,.72,0,1),
    border-radius .44s cubic-bezier(.32,.72,0,1),outline-color .28s ease,background-color .28s ease,
    opacity .32s cubic-bezier(.32,.72,0,1),filter .32s ease
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-container="open"]>.vinci-operation-result-binding
  >.vinci-binding-pill{
  box-sizing:border-box;display:grid;width:196px;height:120px;padding:4px;
  grid-template-columns:66px 112px;grid-template-rows:112px;column-gap:4px;
  align-items:center;justify-content:center;border-radius:60px;
  background:linear-gradient(90deg,rgba(255,255,255,.97) 0 38%,rgba(255,253,248,.3) 38% 100%)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-container="open"]>.vinci-operation-result-binding
  >.vinci-binding-pill>[data-vinci-value-pill-name]{
  display:flex;width:66px;height:112px;align-items:center;justify-content:center;white-space:nowrap
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-container="open"]>.vinci-operation-result-binding
  >.vinci-binding-pill>[data-vinci-value-pill-value]{
  box-sizing:border-box;display:grid;width:112px;height:112px;place-items:center;
  border-radius:56px;outline-color:rgba(122,74,8,.2);outline-offset:-2px;
  background:rgba(255,253,248,.12);white-space:nowrap
}
/* A source-read temporarily opens a primitive Pill into a value bay.  Once the
   hand-off is complete it must contract back to the SAME intrinsic primitive
   geometry, rather than retaining the animation grid's roomy columns. */
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-container="measuring"]>.vinci-operation-result-binding
  >.vinci-binding-pill,
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-container="settled"]>.vinci-operation-result-binding
  >.vinci-binding-pill{
  box-sizing:border-box;display:inline-flex;width:auto;height:auto;min-width:0;max-width:min(100%,220px);
  min-height:var(--vinci-data-pill-h,38px);padding:var(--vinci-data-pill-pad,8px 14px);gap:6px;
  align-items:center;justify-content:center;border-radius:var(--vinci-data-pill-radius,999px)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-container="measuring"]>.vinci-operation-result-binding
  >.vinci-binding-pill>[data-vinci-value-pill-name],
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-container="settled"]>.vinci-operation-result-binding
  >.vinci-binding-pill>[data-vinci-value-pill-name]{
  display:block;flex:0 0 auto;width:auto;height:auto;white-space:nowrap
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-container="measuring"]>.vinci-operation-result-binding
  >.vinci-binding-pill>[data-vinci-value-pill-value],
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-container="settled"]>.vinci-operation-result-binding
  >.vinci-binding-pill>[data-vinci-value-pill-value]{
  display:block;flex:1 1 auto;width:auto;height:auto;min-width:0;max-width:125px;
  border-radius:0;outline:0;background:transparent;white-space:nowrap
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-container="closing"]>.vinci-operation-result-binding
  >.vinci-binding-pill{
  box-sizing:border-box;display:grid;width:var(--function-read-compact-width);height:38px;
  min-width:0;min-height:38px;padding:8px 14px;
  grid-template-columns:var(--function-read-compact-name-width) var(--function-read-compact-value-width);
  grid-template-rows:var(--function-read-compact-value-height);column-gap:6px;
  align-items:center;justify-content:center;border-radius:var(--vinci-data-pill-radius,999px)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-container="closing"]>.vinci-operation-result-binding
  >.vinci-binding-pill>[data-vinci-value-pill-name]{
  display:flex;width:var(--function-read-compact-name-width);height:var(--function-read-compact-value-height);
  align-items:center;justify-content:center;white-space:nowrap
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-container="closing"]>.vinci-operation-result-binding
  >.vinci-binding-pill>[data-vinci-value-pill-value]{
  display:grid;width:var(--function-read-compact-value-width);height:var(--function-read-compact-value-height);
  place-items:center;border-radius:0;outline-color:transparent;background:transparent;white-space:nowrap
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-transfer="waiting"]>.vinci-operation-result-binding
  >.vinci-binding-pill{
  border-style:dashed;border-color:rgba(122,74,8,.28);background:rgba(255,255,255,.82);box-shadow:none
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-transfer="waiting"] [data-vinci-value-pill-value]{
  color:rgba(79,70,59,.42)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-transfer="receiving"]>.vinci-operation-result-binding
  >.vinci-binding-pill{
  border-color:rgba(238,150,20,.62);box-shadow:0 0 0 4px rgba(238,150,20,.1),0 6px 16px rgba(0,0,0,.12)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-transfer="receiving"],
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-transfer="receiving"]>.vinci-operation-result-binding,
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-transfer="receiving"]>.vinci-operation-result-binding
  >.vinci-binding-pill{position:relative;z-index:20;overflow:visible!important}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  [data-function-read-transfer="filled"]>.vinci-operation-result-binding>.vinci-binding-pill{
  border-color:rgba(152,95,11,.38);box-shadow:0 6px 16px rgba(0,0,0,.12),0 0 0 3px rgba(122,74,8,.055)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read [data-function-read-transfer="filled"]{
  position:relative;z-index:20;overflow:visible!important
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  [data-vinci-value-pill-value][data-function-read-value]{
  position:relative;z-index:12;will-change:opacity,filter;
  transition:opacity .32s cubic-bezier(.32,.72,0,1),filter .32s ease
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  [data-function-read-value="waiting"]{opacity:0;filter:blur(1px)}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  [data-function-read-value="revealing"]{opacity:1;filter:blur(0);transition-delay:.14s}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  [data-function-read-value="settled"]{
  opacity:1;filter:blur(0);transition:opacity .16s linear,filter .16s linear
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vmark-ball-live[data-function-read-shell]{
  position:relative;isolation:isolate;overflow:visible!important;
  background:transparent!important;box-shadow:none!important
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vmark-ball-live[data-function-read-shell]::before{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:var(--vmark-ball-grad,var(--function-read-shell-background));
  box-shadow:var(--function-read-shell-shadow);
  opacity:1;transform:scale(1);filter:blur(0);
  transition:opacity .3s cubic-bezier(.32,.72,0,1),transform .3s cubic-bezier(.32,.72,0,1),filter .3s ease
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vmark-ball-live[data-state="mutation"][data-function-read-shell]::before{
  box-shadow:0 12px 30px rgba(21,17,13,.18),inset 0 -5px 12px rgba(122,74,8,.2),
    0 0 0 1px rgba(238,150,20,.18)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vmark-ball-live[data-function-read-shell] .vrow{position:relative;z-index:1}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vmark-ball-live[data-function-read-shell="fading"]::before{
  opacity:0;transform:scale(.94);filter:blur(1.5px)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vmark-ball-live[data-function-read-shell="gone"]::before{opacity:0;transform:scale(.94);filter:blur(1.5px)}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vfield[data-function-read-source="giving"]{
  border-color:rgba(238,150,20,.62);box-shadow:0 0 0 4px rgba(238,150,20,.1),0 6px 16px rgba(0,0,0,.16)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vfield[data-function-read-source]{
  z-index:2;overflow:visible!important;opacity:1;filter:blur(0);transform:scale(1);
  transition:opacity .32s cubic-bezier(.32,.72,0,1),transform .32s cubic-bezier(.32,.72,0,1),
    filter .32s ease,border-color .25s ease,box-shadow .28s ease,background-color .18s ease!important
}
/* During a condition's scalar hand-off the Ball lives in the root motion
   layer, outside `.vinci-program-function`. Remove only the source field's
   chrome here at its real DOM owner; retain padding/border width so the 900
   glyph never shifts while `< 400` travels toward it. */
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  >.semantic-visual-program[data-canonical-function-play="true"]:is(
    [data-function-flow-subphase="condition-value-dechroming"],
    [data-function-flow-subphase="condition-value-ready"],
    [data-function-flow-subphase="condition-value-moving"]
  ) .vfield:is(
    [data-function-read-source="value-only"],
    [data-function-read-source="value-giving"]
  ){
  border-color:transparent!important;background:transparent!important;box-shadow:none!important;
  transition:border-color .18s cubic-bezier(.32,.72,0,1),
    background-color .18s cubic-bezier(.32,.72,0,1),
    box-shadow .18s cubic-bezier(.32,.72,0,1)!important
}
@media (prefers-reduced-motion:reduce){
  :is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
    >.semantic-visual-program[data-canonical-function-play="true"]:is(
      [data-function-flow-subphase="condition-value-dechroming"],
      [data-function-flow-subphase="condition-value-ready"],
      [data-function-flow-subphase="condition-value-moving"]
    ) .vfield:is(
      [data-function-read-source="value-only"],
      [data-function-read-source="value-giving"]
    ){transition:none!important}
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vfield[data-function-read-source="lingering"]{
  border-color:rgba(238,150,20,.42);box-shadow:0 7px 18px rgba(0,0,0,.14)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vfield[data-function-read-source="leaving"]{
  opacity:0!important;filter:blur(1.5px);transform:scale(.94)!important;border-color:transparent;box-shadow:none
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vfield[data-function-read-source="gone"]{opacity:0!important;visibility:hidden;transform:scale(1)!important}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  [data-function-read-source].value{opacity:1!important;transition:opacity .24s ease}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  [data-function-read-source-name="releasing"]{
  display:inline-block;box-sizing:border-box;overflow:hidden;white-space:nowrap;will-change:width,max-width,opacity,transform,filter
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .value[data-function-read-value-source="moving"]{
  position:relative;z-index:32;opacity:1!important;filter:none;will-change:transform,filter;
  transition:opacity .16s linear
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .value[data-function-read-value-source="merged"]{
  position:relative;z-index:32;opacity:0!important;filter:none;transition:opacity .16s linear
}

/* A property-read Ball contracts by geometry, never by disappearance. Only
   the orb folds from 108px to 25px: its exact selected field stays full-size
   and pinned at the value-bay centre until its scalar has merged. */
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vf-ballwrap:is([data-function-read-actor="contracting"],[data-function-read-actor="contracting-returning"],[data-function-read-actor="home-pill-pinned"]){
  opacity:1!important;filter:none!important
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vmark-ball-live:is([data-function-read-shell="contracting"],[data-function-read-shell="contracted"],[data-function-read-shell="fading"],[data-function-read-shell="gone"])[data-state="collapsing"]{
  overflow:visible!important
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vmark-ball-live:is([data-function-read-shell="contracting"],[data-function-read-shell="contracted"],[data-function-read-shell="fading"],[data-function-read-shell="gone"])[data-state="collapsing"] .vrow{
  position:absolute!important;left:50%!important;top:50%!important;z-index:3;display:flex!important;width:max-content;
  opacity:1!important;visibility:visible!important;pointer-events:none;
  transform:translate(-50%,-50%)!important;transform-origin:center;
  transition:none!important
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vmark-ball-live:is([data-function-read-shell="contracting"],[data-function-read-shell="contracted"],[data-function-read-shell="fading"],[data-function-read-shell="gone"])[data-state="collapsing"]
  .vfield[data-function-read-source]:not([data-function-read-source="gone"]){
  opacity:1!important;visibility:visible!important;filter:none!important
}

/* Return is a canonical projection at the Function exit.  The exact local
   `after` Binding may visit its value bay, but never replaces that projection. */
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-return-transfer-seat{
  position:absolute;z-index:70;display:grid;place-items:center;overflow:visible;
  transform:translate(-50%,-50%);pointer-events:none
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-return-transfer-seat[hidden]{display:none!important}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-return-transfer-seat>.vinci-binding-pill{
  position:relative;z-index:2;flex:none;margin:0;will-change:transform,opacity,filter
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-return-output{
  transition:width .34s cubic-bezier(.32,.72,0,1),height .34s cubic-bezier(.32,.72,0,1),
    padding .34s cubic-bezier(.32,.72,0,1),border-radius .34s cubic-bezier(.32,.72,0,1),
    grid-template-columns .34s cubic-bezier(.32,.72,0,1),
    grid-template-rows .34s cubic-bezier(.32,.72,0,1),box-shadow .28s ease,border-color .28s ease
}
/* Resting Return values use the shared hover/focus reveal. During the Messi
   hand-off, the existing motion states temporarily seat that same detail in
   the Return bay; Reset removes the state and restores the quiet reveal. */
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-return-output[data-function-return-container]>[data-reveal="hover"]{
  position:static;translate:none;visibility:visible;pointer-events:none
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-return-output[data-function-return-container="open"]{
  box-sizing:border-box;display:grid;width:var(--function-return-open-width);height:var(--function-return-open-height);
  min-width:0;min-height:0;max-width:none;padding:4px;
  grid-template-columns:var(--function-return-open-name-width) var(--function-return-open-bay-width);
  grid-template-rows:var(--function-return-open-row-height);column-gap:4px;
  align-items:center;justify-content:center;border-radius:999px;overflow:visible;
  border-color:rgba(238,150,20,.5);box-shadow:0 7px 18px rgba(122,74,8,.12),0 0 0 3px rgba(238,150,20,.07)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-return-output[data-function-return-container="open"]>[data-vinci-value-pill-name]{
  display:flex;width:var(--function-return-open-name-width);height:var(--function-return-open-row-height);
  align-items:center;justify-content:center
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-return-output[data-function-return-container="open"]>[data-vinci-value-pill-value]{
  box-sizing:border-box;display:grid;width:var(--function-return-open-bay-width);
  height:var(--function-return-open-row-height);place-items:center;border-radius:999px;
  outline:1px dashed rgba(152,95,11,.22);outline-offset:-2px;background:rgba(250,249,248,.4)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-return-output[data-function-return-container="closing"]{
  box-sizing:border-box;display:grid;width:var(--function-return-compact-width);
  height:var(--function-return-compact-height);min-width:0;min-height:0;max-width:none;padding:8px 14px;
  grid-template-columns:var(--function-return-compact-name-width) var(--function-return-compact-value-width);
  grid-template-rows:var(--function-return-compact-row-height);column-gap:6px;
  align-items:center;justify-content:center;border-radius:999px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-return-output[data-function-return-container="closing"]>[data-vinci-value-pill-name],
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-return-output[data-function-return-container="closing"]>[data-vinci-value-pill-value]{
  display:grid;height:var(--function-return-compact-row-height);place-items:center
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-return-output[data-function-return-container="closing"]>[data-vinci-value-pill-name]{
  width:var(--function-return-compact-name-width)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-return-output[data-function-return-container="closing"]>[data-vinci-value-pill-value]{
  width:var(--function-return-compact-value-width);outline:0;background:transparent
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-return-output>[data-vinci-value-pill-value][data-function-return-value]{
  transition:opacity .28s cubic-bezier(.32,.72,0,1),filter .28s ease
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  [data-function-return-value="waiting"]{opacity:.12;filter:blur(1px)}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  [data-function-return-value="revealing"],[data-function-return-value="settled"]{opacity:1;filter:blur(0)}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-update-seat{
  min-height:0;opacity:0;transition:min-height .4s cubic-bezier(.32,.72,0,1),opacity .25s ease .12s
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-mutation:is([data-current="true"],[data-receiving="true"]) .vinci-function-playback-update-seat{
  min-height:116px;opacity:1
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-read .vinci-program-operation.vinci-property-operation{
  max-width:190px;overflow:hidden;text-overflow:ellipsis
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vf-ballwrap[data-function-born="false"]{
  opacity:0;filter:blur(2px);transform:translateY(-8px) scale(.72);pointer-events:none
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vf-ballwrap[data-function-born="true"]{
  opacity:1;filter:blur(0);transform:translateY(0) scale(1);
  transition:opacity .42s ease,filter .42s ease,transform .54s cubic-bezier(.22,.9,.2,1.18)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vf-ballwrap[data-function-read-actor="hidden"]{
  opacity:0!important;filter:blur(1.5px);transition:opacity .22s cubic-bezier(.32,.72,0,1),filter .22s ease
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vf-ballwrap[data-function-birth="arriving"]{
  opacity:0;filter:blur(2px);transform:translateY(-8px) scale(.72)
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  [data-operation-id][data-operation-kind="mutation"]{display:none!important}

/* Control-flow Functions use the same persistent source ledger, but a gate is
   taller than a straight-line Pill.  Keep the exact Branch/Loop, Path lanes,
   awaited steps and bottom Return ports visible together; playback may light
   those nodes, never substitute a second diagram. */
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-control-topology="nested"]{
  width:min(100%,440px);min-height:0;padding-bottom:66px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-program-function[data-function-control-topology="nested"]{
  width:100%!important;max-width:440px!important;padding-bottom:66px!important
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-control-topology="nested"] [data-function-body]{
  min-height:0;height:auto;padding-bottom:4px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-control-topology="nested"] .vinci-function-playback-sequence{
  height:auto;min-height:0;gap:0
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-control-topology="nested"] [data-function-source-row]{
  width:100%;height:auto;min-height:54px;padding:18px 8px 8px;opacity:.8
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-control-topology="nested"] [data-function-source-row][data-function-await-step]{
  min-height:94px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-control-topology="nested"] [data-function-source-row][data-function-control-kind]{
  min-height:132px;padding-top:23px;overflow:visible
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-control-topology="nested"] [data-function-source-row].vinci-function-playback-mutation{
  min-height:76px;padding-top:40px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-control-topology="nested"] [data-function-source-row].vinci-function-playback-mutation
  .vinci-function-row-mark{
  min-height:24px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-control-topology="nested"] [data-function-source-row][data-current="true"]{
  height:auto
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-control-topology="nested"] .vinci-function-return-ports{
  width:calc(100% - 22px);max-width:418px
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-return-port>.vinci-function-return-output[data-reveal-host]{
  overflow:visible
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .vinci-program-function[data-function-if-layout="step-fork"]:not([data-function-play-state="done"]){
  padding-top:68px!important;padding-bottom:12px!important
}
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"]
  .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
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-program-function[data-function-if-layout="direct-exits"] .vinci-function-playback-scope{
  display:none!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-program-function[data-function-if-layout="step-fork"]{
  width:100%!important;max-width:440px!important;min-height:352px!important;
  --vinci-if-branch-collapsed-h:80px;--vinci-if-child-collapsed-h:58px;
  --vinci-if-branch-active-h:160px;--vinci-if-child-active-h:160px;
  padding-bottom:12px!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-program-function[data-function-if-layout="step-fork"] [data-function-body]{
  min-height:270px!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .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;min-height:260px!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  grid-template-rows:56px 8px var(--vinci-if-live-branch-h) 32px
    var(--vinci-if-live-child-h) 24px!important;
  column-gap:16px!important;row-gap:0!important;
  align-content:start!important;align-items:start!important;justify-items:stretch!important;
  transition:grid-template-rows .46s cubic-bezier(.32,.72,0,1)!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-playback-scope{
  height:56px!important;min-height:56px!important;flex-basis:56px!important;padding:0!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-playback-scope-contents{
  /* Centre the complete Ball + binding-label mark, not only the Ball. The
     label extends 14px below its actor, so the typed Scope seat sits 7px
     above the shelf's geometric centre while remaining the real Port. */
  padding:0 8px 14px!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-playback-scope-seat:not([data-function-scope-active-resident]){
  min-height:42px!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-program-function[data-function-if-layout="step-fork"]
  .vinci-function-playback-scope-seat[data-function-scope-active-resident]{
  width:0!important;height:0!important;min-width:0!important;min-height:0!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-source-row][data-function-if-layout="step-fork"]{
  grid-column:1/-1!important;grid-row:3!important;justify-self:center!important;
  width:min(100%,286px)!important;
  min-height:0!important;height:100%!important;
  padding:17px 8px 10px!important;overflow:visible!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row]{
  grid-row:5!important;box-sizing:border-box!important;width:100%!important;
  min-width:0!important;min-height:0!important;
  height:var(--vinci-if-child-collapsed-h)!important;align-self:start!important;
  padding:22px 5px 10px!important;overflow:visible!important;
  transition:height .46s cubic-bezier(.32,.72,0,1),opacity .28s ease,
    border-color .28s ease,background-color .28s ease,box-shadow .34s ease!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row="TRUE"]{grid-column:1!important}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row="FALSE"]{grid-column:2!important}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .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"]
  ){
  overflow:visible!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .vinci-program-function[data-function-if-layout="step-fork"]
  [data-function-if-child-step-row][data-function-flow-geometry-hold="statement"]{
  height:100%!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .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"]
  ){
  overflow:visible!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .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][data-function-flow-geometry-hold="statement"]
  ){
  --vinci-if-live-child-h:var(--vinci-if-child-active-h)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-call-frame-capability="source-rehearsal"]
  .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)
}
/* Every ordinary Function operation exposes the same typed input/work/output
   topology as an IF child Step. Collapsed rows remain compact; the active row
   opens a quiet work bay before its destinations are measured, so the Ball
   never chases a moving box or parks on top of authored source text. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function
  [data-function-typed-step]:not([data-function-if-child-step-row]):not([data-function-loop-header]):not([data-function-loop-projected-phase-step]):not([data-function-loop-test-node]:not([data-decision-condition])){
  height:58px!important;min-height:58px!important;padding-top:18px;
  transition:height .34s cubic-bezier(.4,0,.2,1),opacity .28s ease,border-color .28s ease,
    background-color .28s ease,box-shadow .34s ease
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function
  [data-function-typed-step]:not([data-function-if-child-step-row]):not([data-function-loop-header]):not([data-function-loop-projected-phase-step]):not([data-function-loop-test-node]:not([data-decision-condition])):is([data-current="true"],[data-receiving="true"],
    [data-function-flow-geometry-hold="statement"]){
  height:104px!important;min-height:104px!important;overflow:visible!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function
  [data-function-typed-step].vinci-function-playback-mutation:not([data-function-if-child-step-row]):not([data-function-loop-header]):not([data-function-loop-projected-phase-step]):not([data-function-loop-test-node]:not([data-decision-condition])):is(
    [data-current="true"],[data-receiving="true"],[data-function-flow-geometry-hold="statement"]){
  height:144px!important;min-height:144px!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function [data-function-typed-step]>.vinci-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)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function [data-function-typed-step]>.vinci-function-step-input-port{top:-5px}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function [data-function-typed-step]>.vinci-function-step-output-port{bottom:-5px}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function [data-function-typed-step]>.vinci-function-step-work-dock{
  /* Work belongs at the optical centre of every expanded typed Step. A
     topology-specific lower dock makes the same mutation Ball appear to fall
     onto the output Port instead of opening in the Step which owns it. */
  position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function
  [data-function-typed-step]:not([data-function-if-child-step-row]):not([data-function-loop-header]):not([data-function-loop-projected-phase-step]):not([data-function-loop-test-node]:not([data-decision-condition]))[data-current="true"]>.vinci-function-row-mark{
  /* Expansion must move authored content away from the receiving mouth, not
     lift it through the Ball parked on that exact input Port. The mark can
     keep its natural centre while the carrier owns the measured work dock. */
  transform:none;transition:opacity .16s ease,transform .2s ease
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]:is(
    [data-function-flow-subphase="step-entry"],[data-function-flow-subphase="step-inside"])
  .vinci-program-function:not([data-function-if-layout="step-fork"])
  [data-function-typed-step][data-current="true"]>:is(
    .vinci-function-row-mark,.vinci-function-playback-source-code){
  visibility:hidden;opacity:0;transition:none
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"][data-function-flow-event="property.write"][data-function-flow-subphase="step-work"]
  .vinci-program-function:not([data-function-if-layout="step-fork"])
  [data-function-typed-step][data-current="true"]>:is(
    .vinci-function-row-mark,.vinci-function-playback-source-code){
  visibility:hidden;opacity:0;transition:none
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function [data-function-typed-step][data-current="true"]>.vinci-function-step-port{
  border-color:#c97d0e;background:#fcfcfb;box-shadow:0 0 0 4px rgba(238,150,20,.1)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function:not([data-function-if-layout="step-fork"])
  .vinci-function-playback-mutation{
  align-content:center!important;padding-top:18px!important
}
/* A source-derived write reuses the canonical mutation window from the Messi
   grammar.  Give that exact-field window a real route lane above the active
   Step instead of letting it cover the preceding authored operation. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function:not([data-function-if-layout="step-fork"])
  .vinci-function-playback-connector:has(+ .vinci-function-playback-mutation[data-current="true"]){
  flex:0 0 124px!important;height:124px!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function:not([data-function-if-layout="step-fork"])
  .vinci-function-playback-connector:has(+ [data-function-typed-step].vinci-function-playback-mutation[data-current="true"]){
  flex:0 0 10px!important;height:10px!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-function-playback-source-code{
  left:12px!important;right:12px!important;width:auto!important;max-width:none!important;
  transform:none!important;transition:color .25s ease,opacity .25s ease!important
}
/* Older canonical playback selectors slide active source copy left by half its
   width while it fades. That animation crosses the measured Step gutter and
   can sweep readable text under the carrier. Typed Steps keep source copy in
   its own row at every lifecycle state; only color/opacity may change. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function [data-function-typed-step]
    >.vinci-function-playback-source-code,
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function [data-function-typed-step][data-current="true"]
    >.vinci-function-playback-source-code{
  left:12px!important;right:12px!important;width:auto!important;max-width:none!important;
  transform:none!important;transition:color .25s ease,opacity .25s ease!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function:not([data-function-if-layout="step-fork"])
  .vinci-function-playback-mutation .vinci-function-playback-source-code{
  opacity:1!important;transform:none!important
}
/* The approved straight Messi lesson predates the branch/Loop clearance
   presentation. Keep its authored mutation copy on the original centre line
   and let the active Step hide it while the Ball travels vertically. */
#semantic-stage[data-canonical-function-variant="straight-line"]
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function [data-function-typed-step].vinci-function-playback-mutation
  .vinci-function-playback-source-code{
  left:50%!important;right:auto!important;width:calc(100% - 24px)!important;
  max-width:calc(100% - 24px)!important;transform:translateX(-50%) translateY(0)!important
}
#semantic-stage[data-canonical-function-variant="straight-line"]
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function [data-function-typed-step].vinci-function-playback-mutation[data-current="true"]
  .vinci-function-playback-source-code{
  opacity:0!important;transform:translateX(-50%) translateY(-4px)!important;pointer-events:none
}
#semantic-stage[data-canonical-function-variant="straight-line"]
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  [data-function-typed-step].vinci-function-playback-mutation[data-function-step-lifecycle="focused"]
  .vinci-function-playback-source-code{
  opacity:0!important;visibility:hidden!important;
  transform:translateX(-50%) translateY(-4px)!important;pointer-events:none
}

/* Canonical field-change work device. The shell is presentation-only: the
   motion layer still carries one exact Ball and the Ball still owns its one
   exact field ValuePill. Direct stores use the left bay alone. A compound
   change adds one computation bay without moving or duplicating that field. */
/* Born at rest. The bay's resting geometry must not wait for the stage flag
   that arrives after mount; otherwise the first frame lays it out full-size
   past the Function frame and a transition slides it home. These values equal
   the canonical resting rule below, so the flag's arrival changes nothing. */
.semantic-visual-program .vinci-field-change-work-shell{
  --vinci-field-work-w:146px;--vinci-field-work-left:146px;--vinci-field-work-anchor:-73px;
  position:absolute;left:0;top:0;display:grid;grid-template-columns:var(--vinci-field-work-left) 0;
  width:var(--vinci-field-work-w);height:132px;box-sizing:border-box;overflow:hidden;
  transform:translate(var(--vinci-field-work-anchor),-50%) scale(.96);transform-origin:center;
  opacity:0;visibility:hidden;pointer-events:none
}
.semantic-visual-program .vinci-field-change-work-shell[data-field-change-write-mode="read-modify-write"]{
  --vinci-field-work-w:238px;--vinci-field-work-left:146px;
  grid-template-columns:var(--vinci-field-work-left) minmax(0,1fr)
}
:where(#semantic-stage[data-canonical-function="true"],:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-field-change-work-shell{
  --vinci-field-work-w:146px;
  --vinci-field-work-left:146px;
  --vinci-field-work-anchor:-73px;
  position:absolute;left:0;top:0;z-index:4;display:grid;
  grid-template-columns:var(--vinci-field-work-left) 0;
  width:var(--vinci-field-work-w);height:132px;box-sizing:border-box;
  overflow:hidden;transform:translate(var(--vinci-field-work-anchor),-50%) scale(.96);
  transform-origin:center;border:1px solid rgba(238,150,20,.34);border-radius:70px;
  background:linear-gradient(115deg,rgba(255,252,246,.96),rgba(255,255,255,.9));
  box-shadow:0 14px 34px rgba(91,58,18,.07),inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:width .42s cubic-bezier(.32,.72,0,1),
    height .42s cubic-bezier(.32,.72,0,1),
    grid-template-columns .42s cubic-bezier(.32,.72,0,1),
    opacity .22s ease,transform .42s cubic-bezier(.32,.72,0,1),
    border-color .28s ease,box-shadow .3s ease
}
:where(#semantic-stage[data-canonical-function="true"],:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program
  .vinci-field-change-work-shell[data-field-change-write-mode="read-modify-write"]{
  --vinci-field-work-w:238px;
  --vinci-field-work-left:146px;
  grid-template-columns:var(--vinci-field-work-left) minmax(0,1fr)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program
  [data-function-typed-step]:is([data-current="true"],[data-receiving="true"],
    [data-function-flow-geometry-hold="statement"])
  >.vinci-function-step-work-dock>.vinci-field-change-work-shell{
  opacity:1;visibility:visible;
  transform:translate(var(--vinci-field-work-anchor),-50%) scale(1)
}
:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"]
  .semantic-visual-program [data-ball-seat]:has(>.vinci-field-change-work-shell){
  min-height:156px;isolation:isolate
}
:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"]
  .semantic-visual-program [data-ball-seat]>.vf-ballwrap{z-index:5}
:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"][data-primary-view="play"]
  .semantic-visual-program .vinci-program-operation.vinci-field-change{
  display:none
}
:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"]
  .semantic-visual-program [data-ball-seat]>.vinci-field-change-work-shell{
  left:50%;top:50%
}
:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"]
  .semantic-visual-program [data-ball-seat]:has(>.vf-ballwrap[data-mutating="true"])
  >.vinci-field-change-work-shell{
  opacity:1;visibility:visible;
  transform:translate(-73px,-50%) scale(1)
}
/* At rest, Change is already visible as Vinci rather than being reprinted as
   source text: the one canonical Ball opens a quiet field window and its one
   exact target ValuePill carries both the current value and the authored
   change. Nothing is duplicated beside the Ball. */
:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"][data-primary-view="play"]
  .semantic-visual-program [data-ball-seat]:not(:has(>.vf-ballwrap[data-mutating="true"])):has(>.vf-ballwrap .vmark-ball-live[data-state="collapsed"])
  >.vinci-field-change-work-shell{
  width:146px;height:156px;
  grid-template-columns:146px 0;border-color:transparent;border-radius:78px;
  background:transparent;box-shadow:none;
  opacity:1;visibility:visible;
  transform:translate(-73px,-50%) scale(1)
}
:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"][data-primary-view="play"]
  .semantic-visual-program [data-ball-seat]:has(>.vinci-field-change-work-shell)
  >.vf-ballwrap>.vmark-ball-live-wrap>.vmark-ball-live[data-state="collapsed"]{
  box-sizing:border-box;width:132px!important;height:132px!important;padding:4px!important;gap:3px!important;
  box-shadow:0 12px 30px rgba(21,17,13,.18),inset 0 -5px 12px rgba(122,74,8,.2),
    0 0 0 1px rgba(238,150,20,.18)
}
:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"][data-primary-view="play"]
  .semantic-visual-program [data-ball-seat]:has(>.vinci-field-change-work-shell)
  >.vf-ballwrap>.vmark-ball-live-wrap>.vmark-ball-live[data-state="collapsed"]
  >:is(.vinci-ball-binding-details,.vinci-ball-references-pill,
    .vmark-ball-live-edit-toggle,.vmark-ball-live-add-field){display:none!important}
:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"][data-primary-view="play"]
  .semantic-visual-program [data-ball-seat]:has(>.vinci-field-change-work-shell)
  >.vf-ballwrap>.vmark-ball-live-wrap>.vmark-ball-live[data-state="collapsed"]>.vrow{
  display:contents;opacity:1;visibility:visible;pointer-events:none;transform:none
}
:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"][data-primary-view="play"]
  .semantic-visual-program [data-ball-seat]:has(>.vinci-field-change-work-shell)
  >.vf-ballwrap>.vmark-ball-live-wrap>.vmark-ball-live[data-state="collapsed"] .vfield{
  display:none
}
:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"][data-primary-view="play"]
  .semantic-visual-program [data-ball-seat]:has(>.vinci-field-change-work-shell)
  >.vf-ballwrap>.vmark-ball-live-wrap>.vmark-ball-live[data-state="collapsed"]
  .vfield[data-field-change-rest-target="true"]{
  display:inline-flex;max-width:124px;padding:8px 10px;gap:5px;
  opacity:1;visibility:visible;pointer-events:auto;transform:none;cursor:pointer
}
.vfield[data-field-change-rest-target="true"]:is(:hover,:focus-visible){
  outline:none;border-color:rgba(122,74,8,.52)!important;
  box-shadow:0 0 0 3px rgba(238,150,20,.12),0 7px 16px rgba(76,46,8,.13)!important
}
.vinci-field-change-rest-inline{display:none}
:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"][data-primary-view="play"]
  .semantic-visual-program [data-ball-seat]:not(:has(>.vf-ballwrap[data-mutating="true"]))
  .vfield[data-field-change-rest-target="true"]>.vinci-field-change-rest-inline{
  display:inline-flex;align-items:center;flex:0 0 auto;margin-left:1px;padding-left:7px;
  border-left:1px solid rgba(122,74,8,.2);color:#74480b;
  font:780 11px/1 var(--mono);letter-spacing:.01em;white-space:nowrap
}
:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"]
  .semantic-visual-program .vmark-ball-live[data-mutation-editing="true"]{
  box-sizing:border-box;min-width:min(390px,calc(100vw - 72px));min-height:220px;
  padding:42px 28px 30px!important;border-radius:72px;overflow:visible;
  transition:width .34s cubic-bezier(.32,.72,0,1),height .34s cubic-bezier(.32,.72,0,1),
    padding .34s cubic-bezier(.32,.72,0,1),border-radius .34s cubic-bezier(.32,.72,0,1)
}
:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"]
  .semantic-visual-program .vmark-ball-live[data-mutation-editing="true"]
  .vmark-ball-live-field-editor[data-field-change-expression-editor="true"]{
  display:contents
}
:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"]
  .semantic-visual-program .vmark-ball-live[data-mutation-editing="true"]
  .vinci-value-pill-editor[data-target-kind="field-change-expression"]{
  justify-content:center;max-width:min(100%,560px);padding:10px 14px;gap:8px
}
.vinci-field-change-editor-current{
  display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:34px;
  padding:0 10px;border:1px solid rgba(122,74,8,.16);border-radius:999px;
  color:#8b8175;background:#f7f3ed;font:700 13px/1 var(--mono)
}
.vinci-field-change-editor-operator{
  appearance:none;-webkit-appearance:none;display:inline-grid;min-width:48px;min-height:34px;
  padding:0 22px 0 11px;border:1px solid #cbbcf0;border-radius:999px;
  color:#6540a8;background:#f2edff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%236540a8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 8px center;
  box-shadow:0 3px 9px rgba(104,65,207,.1);font:750 13px/1 var(--mono);cursor:pointer
}
.vinci-field-change-editor-operator:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(104,65,207,.14),0 3px 9px rgba(104,65,207,.1)
}
@media(max-width:650px){
  :is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"]
    .semantic-visual-program .vmark-ball-live[data-mutation-editing="true"]{
    min-width:min(340px,calc(100vw - 40px));padding:38px 18px 26px!important
  }
  :is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"]
    .semantic-visual-program .vmark-ball-live[data-mutation-editing="true"]
    .vinci-value-pill-editor[data-target-kind="field-change-expression"]{
    max-width:100%;gap:6px
  }
}
:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"]
  .semantic-visual-program .vinci-field-change-work-shell::after{
  content:attr(data-field-change-intent);position:absolute;left:106px;right:14px;top:50%;
  overflow:hidden;transform:translateY(-50%);color:#5d5145;
  font:720 13px/1.2 var(--mono);letter-spacing:.005em;text-align:left;
  text-overflow:ellipsis;white-space:nowrap;opacity:0;filter:blur(1px);
  transition:opacity .18s ease,filter .22s ease,transform .34s cubic-bezier(.32,.72,0,1)
}
:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"][data-primary-view="play"]
  .semantic-visual-program [data-ball-seat]:not(:has(>.vf-ballwrap[data-mutating="true"])):has(>.vf-ballwrap .vmark-ball-live[data-state="collapsed"])
  >.vinci-field-change-work-shell::after{
  opacity:0;filter:blur(1px);transform:translateY(-50%)
}
:where(#semantic-stage[data-canonical-function="true"],:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-field-change-left-bay,
:where(#semantic-stage[data-canonical-function="true"],:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-field-change-operator-bay{
  position:relative;display:grid;min-width:0;height:100%;place-items:center
}
:where(#semantic-stage[data-canonical-function="true"],:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program
  .vinci-field-change-work-shell[data-field-change-write-mode="read-modify-write"]
  .vinci-field-change-left-bay::after{
  content:"";position:absolute;right:0;top:19px;bottom:19px;width:1px;
  background:linear-gradient(transparent,rgba(122,74,8,.16) 24% 76%,transparent)
}
:where(#semantic-stage[data-canonical-function="true"],:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-field-change-operator-bay::before{
  content:attr(data-field-change-write-operator) " " attr(data-field-change-write-operand);
  color:#74480b;font:750 17px/1 var(--mono);letter-spacing:.02em;white-space:nowrap;
  opacity:0;transform:translateX(7px);filter:blur(1px);
  transition:opacity .2s ease,transform .36s cubic-bezier(.32,.72,0,1),filter .24s ease
}
:where(#semantic-stage[data-canonical-function="true"],:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program
  .vinci-field-change-work-shell[data-field-change-write-mode="read-modify-write"]
  [data-field-change-operator-bay]::before{
  opacity:0;transform:translateX(7px);filter:blur(1px)
}
:where(#semantic-stage[data-canonical-function="true"],:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program
  .vinci-field-change-work-shell[data-field-change-write-mode="read-modify-write"][data-field-change-stage="operator-evaluate"]
  [data-field-change-operator-bay]::before{
  opacity:1;transform:translateX(0);filter:blur(0)
}
:where(#semantic-stage[data-canonical-function="true"],:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program
  .vinci-field-change-work-shell[data-field-change-stage="write"]{
  border-color:rgba(238,150,20,.55);box-shadow:0 16px 38px rgba(91,58,18,.09),
    0 0 0 4px rgba(238,150,20,.045),inset 0 1px 0 rgba(255,255,255,.92)
}
:where(#semantic-stage[data-canonical-function="true"],:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program
  .vinci-field-change-work-shell[data-field-change-stage="settled"]{
  border-color:rgba(152,95,11,.35)
}
@media(max-width:650px){
  :is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"]
    .semantic-visual-program [data-ball-seat]:has(>.vf-ballwrap[data-mutating="true"])
    >.vinci-field-change-work-shell:not([data-field-change-write-mode="read-modify-write"]){
    width:128px;grid-template-columns:128px 0;transform:translate(-64px,-50%) scale(1)
  }
  :where(#semantic-stage[data-canonical-function="true"],:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"],[data-vinci-function-presentation="canonical"])
    .semantic-visual-program
    .vinci-field-change-work-shell[data-field-change-write-mode="read-modify-write"]{
    --vinci-field-work-w:min(220px,calc(50% + 73px));
    --vinci-field-work-left:138px;--vinci-field-work-anchor:-69px
  }
  :is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"][data-primary-view="play"]
    .semantic-visual-program [data-ball-seat]:not(:has(>.vf-ballwrap[data-mutating="true"])):has(>.vf-ballwrap .vmark-ball-live[data-state="collapsed"])
    >.vinci-field-change-work-shell{
    width:146px;grid-template-columns:146px 0;transform:translate(-73px,-50%) scale(1)
  }
  :is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"]
    .semantic-visual-program .vinci-field-change-work-shell::after{
    left:96px;right:10px;font-size:11.5px;letter-spacing:-.01em
  }
  :is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"][data-primary-view="play"]
    .semantic-visual-program [data-ball-seat]:not(:has(>.vf-ballwrap[data-mutating="true"]))
    .vfield[data-field-change-rest-target="true"]>.vinci-field-change-rest-inline{
    padding-left:5px;font-size:10px
  }
}
@media(prefers-reduced-motion:reduce){
  :where(#semantic-stage[data-canonical-function="true"],:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"],[data-vinci-function-presentation="canonical"])
    .semantic-visual-program .vinci-field-change-work-shell,
  :where(#semantic-stage[data-canonical-function="true"],:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"],[data-vinci-function-presentation="canonical"])
    .semantic-visual-program .vinci-field-change-operator-bay::before,
  :is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"]
    .semantic-visual-program .vinci-field-change-work-shell::after{
    transition-duration:.01ms!important
  }
}
/* Function Flow v5 remains one visible graph through Close.  Solid graph
   edges distinguish known source-derived routes from the dashed vocabulary
   reserved elsewhere for Unknown/dormant structure.  The home Port is lifted
   clear of Call so the first graph edge has real, readable travel. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-function-exit::after,
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-function-call-routes::after{
  border-left-style:solid!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-function-entry:not([data-function-call-entry-handoff="true"])::before{display:none!important}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-function-call-routes::after{height:15px!important}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-call-reference-tether{
  position:absolute!important;left:50%!important;top:-37px!important;
  width:1px!important;height:36px!important;transform:translateX(-50%)!important;
  border-top:0!important;border-left:1.5px solid rgba(122,74,8,.42)!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-call-reference-tether::after{
  left:-3px!important;right:auto!important;bottom:-1px!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-function-call-routes:has(>.vinci-function-object-parameter-socket[data-function-entry-handoff])
  .vinci-call-reference-tether{
  top:-81px!important;height:80px!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-ball-home-anchor{transform:translateY(-42px)}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function[data-function-if-layout="step-fork"][data-function-play-state="done"]{
  width:min(100%,470px)!important;min-height:352px!important;
  padding:68px 12px 12px!important;opacity:1!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function[data-function-if-layout="step-fork"][data-function-play-state="done"] [data-function-body]{
  /* DONE is the compact proof frame of the exact Return handoff. */
  max-height:none!important;min-height:270px!important;padding:0!important;
  opacity:1!important;transform:none!important;overflow:visible!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function:not([data-function-if-layout="step-fork"])[data-function-play-state="done"]{
  width:min(100%,350px)!important;min-height:276px!important;
  padding:68px 12px 14px!important;opacity:1!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function:not([data-function-if-layout="step-fork"])[data-function-play-state="done"] [data-function-body]{
  max-height:none!important;min-height:214px!important;padding-block:0!important;
  opacity:1!important;transform:none!important;overflow:visible!important
}
/* A Function containing only Return has no body Step by design: Return belongs
   to the exit mouth.  Keep Local Scope and that exit in one compact frame
   instead of reserving the same empty 214px statement chamber used by a real
   typed Step. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function[data-function-typed-step-count="0"]:not([data-function-if-layout="step-fork"]){
  min-height:214px!important;padding:68px 12px 62px!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function[data-function-typed-step-count="0"]:not([data-function-if-layout="step-fork"])
  [data-function-body]{
  max-height:none!important;min-height:84px!important;padding-block:0!important;
  opacity:1!important;transform:none!important;overflow:visible!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function[data-function-typed-step-count="0"]:not([data-function-if-layout="step-fork"])
  .vinci-function-playback-sequence{
  min-height:84px!important
}
/* Structure-only Function-family Atlas pages show this same anatomy without
   inventing Play.  They use the exact renderer-owned Function, scope ledger,
   Step ports and Return mouth; only the evidence state remains dormant. */
:is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  >.semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]{
  min-height:500px;padding:24px 12px 100px;border-top:1px solid rgba(21,17,13,.065);
  background-image:radial-gradient(circle,rgba(122,74,8,.055) .7px,transparent .8px);
  background-size:28px 28px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  .vinci-program-function[data-scope-view="open"]{
  width:min(100%,370px);min-height:0;padding:44px 12px 62px;overflow:visible;
  border:1px solid rgba(57,48,37,.18);border-radius:20px;background:rgba(255,255,255,.96);
  box-shadow:0 18px 44px rgba(54,40,24,.09)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  .vinci-program-function[data-scope-view="open"] [data-function-body]{
  display:block;width:100%;max-height:none;min-height:0;padding:0;overflow:visible;
  opacity:1;transform:none;border:0!important;background:transparent!important;box-shadow:none!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  .vinci-function-playback-sequence:not([hidden]){
  display:flex;flex-direction:column;align-items:center;width:100%;height:auto;min-height:0;overflow:visible
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  .vinci-function-playback-sequence>[data-function-source-row]{width:100%}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  .vinci-function-playback-connector{
  display:flex;flex:0 0 10px;width:10px;height:10px;flex-direction:column;align-items:center;
  color:rgba(122,74,8,.34)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  .vinci-function-playback-line{display:block;width:1.5px;min-height:1px;flex:1;background:currentColor}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  .vinci-function-playback-port{
  box-sizing:border-box;display:block;width:6px;height:6px;flex:0 0 6px;border:1px solid currentColor;
  border-radius:50%;background:#fff
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  .vinci-function-playback-terminal-connector{
  position:relative;z-index:4;display:flex;flex:0 0 62px;width:1.5px;height:62px;margin-bottom:-62px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  .vinci-program-function[data-scope-view="open"]>.vinci-function-entry::after{
  content:"";position:absolute;left:0;top:7px;width:1px;height:39px;
  border-left:1.5px solid rgba(122,74,8,.34)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  [data-function-typed-step]>.vinci-function-playback-source-code{display:none}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-play="true"]
  .vinci-function-playback-terminal-connector{display:none!important}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  .vinci-function-port-mouth{
  width:12px;height:12px;border-width:1.5px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  .vinci-function-entry::before,
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  .vinci-function-exit::after,
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  .vinci-function-call-routes::after{
  border-left-style:solid
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  [data-function-typed-step]:not([data-function-if-child-step-row]){
  /* Source reading must accommodate the shared operation and its disclosures.
     A fixed playback-sized seat lets Await and template content cover later steps. */
  position:relative;height:auto;min-height:58px;padding-top:18px;overflow:visible
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  [data-function-typed-step]>.vinci-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)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  [data-function-typed-step]>.vinci-function-step-input-port{top:-5px}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  [data-function-typed-step]>.vinci-function-step-output-port{bottom:-5px}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  [data-function-typed-step]>.vinci-function-step-work-dock{
  position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  .vinci-program-function[data-function-typed-step-count="0"][data-scope-view="open"]{
  min-height:156px;padding-bottom:54px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  .vinci-program-function[data-function-typed-step-count="0"]
  :is([data-function-body],.vinci-function-playback-sequence){
  min-height:36px
}
/* Close settles from the Function mouth into Return's bay. Preserve the
   active frame's terminal reserve while that exact result owns the geometry;
   otherwise DONE drops 48px of bottom padding underneath the travelling Ball
   and forces a second corrective motion after the semantic handoff. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function:not([data-function-if-layout="step-fork"])[data-function-play-state="done"]:has(
    [data-function-flow-geometry-hold]){
  padding-bottom:62px!important
}
@media (prefers-reduced-motion:reduce){
  :is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"] .vmark-ball-live::before,
  :is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program[data-canonical-function-play="true"] *,
  :is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-function-transport *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media (max-width:650px){
  :where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
    .semantic-visual-program
    .vinci-call-operation.vinci-function-boundary-call-step:not(.vinci-function-object-call-step){
    flex:1 1 0;width:min(272px,calc(100vw - 56px));max-width:272px
  }
  :where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
    .semantic-visual-program[data-function-flow-evidence="source-derived"]
    [data-function-flow-carrier] .vmark-ball-live[data-state="expanded"]{
    --vinci-ball-expanded:min(425px,calc(100vw - 32px))!important;
    max-width:calc(100vw - 32px)!important;max-height:calc(100vw - 32px)!important;
    box-sizing:border-box
  }
  :is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]){
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:0
  }
  :is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-primary-view-switch{
    grid-column:1;grid-row:1;justify-self:start;max-width:calc(100% - 20px);box-sizing:border-box
  }
  :is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-function-transport{
    grid-column:1;grid-row:2;width:calc(100% - 20px);max-width:calc(100% - 20px);box-sizing:border-box;
    margin:0 10px 7px
  }
  :is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program:is(
    [data-canonical-function-surface="true"],
    [data-canonical-function-play="true"],
    [data-canonical-function-play="false"]
  ){
    grid-column:1;grid-row:3;min-width:0;max-width:100%;padding-inline:8px
  }
  :is(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])>.semantic-visual-program
    .vinci-program-function[data-scope-reader="written-order"]{
    width:min(100%,350px);max-width:calc(100% - 4px)
  }
  :where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]) .semantic-visual-program [data-function-source-row]{padding-inline:5px}
}

/* The two eyebrow labels this page owns carry claims — which panel you are
   reading, and whether what is about to move is a rehearsal or a recording.
   --orange-deep lands at 3.91:1; these two say something that has to survive
   being read, so they take the next stop down at 5.28:1. */

/* Counted Loop inside the canonical Function grammar.

   The Function frame, entry, parameter seat, Local Scope and Return remain the
   shared Messi primitives. The Loop adds only one enclosure: canonical
   Step-shaped INIT/BODY/UPDATE phases, a passive Loop-local Binding shelf, one
   compact shared condition gate, and solid typed routes. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]{
  width:min(100%,420px)!important;max-width:420px!important;min-height:0!important;
  padding-bottom:58px!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  .vinci-function-playback-sequence[data-function-loop-layout="nested-body"]{
  display:grid!important;place-items:center!important;gap:10px!important;
  width:100%!important;min-height:0!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-enclosure]{
  position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);
  box-sizing:border-box;width:calc(100% - 8px);min-width:0;margin:0 4px 8px;
  padding:14px 20px 22px;
  overflow:visible
}

/* Retired Loop-only furniture must not survive a hot reconcile. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  :is([data-function-loop-after-label],[data-function-loop-cycle-rail],
    [data-function-loop-edge-clause],.vinci-function-loop-entrance-label){
  display:none!important
}

/* The authored for row is only the controller owner. Its ordinary input Port
   remains visible; TEST owns the split and UPDATE owns the backedge. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-header]{
  position:relative!important;z-index:6;display:block!important;box-sizing:border-box!important;
  width:100%!important;min-height:0!important;height:auto!important;padding:13px 0 0!important;
  overflow:visible!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;opacity:1!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-header]>.vinci-function-playback-step-kind{
  left:0!important;top:0!important;color:#72501d!important;font-weight:850!important;
  letter-spacing:.12em
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-header]>.vinci-function-playback-source-code{display:none!important}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-header]>.vinci-function-row-mark{
  display:grid;place-items:center;width:100%;min-width:0;overflow:visible
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-header]>.vinci-function-step-input-port{
  position:absolute;left:min(50%,143px);top:-5px;z-index:10;display:block;box-sizing:border-box;
  transform:translateX(-50%)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-header]>:is(.vinci-function-step-output-port,.vinci-function-step-work-dock){
  display:none!important
}

:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-control]{
  display:block!important;box-sizing:border-box!important;width:100%!important;max-width:none!important;
  padding:0!important;overflow:visible!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-control]>.vinci-authored-operation-header,
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-control] .vinci-mini-flow-arrow{display:none!important}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-control]>.vinci-control-diagram{
  position:relative;display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  grid-auto-rows:auto;place-items:center start;gap:10px!important;box-sizing:border-box;
  width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;
  padding:8px 0 2px!important;overflow:visible
}

/* INIT and UPDATE are authored for-header phases, not invented peer Operations.
   They deliberately reuse the normal canonical Step surface and typed
   input/work/output anatomy while remaining owned by the Loop. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  :is([data-function-loop-projected-phase-step="init"],
    [data-function-loop-projected-phase-step="update"]:not([data-conditional-room-repeat])){
  position:relative!important;z-index:7;display:grid!important;place-items:center!important;
  box-sizing:border-box!important;width:min(100%,286px)!important;min-width:0!important;
  height:58px!important;min-height:58px!important;padding:18px 8px 7px!important;
  overflow:visible!important;border:1px solid rgba(122,74,8,.13)!important;border-radius:11px!important;
  background:rgba(255,255,255,.74)!important;box-shadow:none!important;opacity:1!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-projected-phase-step="init"]{grid-row:1;justify-self:center}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-projected-phase-step]:is([data-current="true"],[data-receiving="true"],
    [data-state="active"]){
  border-color:rgba(238,150,20,.52)!important;background:rgba(255,250,240,.95)!important;
  box-shadow:0 0 0 2px rgba(238,150,20,.08)!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-projected-phase-step]>.vinci-function-playback-step-kind{
  position:absolute;left:9px;top:6px;color:#827769;font:750 6px/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  :is([data-function-loop-projected-phase-step="init"],
    [data-function-loop-projected-phase-step="update"]:not([data-conditional-room-repeat]))
    >.vinci-function-playback-source-code,
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-projected-phase-step] [data-function-loop-clause]{
  position:static!important;display:block!important;width:calc(100% - 12px);max-width:100%;
  overflow:hidden;color:#675d52;font:620 7px/1.25 var(--mono);text-align:center;
  text-overflow:ellipsis;white-space:nowrap;transform:none!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-projected-phase-step]>.vinci-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)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-projected-phase-step]>.vinci-function-step-input-port{top:-5px}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-projected-phase-step]>.vinci-function-step-output-port{bottom:-5px}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-projected-phase-step]>.vinci-function-step-work-dock{
  position:absolute;left:50%;top:64%;width:0;height:0;pointer-events:none
}

/* The counter's lexical home is a passive nested scope. No control route
   terminates on its border; the one persistent ValuePill may travel out to
   TEST and return without turning the shelf into a junction. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-local-scope]{
  grid-row:2;position:relative;z-index:7;display:grid;place-items:center;justify-self:center;box-sizing:border-box;
  width:min(100%,286px);min-width:0;min-height:50px;padding:14px 8px 6px;
  border:1px dashed rgba(152,95,11,.27);border-radius:11px;
  background:rgba(251,250,248,.64)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  :is(.vinci-function-loop-local-scope-label,[data-function-loop-local-scope-label]){
  position:absolute;left:9px;top:6px;color:rgba(122,74,8,.62);
  font:750 6px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-counter-dock]{
  position:relative;z-index:3;display:grid;place-items:center;min-width:76px;min-height:28px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-counter-dock]::before{content:none}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-counter]{
  position:static!important;inset:auto!important;display:inline-flex!important;
  max-width:116px!important;margin:0!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-local-scope]:has([data-function-loop-counter-transport]){z-index:12}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-counter][data-function-loop-counter-transport]{
  position:relative!important;z-index:14;pointer-events:none;will-change:transform
}

/* TEST is the same compact condition grammar used by the canonical IF: one
   evaluation ValuePill and two lower-edge outcome Ports. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-test-node]:not([data-decision-condition]){
  grid-row:3;position:relative;z-index:7;display:grid;justify-self:center;grid-template-columns:minmax(0,1fr);
  grid-template-rows:48px 30px;place-items:center;box-sizing:border-box;
  width:min(100%,286px)!important;min-width:0;height:78px!important;min-height:78px!important;padding:5px 8px 0;
  border:1px solid rgba(122,74,8,.22);border-radius:11px;
  background:rgba(255,252,245,.9);box-shadow:none
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-test-node]:not([data-decision-condition])[data-state="active"]{
  border-color:rgba(241,154,24,.55);box-shadow:0 0 0 2px rgba(241,154,24,.08)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-test-node]:not([data-decision-condition])>.vinci-function-loop-test-label{
  position:absolute;left:9px;top:7px;color:#72501d;font:850 6px/1 var(--mono);
  letter-spacing:.13em;text-transform:uppercase
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-test-gate]{
  grid-row:1;position:relative;display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;width:min(100%,244px);min-width:0;min-height:38px;
  margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-test-gate]>.vinci-function-condition-kind{
  position:absolute;left:0;top:1px;color:var(--gold-deep);
  font:850 6px/1 var(--mono);letter-spacing:.15em
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-test-gate]>.vinci-function-condition-source{display:none!important}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-test]{
  --vinci-data-pill-h:34px;--vinci-data-pill-pad:6px 12px;
  --vinci-data-pill-font-size:10px;--vinci-data-pill-font-family:var(--mono);
  position:static!important;inset:auto!important;display:inline-flex!important;justify-content:center;
  width:auto!important;max-width:220px!important;min-height:34px!important;margin:0!important;
  padding:6px 12px!important;transform:none!important;opacity:1!important;pointer-events:none;
  border-color:rgba(238,150,20,.34)!important;background:#fff!important;
  box-shadow:0 5px 13px rgba(122,74,8,.07)!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-test][data-condition-value-editor="true"]{
  pointer-events:auto!important;cursor:pointer
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"]):has(>.semantic-function-transport[data-busy="true"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-test][data-condition-value-editor="true"]{
  pointer-events:none!important;cursor:default
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-test]>[data-vinci-value-pill-name]{
  display:inline-flex!important;align-items:center;gap:5px;min-width:0;overflow:visible;
  color:#55483a;white-space:nowrap
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-test-value]{
  display:none;max-width:72px;overflow:hidden;color:#5d5348!important;
  font:800 7.5px/1.1 var(--mono)!important;letter-spacing:.05em;
  text-align:center;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-test][data-function-loop-test-state] [data-function-loop-test-value]{
  display:block
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-test-state="body"]{
  border-color:rgba(152,95,11,.34)!important;background:rgba(250,249,247,.98)!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-test-state="done"]{
  border-color:rgba(122,74,8,.28)!important;background:rgba(255,246,229,.98)!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-test-node]:not([data-decision-condition])>[data-function-loop-phase-port="test"]{
  position:absolute;left:50%;top:-5px;z-index:10;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)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-phase-port][data-state="active"]{
  border-color:#d78309!important;background:#f19a18!important;
  box-shadow:0 0 0 3px rgba(241,154,24,.13)!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-phase-port][data-state="observed"]{
  border-color:rgba(122,74,8,.45)!important;background:#fff!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-test-node]:not([data-decision-condition])>.vinci-control-lanes{
  grid-row:2;position:absolute;left:0;right:0;bottom:0;display:block!important;
  width:100%!important;height:30px;min-width:0!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  .vinci-control-lane[data-function-loop-path-role="body"]:not([data-conditional-room-path]){
  position:absolute!important;left:calc(50% - 26px);bottom:0;width:52px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  .vinci-control-lane[data-function-loop-path-role="done"]:not([data-conditional-room-path]){
  position:absolute!important;right:-26px;bottom:0;width:52px
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  .vinci-control-lane[data-function-loop-path-role]:not([data-conditional-room-path]){
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto 12px!important;place-items:center!important;gap:2px!important;
  min-width:0!important;opacity:1!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  .vinci-control-lane[data-function-loop-path-role]:not([data-conditional-room-path])>.vinci-control-lane-label{
  grid-row:1;box-sizing:border-box;min-width:52px;padding:3px 5px;border:0;
  color:#6d4c1b;background:transparent;font:850 7px/1 var(--mono);
  letter-spacing:.12em;text-align:center;white-space:nowrap
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  .vinci-control-lane[data-function-loop-path-role]:not([data-conditional-room-path])>.vinci-control-lane-line{
  grid-row:2;display:block;box-sizing:border-box;width:10px;height:10px;
  border:1.5px solid rgba(122,74,8,.48)!important;border-radius:50%;
  background:#fff!important;box-shadow:0 0 0 4px rgba(238,150,20,.07)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  .vinci-control-lane[data-function-loop-path-role]:not([data-conditional-room-path])::after{display:none!important}

/* BODY and UPDATE form the readable loop interior. BODY remains the exact
   source-owned Messi Step; only its placement and width are Loop-specific. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-body-region]{
  position:relative;z-index:6;display:grid;grid-template-columns:minmax(0,1fr);
  grid-auto-rows:auto;place-items:start center;gap:14px;box-sizing:border-box;
  width:100%;min-width:0;min-height:144px;margin-top:12px;padding:16px 0 4px;
  border-top:1px solid rgba(122,74,8,.17)
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-folded-fact],
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-body-region]>.vinci-function-playback-connector{display:none!important}
[data-function-loop-owned-body]>.vinci-function-playback-connector{display:none!important}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-body-step]{
  position:relative!important;z-index:7;grid-column:1;grid-row:1;justify-self:center;
  box-sizing:border-box!important;width:min(100%,286px)!important;min-width:0!important;
  overflow:visible!important;opacity:1!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-body-step]>.vinci-function-playback-step-kind{
  max-width:calc(100% - 18px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
/* A BODY Step whose seat carries standing evidence (an AWAIT's witnessed
   handoff block) is taller than the compact 58px law; clamping the row makes
   the seat bleed over the next Step. Inside the loop body the row sizes to
   its own seat — the compact height stays only as the floor. Both surface
   states (structure and source-derived play) are covered. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-canonical-function-surface="true"][data-canonical-function-play="false"]
  [data-function-loop-body-region]
  [data-function-typed-step]:not([data-function-if-child-step-row]),
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function [data-function-loop-body-region]
  [data-function-typed-step]:not([data-function-if-child-step-row]):not([data-function-loop-header]):not([data-function-loop-projected-phase-step]):not([data-function-loop-test-node]:not([data-decision-condition])){
  height:auto!important;min-height:58px!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-body-region]>[data-function-loop-projected-phase-step="update"]:not([data-conditional-room-repeat]){
  grid-column:1;grid-row:2;justify-self:center
}

/* Local Scope is player data, not the Loop's program-counter rail. Retire the
   generic source-ledger connector into the Loop controller; the explicit data
   routes below are the only lines which leave that scope. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-control-connector]{display:none!important}

/* Every counted-Loop edge is a known, solid route. Geometry owns the left
   backedge and right DONE corridor; CSS supplies only one line vocabulary. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  .vinci-function-control-route-svg [data-function-path-route-geometry]{
  fill:none;stroke:rgba(122,74,8,.5);stroke-width:1.4;stroke-dasharray:none!important;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  .vinci-function-control-route-svg [data-function-loop-player-route]{
  stroke:rgba(152,95,11,.58);stroke-width:1.45
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  .vinci-function-control-route-svg [data-state="observed"]{
  stroke:#c97d0e!important;stroke-width:1.6
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  .vinci-function-control-route-svg [data-function-loop-phase-route][data-state="observed"]{
  stroke:rgba(122,74,8,.38)!important;stroke-width:1.3!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  .vinci-function-control-route-svg [data-function-loop-phase-route][data-state="active"]{
  stroke:#e38d0c!important;stroke-width:1.8!important
}

/* Keep the canonical frame open through Done so its exact Port geometry and
   Return editor do not jump while the final route settles. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-play-state="done"]{
  width:min(100%,420px)!important;max-width:420px!important;min-height:0!important;
  padding:68px 12px 58px!important;opacity:1!important
}
/* The parent stage centers this source-derived Function.  During Close, a
   generic geometry-hold rule used to shorten its bottom padding by four
   pixels, which visibly moved the persistent ROUND Binding and the Ball's
   painted DONE route together.  Keep the counted-loop frame at its authored
   active height until the terminal handoff has settled. */
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-play-state="done"]:has(
    [data-function-flow-geometry-hold]){
  padding-bottom:66px!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program[data-function-flow-evidence="source-derived"]
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-play-state="done"]
  [data-function-body]{
  max-height:none!important;min-height:0!important;padding:0!important;
  opacity:1!important;transform:none!important;overflow:visible!important
}
:where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
  .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-enclosure] [data-function-source-row]{
  transition:height .34s cubic-bezier(.4,0,.2,1),border-color .18s ease,
    background-color .18s ease,box-shadow .18s ease!important
}

@media (max-width:480px){
  :where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
    .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]{
    width:100%!important;max-width:100%!important
  }
  :where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
    .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
    [data-function-loop-enclosure]{
    width:100%;margin-inline:0;padding:12px 8px 20px
  }
  :where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
    .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
    :is([data-function-loop-projected-phase-step]:not([data-conditional-room-repeat]),[data-function-loop-local-scope],
      [data-function-loop-body-step]){
    width:min(286px,calc(100% - 36px))!important
  }
  :where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
    .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
    [data-function-loop-test-node]:not([data-decision-condition]){width:min(286px,calc(100% - 36px))!important}
  :where(#semantic-stage[data-canonical-function="true"],[data-vinci-function-presentation="canonical"])
    .semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"]
    .vinci-control-lane[data-function-loop-path-role]:not([data-conditional-room-path])>.vinci-control-lane-label{
    min-width:46px;font-size:6.5px;letter-spacing:.09em
  }
}

/* Atlas Header Counter presentation.

   This is a projection of any canonical counted-for graph whose host requests
   the compact header-counter reading. INIT and UPDATE keep their renderer-owned
   Step, Port and Edge identities, but their cards fold into the one stationary
   counter control. The Function's reference Ball continues to travel on the
   solid BODY / NEXT / BACK / DONE routes; the counter ValuePill never becomes
   that control-flow carrier. The host selector deliberately has no page id so
   the same contract survives when L2 moves its exact L1 canvas into disclosure. */
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-enclosure]{
  width:calc(100% - 8px);margin-inline:4px;padding:13px 18px 22px
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-header]>.vinci-function-step-input-port{
  left:50%!important
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-control]>.vinci-control-diagram{
  position:relative!important;
  grid-template-columns:minmax(46px,1fr) 250px 92px!important;
  grid-template-rows:62px!important;align-items:start!important;
  column-gap:0!important;row-gap:0!important;padding-top:0!important
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-control]>.vinci-control-diagram
  >[data-function-loop-projected-phase-step="init"]{
  position:absolute!important;right:44px!important;top:32px!important;
  width:1px!important;max-width:1px!important;height:1px!important;
  min-height:1px!important;margin:0!important;padding:0!important;
  visibility:hidden!important;opacity:0!important;pointer-events:none!important
}

/* The Loop-local lexical Binding becomes one small, stationary header
   control. INIT writes it once; TEST reads it; UPDATE replaces its primitive
   value in the same carrier. */
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-local-scope][data-function-loop-scope-placement="header-counter"]{
  grid-column:3!important;grid-row:1!important;align-self:start!important;
  justify-self:end!important;width:86px!important;min-height:56px!important;
  margin:0 10px 0 0!important;padding:8px 7px 6px!important;transform:none!important;
  border:1px solid rgba(122,74,8,.24)!important;border-radius:14px!important;
  background:rgba(255,254,250,.98)!important;
  box-shadow:0 8px 18px rgba(122,74,8,.07)!important
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-local-scope]>.vinci-function-loop-local-scope-label{
  position:static!important;display:block!important;margin:0 0 5px!important;
  color:#72501d!important;font:850 6px/1 var(--mono)!important;
  letter-spacing:.16em!important;text-align:center!important
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-local-scope] [data-function-loop-counter-dock]{
  display:grid!important;width:100%!important;min-width:0!important;place-items:center!important
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-counter][data-function-loop-counter-control="integrated"]{
  box-sizing:border-box!important;min-width:48px!important;max-width:54px!important;
  min-height:28px!important;justify-content:center!important;padding:5px 9px!important;
  gap:0!important;transform:none!important;border-radius:999px!important;font-size:14px!important;
  transition:box-shadow 120ms ease,border-color 120ms ease
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-counter] [data-vinci-value-pill-name]{display:none!important}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-counter] [data-function-loop-counter-value]{
  min-width:1ch;color:#6c4308!important;font:750 14px/1 var(--mono)!important;
  text-align:center
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  [data-function-loop-counter][data-function-loop-counter-access="read"]{
  border-color:rgba(152,95,11,.6)!important;
  box-shadow:0 0 0 4px rgba(122,74,8,.09),0 9px 18px rgba(122,74,8,.12)!important
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  [data-function-loop-counter][data-function-loop-counter-access="write"]{
  border-color:rgba(238,150,20,.72)!important;
  box-shadow:0 0 0 4px rgba(238,150,20,.1),0 9px 18px rgba(122,74,8,.12)!important
}

/* Every authored BODY Step and the compact Loop IF share one central axis.
   Grid auto-placement is intentional: the tiny Messi lesson has one BODY
   Step, while a real L2 orchestration may own several Awaits, Calls and an IF.
   UPDATE remains mounted as a geometry-only junction after the final BODY
   Step so its exact loop-next / loop-back Ports cannot collapse onto one point
   while the card is folded into ROUND. */
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-body-region]:not([data-decision-composition="guarded-body"]):is([data-function-loop-control-order="bottom-if"],[data-function-loop-control-order="pre-test"]){
  display:grid!important;
  grid-template-columns:minmax(46px,1fr) minmax(0,250px) minmax(46px,1fr)!important;
  grid-template-rows:none!important;grid-auto-rows:auto!important;place-items:start stretch!important;
  align-items:center!important;column-gap:0!important;row-gap:8px!important;
  min-height:0!important;margin-top:4px;padding:10px 0 5px;border-top:0!important
}
/* The Loop recipe only seats the shared guarded-body decision. Its condition,
   TRUE body and FALSE outlet are styled by the shared decision assembly. */
.vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-enclosure]:has(>[data-decision-composition="guarded-body"]){
  grid-template-columns:minmax(0,1fr)!important;
  padding:8px 24px 6px!important;border:0!important;background:transparent!important;box-shadow:none!important
}
.vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-body-region][data-decision-composition="guarded-body"]{
  grid-column:1/-1!important;justify-self:center!important;width:min(280px,100%)!important;
  margin:8px auto 0!important
}
.vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-decision-body]>[data-function-loop-body-step]{
  --vinci-loop-body-column:1;grid-column:1/-1!important;grid-row:auto!important;max-width:none!important
}
.vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-enclosure]>[data-function-loop-projected-phase-step="update"]:not([data-conditional-room-repeat]){
  grid-column:1/-1!important;grid-row:auto!important;justify-self:center!important
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-body-step]{
  grid-column:var(--vinci-loop-body-column,2)!important;grid-row:auto!important;width:100%!important;
  max-width:250px!important;justify-self:center!important
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-body-step]>.vinci-function-step-work-dock{
  left:50%!important;top:50%!important
}
/* BODY already has a real work seat and its persistent Ball is the mutation
   surface. The generic field-change shell is a second, offset capsule from
   the standalone mutation lesson; retaining its layout node lets the director
   record the write stage without painting or clipping a second object. */
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-body-step]>.vinci-function-step-work-dock
  >.vinci-field-change-work-shell{
  width:194px!important;height:132px!important;min-width:194px!important;min-height:132px!important;
  grid-template-columns:146px 48px!important;overflow:visible!important;
  border-color:transparent!important;background:transparent!important;box-shadow:none!important
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-body-step]>.vinci-function-step-work-dock
  >.vinci-field-change-work-shell::after,
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-body-step]>.vinci-function-step-work-dock
  >.vinci-field-change-work-shell>.vinci-field-change-left-bay{
  visibility:hidden!important;pointer-events:none!important
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-projected-phase-step="update"]:not([data-conditional-room-repeat]){
  grid-column:1/-1!important;grid-row:auto!important;align-self:start!important;
  justify-self:center!important;width:1px!important;max-width:1px!important;
  height:20px!important;min-height:20px!important;margin:0!important;padding:0!important;
  visibility:hidden!important;opacity:0!important;pointer-events:none!important
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-test-node]:not([data-decision-condition]){
  grid-column:2!important;grid-row:auto!important;width:100%!important;
  max-width:250px!important;justify-self:center!important;margin:0!important
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  [data-function-loop-test] [data-function-condition-operand="left"]{
  min-width:2ch;text-align:right;transition:color 120ms ease,transform 120ms ease
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  [data-function-loop-test] [data-function-condition-operand="left"][data-state="resolved-counter"]{
  color:#985f0b!important;font-weight:850!important;transform:scale(1.08)
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-program-function[data-function-loop-composition="bottom-counter"]
  .vinci-control-lane[data-function-loop-path-role="body"]:not([data-conditional-room-path]){left:0!important}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-program-function[data-function-loop-composition="bottom-counter"]
  .vinci-control-lane[data-function-loop-path-role="done"]:not([data-conditional-room-path]){right:0!important}

/* All typed route geometry stays mounted. At rest the repeated circuit is
   quiet; the director's exact physical subphase makes only the route currently
   carrying the Messi Ball strong. */
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-function-control-route-svg [data-function-path-route-geometry]{
  opacity:.34;stroke-width:1.15!important;stroke-linecap:square!important;
  stroke-linejoin:miter!important;transition:opacity 120ms ease,stroke 120ms ease
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-function-control-route-svg [data-function-loop-player-route]{opacity:0!important}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-function-control-route-svg [data-function-loop-player-route][data-state="active"]{
  opacity:.78!important;stroke-width:1.55!important
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-function-control-route-svg
  :is([data-route-kind="loop-initialize"],[data-route-kind="loop-init-to-test"]){
  opacity:0!important
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
  .vinci-function-control-route-svg
  :is([data-route-kind="loop-body"],[data-route-kind="loop-next"],
    [data-route-kind="loop-back"],[data-route-kind="function-exit"]){
  opacity:.3!important
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"])):is(
    [data-function-flow-subphase="loop-next"],
    [data-function-flow-subphase="loop-update-work"],
    [data-function-flow-subphase="loop-back-to-test"])
  :is([data-route-kind="loop-next"],[data-route-kind="loop-back"]){
  opacity:.94!important;stroke-width:1.7!important
}
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))[data-function-flow-subphase="loop-body-backedge"]
  [data-route-kind="loop-player-repeat"],
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))[data-function-flow-subphase="loop-done-route"]
  [data-route-kind="function-exit"],
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))[data-function-flow-subphase="loop-body-port"]
  [data-route-kind="loop-body"],
.semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"])):is(
    [data-function-flow-subphase="loop-done-port"],
    [data-function-flow-subphase="function-exit"])
  [data-route-kind="function-exit"]{
  opacity:.94!important;stroke-width:1.7!important
}

@media (max-width:480px){
  .semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
    .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
    [data-function-loop-enclosure]{padding-inline:16px}
  .semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
    .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
    [data-function-loop-control]>.vinci-control-diagram{
    grid-template-columns:minmax(0,1fr)!important
  }
  .semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
    .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
    [data-function-loop-body-region]:not([data-decision-composition="guarded-body"]):is([data-function-loop-control-order="bottom-if"],[data-function-loop-control-order="pre-test"]){
    grid-template-columns:20px minmax(0,calc(100% - 40px)) 20px!important
  }
  .semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
    .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
    :is([data-function-loop-body-step],[data-function-loop-test-node]:not([data-decision-condition])){
    width:100%!important;max-width:224px!important
  }
  .semantic-visual-program:where(:has(.vinci-program-function[data-function-loop-composition="bottom-counter"]))
    .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
    [data-function-loop-local-scope][data-function-loop-scope-placement="header-counter"]{
    position:absolute!important;right:0!important;top:0!important;
    width:78px!important;margin:0!important
  }
}
/* Once the source rehearsal has settled, the result Pill must not suggest
   applying the assignment again to that result. Reset restores authored input. */
:is(#semantic-stage,[data-vinci-mutation-presentation])[data-canonical-mutation="true"]
  .semantic-visual-program[data-motion-phase="settled"] .vinci-field-change-rest-inline{display:none!important}

/* Written-order composition already owns exact row and branch connectors.
   The old generic body centreline is only a background guide, not a path. */
:where(#semantic-stage,[data-vinci-function-presentation="canonical"])
 [data-canonical-function-play="false"] .vinci-program-function-body::before {
 content:none;
}

/* Written scopes are containers for their actual statements, not another
   card around an empty miniature scope. Playback retains its own layout. */
:where(#semantic-stage,[data-vinci-function-presentation="canonical"])
[data-canonical-function-play="false"] [data-function-statement-kind="scope"] {
  padding:0; border:0; background:transparent; box-shadow:none;
}
:where(#semantic-stage,[data-vinci-function-presentation="canonical"])
[data-canonical-function-play="false"] [data-function-statement-kind="scope"]
> .vinci-function-row-mark { width:100%; max-width:none; }
:where(#semantic-stage,[data-vinci-function-presentation="canonical"])
[data-canonical-function-play="false"] [data-function-statement-kind="scope"]
> .vinci-function-row-mark > .vinci-program-block-scope {
  width:100%; max-width:none; min-height:0; padding:12px;
}
:where(#semantic-stage,[data-vinci-function-presentation="canonical"])
[data-canonical-function-play="false"] .vinci-function-scope-body {
  border:0; padding:8px 0 0; margin:0;
}

/* The shared L1 marks carry the meaning. A written-order seat does not need
   another card around that mark. Scope and control boundaries remain real. */
:where(#semantic-stage,[data-vinci-function-presentation="canonical"])
.semantic-visual-program[data-canonical-function-play="false"] [data-function-source-row] {
  border-color:transparent; background:transparent; box-shadow:none;
}
:where(#semantic-stage,[data-vinci-function-presentation="canonical"])
.semantic-visual-program[data-canonical-function-play="false"] [data-function-source-row]
> .vinci-function-playback-step-kind {
  font:500 10px/1.3 var(--sans,system-ui); letter-spacing:0; text-transform:none;
  color:#868680;
}
:where(#semantic-stage,[data-vinci-function-presentation="canonical"])
.semantic-visual-program[data-canonical-function-play="false"] [data-function-scope-role="arm"]
> .vinci-function-playback-step-kind { display:none; }
:where(#semantic-stage,[data-vinci-function-presentation="canonical"])
.semantic-visual-program[data-canonical-function-play="false"] .vinci-program-block-scope
> .vinci-program-definitions:empty { display:none; }
:where(#semantic-stage,[data-vinci-function-presentation="canonical"])
.semantic-visual-program[data-canonical-function-play="false"] .vinci-program-block-scope
> .vinci-program-scope-label { font:500 10px/1.3 var(--sans,system-ui); letter-spacing:0; }

/* The counted Loop boundary is the one shared border. In the compact
   header-counter composition, its original authored control only owns the
   adopted TEST parts and must not retain generic operation-card chrome. */
.vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-control] {
  display:block!important;box-sizing:border-box!important;width:100%!important;max-width:none!important;
  min-height:0!important;padding:0!important;overflow:visible!important;
  border:0!important;border-radius:0!important;outline:none!important;
  background:transparent!important;box-shadow:none!important;
}

/* The shared condition editor opens inside the adopted Loop TEST gate. Give
   that open gate one layer above Function route geometry, so the editor's
   opaque ValuePill surface remains a usable popup without changing any Port
   or route layer. */
.vinci-program-function[data-function-loop-layout="nested-body"]
  [data-function-loop-test-gate]:has(
    .vmark-ball-live-field-editor[data-condition-expression-editor="true"]
  ) {
  position:relative;z-index:6;isolation:isolate;
}

/* Counted repetition wears the shared Single IF room. The source-owned Loop
   container keeps its routing and lexical identities without painting a
   second frame around that room. Its counter is a quiet binding above it. */
.semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-enclosure]:has(>.vinci-conditional-room) [data-function-loop-header]{
  width:min(280px,100%)!important;justify-self:center!important;padding:0!important
}
.semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-enclosure]:has(>.vinci-conditional-room) [data-function-loop-header]>.vinci-function-playback-step-kind{
  top:13px!important;color:#89857d!important;font-weight:500!important;letter-spacing:.08em!important
}
.semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-enclosure]:has(>.vinci-conditional-room) [data-function-loop-control]>.vinci-control-diagram{
  display:flex!important;justify-content:flex-end!important;align-items:center!important;
  grid-template-columns:none!important;grid-template-rows:none!important;min-height:38px!important;padding:0!important
}
.semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-enclosure]:has(>.vinci-conditional-room) [data-function-loop-local-scope][data-function-loop-scope-placement="header-counter"]{
  display:flex!important;align-items:center!important;gap:8px!important;width:auto!important;min-height:32px!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important
}
.semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-enclosure]:has(>.vinci-conditional-room) [data-function-loop-local-scope]>.vinci-function-loop-local-scope-label{
  margin:0!important;color:#89857d!important;font-weight:500!important;letter-spacing:.06em!important
}
.semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-enclosure]:has(>.vinci-conditional-room) [data-function-loop-counter][data-function-loop-counter-control="integrated"]{
  min-width:32px!important;min-height:26px!important;padding:4px 8px!important;
  border-width:1px!important;box-shadow:0 2px 6px rgba(40,35,25,.05)!important
}
.semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-enclosure]:has(>.vinci-conditional-room) [data-conditional-room-body]>[data-function-loop-body-step]{
  height:64px!important;min-height:64px!important;padding:18px 10px!important;border:0!important;background:transparent!important;box-shadow:none!important;outline:0!important
}
.semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
  [data-function-loop-enclosure]:has(>.vinci-conditional-room) [data-function-loop-body-step]>.vinci-function-playback-step-kind{
  display:none!important
}
.vinci-conditional-room [data-function-loop-body-step]>.vinci-function-playback-source-code{
  font:500 10px/1.5 var(--mono)!important;color:#77766f!important
}
/* Keep exact transport endpoints, without drawing spare sockets inside the
   room. The entry and bypass outlet are the room's visible control points. */
.vinci-conditional-room [data-function-loop-body-step]>.vinci-function-step-port,
[data-function-loop-enclosure]:has(>.vinci-conditional-room)
  [data-function-loop-header]>.vinci-function-step-input-port{
  border-color:transparent!important;background:transparent!important;box-shadow:none!important
}
.vinci-conditional-room [data-function-loop-body-step]>.vinci-function-row-mark::before{
  display:none!important
}

.vinci-program-function:has(.vinci-conditional-room)
  >.vinci-function-control-route-svg>[data-route-kind="loop-next"],
.vinci-program-function:has(.vinci-conditional-room)
  >.vinci-function-control-route-svg>[data-route-kind="loop-body"]{
  opacity:0!important
}
.vinci-conditional-room .vinci-function-step-port::after,
.vinci-conditional-room .vinci-function-step-port::before{
  display:none!important
}

/* The shared typed-step lifecycle expands only the active work seat. */
.semantic-visual-program .vinci-program-function[data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]
 [data-function-loop-enclosure]:has(>.vinci-conditional-room) [data-conditional-room-body]>[data-function-loop-body-step]:is([data-current="true"],[data-receiving="true"],[data-function-flow-geometry-hold="statement"]){
 height:138px!important;min-height:138px!important
}
.vinci-program-function[data-function-loop-composition="bottom-counter"] .vinci-function-playback-scope{
 height:40px!important;min-height:40px!important;flex-basis:40px!important
}
.vinci-program-function[data-function-loop-composition="bottom-counter"]{
 padding-bottom:30px!important
}

/* The compact room reserves work space only during the typed-step lifecycle. */
.semantic-visual-program .vinci-program-function[data-function-control-topology="nested"][data-function-loop-layout="nested-body"][data-function-loop-composition="bottom-counter"]:has(.vinci-conditional-room){
 padding-bottom:30px!important
}
.vinci-conditional-room [data-function-loop-body-step]>.vinci-function-row-mark>[data-operation-kind="mutation"]{
 display:none!important
}

/* Conditional repetition uses the shared written body and gate in execution order. */
.vinci-function-written-order [data-function-conditional-repetition] {
  border:1px solid #d9d4c8;border-radius:16px;padding:12px;gap:10px;
}
[data-function-conditional-repetition] > .vinci-function-playback-source-code,
[data-function-conditional-repetition] > .vinci-function-playback-step-kind {display:none!important}
[data-function-conditional-repetition] > .vinci-function-row-mark > .vinci-control-operation {
  border:0;box-shadow:none;background:transparent;min-width:0;
}
[data-function-conditional-repetition] > .vinci-function-control-bodies {margin:0;padding:0}
[data-function-conditional-repetition] > .vinci-function-control-bodies > .vinci-function-control-body {border:0;padding:0}

/* The control already presents its expression and its actual nested body.
   Reprinting the full statement here duplicates that body at every depth. */
.vinci-function-written-order [data-function-control-kind] > .vinci-function-playback-source-code,
.vinci-function-written-order [data-function-scope-role="arm"] > .vinci-function-playback-step-kind {
  display:none!important;
}

/* ── L1 Host API · 2026-09-17 ── */
/* A call into the host (`console.log(…)`, `JSON.parse(…)`, `fetch(…)`: a callee
   this source never declares, stamped `data-callee-origin="host"` by the
   renderer's seatCallMarks) written as its own statement inside a Function is
   one step of the Call family: a white card on the Function's centre line, the
   row's own entry socket above and exit socket below, a HOST chip before the
   callee's name, the argument pills on the same line, and the parts
   disclosure as a quiet fold pill. Only the drawing changes. The mark keeps
   its node, its own call ports (geometry preserved, hidden at rest, shown by a
   beat or witness exactly as before) and every playback hook; lit states are
   left to the rules that own them, so nothing here styles a current row or an
   active/passed socket. The dashed edge is a scope's, not a step's. A computed
   value's nested call and a script-level call are never stamped and are not
   touched here. Same layer and weight as vinci-function-universal.css, whose
   dashed closed-call rules this outranks by specificity. */
@layer vinci-function-contract {
 /* the card is the written line */
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"]:has(> .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"]) {
  position:relative!important;box-sizing:border-box!important;overflow:visible!important;
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;justify-items:center!important;align-content:center!important;
  width:fit-content!important;min-width:min(320px,100%)!important;max-width:min(600px,100%)!important;
  align-self:center!important;justify-self:center!important;margin:0 auto!important;
  height:auto!important;padding:14px 18px!important;
  border:1px solid #e0e3dd!important;border-radius:18px!important;background:#fff!important;
  box-shadow:0 1px 3px rgba(32,36,28,.016),0 8px 26px -10px rgba(32,36,28,.12)!important;
 }
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"]:has(> .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"]) > .vinci-function-row-mark {
  position:static!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important;
  width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;margin:0!important;padding:0!important;
  justify-items:center!important;overflow:visible!important;
 }
 /* the row's sockets, on the card's edge; colour and halo only while at rest,
    so [data-current] rows and active/passed ports still light as they do today */
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"]:has(> .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"]) > .vinci-function-step-port {
  position:absolute!important;left:50%!important;z-index:6!important;display:block!important;visibility:visible!important;
  box-sizing:border-box!important;width:10px!important;height:10px!important;margin:0!important;padding:0!important;
  transform:translateX(-50%)!important;border-width:1px!important;border-style:solid!important;border-radius:50%!important;
  --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-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"]:has(> .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"]) > .vinci-function-step-input-port {top:-5px!important;bottom:auto!important}
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"]:has(> .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"]) > .vinci-function-step-output-port {bottom:-5px!important;top:auto!important}
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"]:not([data-current="true"]):not([data-receiving="true"]):has(> .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"]) > .vinci-function-step-port:not([data-vinci-port-state="active"]):not([data-vinci-port-state="passed"]) {
  border-color:rgba(122,74,8,.42)!important;background:#fff!important;box-shadow:0 0 0 4px #fff!important;
 }
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"]:has(> .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"]) > .vinci-function-step-work-dock {
  position:absolute!important;left:50%!important;top:50%!important;width:0!important;height:0!important;pointer-events:none!important;
 }
 /* the mark: no box of its own inside the card; chip · callee · pills on one wrapping line */
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"] > .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"] {
  position:static!important;display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;
  gap:10px 14px!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  grid-template-columns:none!important;grid-template-rows:none!important;overflow:visible!important;cursor:default!important;
 }
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"] > .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"]::before {content:none!important}
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"] > .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"]:is(:hover,:focus-visible) {outline:none!important;box-shadow:none!important;background:transparent!important}
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"] > .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"] > .vinci-call-mark-origin {
  order:0;flex:none;display:inline-flex!important;align-items:center;padding:4px 7px!important;border-radius:6px!important;
  background:#fbf3e4!important;color:#8a5c21!important;font:650 9.5px/1 var(--mono,'JetBrains Mono',ui-monospace,monospace)!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;white-space:nowrap!important;
 }
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"] > .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"] > .vinci-call-mark-callee {
  order:1;flex:0 1 auto;min-width:0!important;max-width:100%!important;grid-row:auto!important;grid-column:auto!important;margin:0!important;padding:0!important;
  font:500 12.5px/1.4 var(--mono,'JetBrains Mono',ui-monospace,monospace)!important;color:#2f3b44!important;letter-spacing:0!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important;
 }
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"] > .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"] > [data-function-call-arguments] {
  order:2;flex:0 1 auto;grid-row:auto!important;grid-column:auto!important;justify-self:auto!important;
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;
  gap:6px 8px!important;margin:0!important;min-width:0!important;max-width:100%!important;
 }
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"] > .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"] > [data-vinci-value-pill-slot] {order:3;flex-basis:100%;display:flex;justify-content:center}
 /* the mark's own ports coincide with the row's sockets on the card's edge:
    geometry kept for every director, hidden at rest, shown by a beat or witness
    through the rule that already does so; no second pair is drawn */
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"] > .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"] > .vinci-function-call-port {
  position:absolute!important;z-index:7!important;box-sizing:border-box!important;width:10px!important;height:10px!important;min-width:0!important;min-height:0!important;
  margin:0!important;border-width:1px!important;border-style:solid!important;border-radius:50%!important;
  --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-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"] > .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"]:not([data-function-beat-active="true"]):not([data-witness-active="true"]) > .vinci-function-call-port {visibility:hidden!important;opacity:0!important}
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"] > .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"] > .vinci-function-call-input-port {top:0!important;bottom:auto!important;left:50%!important;right:auto!important;transform:translate(-50%,-50%)!important}
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"] > .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"] > .vinci-function-call-output-port {bottom:0!important;top:auto!important;left:50%!important;right:auto!important;transform:translate(-50%,50%)!important}
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"] > .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"] > .vinci-function-call-receiver-port {left:0!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important}
 /* the parts disclosure: a quiet fold pill, in the card's own hand */
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"]:has(> .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"]) > details.vinci-function-row-parts {
  justify-self:center!important;width:auto!important;max-width:100%!important;margin:10px 0 0!important;
 }
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"]:has(> .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"]) > details.vinci-function-row-parts[open] {
  justify-self:stretch!important;width:100%!important;
 }
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"]:has(> .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"]) > details.vinci-function-row-parts > summary {
  display:inline-flex!important;align-items:center!important;width:fit-content!important;max-width:100%!important;margin:0 auto!important;
  padding:3px 10px!important;border:1px solid #ebe7df!important;border-radius:999px!important;background:#fff!important;
  color:#8a9199!important;font-size:0!important;line-height:0!important;list-style:none!important;cursor:pointer!important;
 }
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"]:has(> .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"]) > details.vinci-function-row-parts > summary::before {display:none!important}
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"]:has(> .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"]) > details.vinci-function-row-parts > summary::after {
  content:attr(data-function-row-parts-label)!important;color:#8a9199!important;
  font:400 10.5px/1.4 var(--sans,-apple-system,system-ui,sans-serif)!important;letter-spacing:0!important;text-transform:none!important;
 }
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"]:has(> .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"]) > details.vinci-function-row-parts[open] > summary::after {content:attr(data-function-row-parts-label-open)!important}
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"]:has(> .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"]) > details.vinci-function-row-parts > summary:is(:hover,:focus-visible) {color:#5f6770!important;background:#fff!important}
 [data-function-written-order] > .vinci-function-written-line[data-function-statement-kind="call"]:has(> .vinci-function-row-mark > .vinci-call-operation[data-call-mark][data-callee-origin="host"]) > details.vinci-function-row-parts > summary:is(:hover,:focus-visible)::after {color:#5f6770!important}
}
/* ── end L1 Host API ── */