:root{--gold:#ee9614;--gold-deep:#7a4a08;--ink:#15110d;--soft:#6b6259;--mute:#9a8f83;--ink-soft:var(--soft);--ink-mute:var(--mute);--paper:#fffdfa;--cream:#f5efe2;--line:rgba(21,17,13,.12);--green:#985f0b;--red:#a8442f;--sans:'Manrope',system-ui,sans-serif;--serif:'Playfair Display',Georgia,serif;--mono:'JetBrains Mono',ui-monospace,monospace}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{color:var(--ink);background:linear-gradient(135deg,#fff 0,var(--cream) 100%);font:14px/1.5 var(--sans)}button,textarea{font:inherit}:focus-visible{outline:2px solid #ffb43b;outline-offset:2px}
.topbar{position:sticky;top:0;z-index:50;min-height:66px;display:flex;align-items:center;gap:16px;padding:0 22px;border-bottom:1px solid var(--line);background:rgba(255,253,250,.96)}.brand{color:inherit;text-decoration:none;font:600 22px/1 var(--serif)}.brand small{display:block;margin-top:5px;color:var(--gold-deep);font:600 8px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase}
.topbar-actions{display:flex;align-items:center;gap:9px;margin-left:auto}.topbar-actions>a{color:var(--gold-deep);font:700 9px var(--mono);text-decoration:none;text-transform:uppercase;letter-spacing:.08em}.atlas-edit-toggle{min-height:35px;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(122,74,8,.28);border-radius:999px;padding:0 13px;color:#2d1b06;background:#ffb23d;font:700 8px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:0 7px 18px rgba(122,74,8,.09)}.atlas-edit-toggle:hover{border-color:var(--gold-deep);transform:translateY(-1px)}.atlas-edit-toggle[aria-expanded="true"]{color:var(--gold-deep);background:#fff}.atlas-edit-toggle span{font-size:13px}.atlas-canvas-editor{height:calc(100dvh - 66px);min-height:620px;background:#faf8f2}.atlas-canvas-editor[hidden],.semantic-workspace[hidden]{display:none}.atlas-canvas-editor iframe{display:block;width:100%;height:100%;border:0;background:#faf8f2}html[data-atlas-edit-mode="true"],html[data-atlas-edit-mode="true"] body{height:100%;overflow:hidden}
.translator-workspace{display:grid;grid-template-columns:292px minmax(0,1fr);max-width:1600px;margin:0 auto}.rule-sidebar{position:sticky;top:66px;height:calc(100vh - 66px);align-self:start;overflow:auto;padding:27px 20px 42px;border-right:1px solid var(--line);background:rgba(255,253,250,.82)}.rule-sidebar>label{display:block;margin-bottom:11px;color:var(--gold-deep);font:700 9px/1 var(--mono);text-transform:uppercase;letter-spacing:.15em}.rule-sidebar>input{width:100%;height:42px;border:1px solid var(--line);border-radius:7px;padding:0 12px;color:var(--ink);background:#fff;font:500 10px var(--mono)}.rule-sidebar>input::placeholder{color:var(--mute)}.rule-filters{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 15px}.rule-filters button{min-height:27px;border:1px solid transparent;border-radius:999px;padding:0 9px;color:var(--soft);background:transparent;font:600 7px var(--mono);cursor:pointer}.rule-filters button[aria-pressed="true"]{border-color:rgba(238,150,20,.3);color:var(--gold-deep);background:#fff8eb}.rule-sidebar>#rule-atlas-count{margin:0 8px 20px;color:var(--mute);font:500 7px/1.45 var(--mono)}.rule-sidebar>#rule-atlas-count[data-state="bad"]{color:var(--red)}.rule-group{margin:0 0 20px}.rule-group[hidden],.rule-entry[hidden],.rule-subtypes[hidden]{display:none}.rule-group h3{margin:0 8px 6px;color:var(--mute);font:700 7px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}.rule-tabs{display:block}.rule-main-button{position:relative;width:100%;min-height:48px;display:grid;grid-template-columns:24px minmax(0,1fr) 9px;align-items:center;gap:4px;border:0;border-left:2px solid transparent;padding:7px 8px;color:var(--soft);background:transparent;text-align:left;cursor:pointer}.rule-main-button>small{color:var(--gold-deep);font:600 7px var(--mono)}.rule-main-button>span{min-width:0;display:grid;gap:2px}.rule-main-button strong{overflow:hidden;color:var(--ink);font:500 13px var(--serif);text-overflow:ellipsis;white-space:nowrap}.rule-main-button code{overflow:hidden;color:var(--mute);font:500 7px var(--mono);text-overflow:ellipsis;white-space:nowrap}.rule-status{width:7px;height:7px;border:1px solid var(--gold);border-radius:50%}.rule-main-button[data-state="element"] .rule-status,.rule-main-button[data-state="element-unrendered"] .rule-status{background:var(--gold)}.rule-main-button:hover{background:rgba(255,255,255,.72)}.rule-main-button[aria-selected="true"]{border-left-color:var(--gold);color:var(--gold-deep);background:#fff8eb}.rule-main-button[hidden]{display:none}.rule-subtypes{display:grid;gap:11px;margin:2px 0 12px 26px;padding:8px 0 3px 11px;border-left:1px solid rgba(238,150,20,.25)}.rule-subtype-section{display:grid;gap:4px}.rule-subtype-section h4{margin:0 7px 2px;color:var(--mute);font:700 6px/1.35 var(--mono);letter-spacing:.11em;text-transform:uppercase}.rule-subtype{width:100%;min-height:34px;display:grid;grid-template-columns:7px minmax(0,1fr) auto;align-items:center;gap:7px;border:0;border-radius:8px;padding:6px 8px;color:var(--soft);background:transparent;text-align:left;cursor:pointer}.rule-subtype>i{width:7px;height:7px;border-radius:50%;background:var(--green)}.rule-subtype[data-outcome="refused"]>i{background:var(--red)}.rule-subtype>strong{overflow:hidden;color:var(--ink);font:600 8px/1.2 var(--mono);text-overflow:ellipsis;white-space:nowrap}.rule-subtype>small{color:var(--green);font:600 6px/1 var(--mono);text-transform:uppercase}.rule-subtype[data-outcome="refused"]>small{color:var(--red)}.rule-subtype:hover{background:rgba(255,255,255,.72)}.rule-subtype[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 5px 14px rgba(40,26,10,.07)}.rule-related-subtypes{padding-top:7px;border-top:1px solid rgba(21,17,13,.08)}.rule-related-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 7px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.45)}.rule-related-form>strong{overflow:hidden;color:var(--ink);font:600 8px/1.2 var(--mono);text-overflow:ellipsis;white-space:nowrap}.rule-related-form>code{grid-column:1/-1;overflow:hidden;color:var(--mute);font:500 6px/1.3 var(--mono);text-overflow:ellipsis;white-space:nowrap}.rule-related-form>small{grid-column:2;grid-row:1;color:var(--mute);font:600 6px/1 var(--mono);text-transform:uppercase}.rule-related-form[data-status="gap"]>small{color:var(--red)}.rule-related-form[data-status="covered-elsewhere"]>small{color:var(--gold-deep)}.rule-empty{margin:20px 8px;color:var(--mute);font:500 9px var(--mono)}
main{min-width:0;margin:0;padding:36px 46px 80px}.eyebrow{color:var(--gold-deep);font:700 9px/1 var(--mono);text-transform:uppercase;letter-spacing:.16em}.hero h1{max-width:850px;margin:9px 0 10px;font:500 clamp(32px,5vw,58px)/1.04 var(--serif);letter-spacing:-.035em}.hero h1 em{color:var(--gold-deep);font-style:italic}.hero>p{max-width:680px;margin:0;color:var(--soft);font-size:15px}
.pipeline{display:grid;grid-template-columns:repeat(7,auto);justify-content:start;align-items:center;gap:9px;margin:24px 0 20px}.pipeline span{padding:8px 11px;border:1px solid rgba(238,150,20,.28);border-radius:999px;background:#fff;color:var(--gold-deep);font:700 9px var(--mono)}.pipeline i{color:var(--gold);font-style:normal}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:0 0 16px}.section-heading h2{margin:6px 0 0;font:500 29px/1.08 var(--serif);letter-spacing:-.025em}.section-heading h2 code{font:600 .72em var(--mono)}.section-heading>p{max-width:480px;margin:0;color:var(--mute);font:500 9px/1.5 var(--mono);text-align:right}.section-heading>p[data-state="bad"]{color:var(--red)}.editable-heading{margin-top:42px}
.rule-atlas{margin:0 0 30px}.rule-atlas>.section-heading{padding:0 2px}
.rule-dissection{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,.85fr) 26px minmax(250px,1fr);align-items:stretch;min-height:360px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff}.dissection-step{min-width:0;display:flex;flex-direction:column}.dissection-step>span{padding:11px 13px;border-bottom:1px solid var(--line);color:var(--gold-deep);font:700 8px var(--mono);letter-spacing:.12em;text-transform:uppercase}.dissection-step pre{flex:1;min-height:300px;margin:0;overflow:auto;padding:18px;white-space:pre-wrap;color:#efe8df;background:#241b15;font:500 10px/1.65 var(--mono)}.dissection-step:nth-of-type(2) pre{color:var(--soft);background:#faf7f2}.dissection-arrow{display:grid;place-items:center;color:var(--gold);background:#fffaf1;font:600 18px var(--serif)}
#selected-rule-stage{min-height:318px;flex:1;display:grid;place-items:center;padding:10px;background-image:radial-gradient(circle,rgba(122,74,8,.1) .7px,transparent .8px);background-size:18px 18px}.rule-proof{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}.rule-proof summary{cursor:pointer;color:var(--gold-deep);font:700 8px var(--mono)}#selected-rule-proof{max-height:320px;margin:10px 0 0;overflow:auto;white-space:pre-wrap;color:var(--soft);font:500 9px/1.55 var(--mono)}
.direct-binding-result{display:grid;justify-items:center;gap:12px;text-align:center}.direct-binding-result>small{max-width:210px;color:var(--mute);font:500 8px/1.45 var(--mono)}.direct-pill{display:inline-flex;min-height:28px;align-items:center;justify-content:center;padding:5px 13px;border:1px solid rgba(122,74,8,.28);border-radius:999px;color:var(--ink);background:#fff7e8;font:700 10px var(--mono);box-shadow:0 5px 14px rgba(122,74,8,.08);cursor:pointer}.direct-pill[aria-expanded="true"]{color:#fff;background:#241b15}.direct-binding-traits[hidden]{display:none}
.direct-ball-result>.vmark-ball-live-wrap{min-width:72px}.direct-ball-result>.vmark-ball-live-wrap .vmark-ball-live[data-state="collapsed"]{width:52px;height:52px}
.direct-transparent{display:grid;justify-items:center;gap:7px;max-width:240px;padding:18px;color:var(--soft);background:transparent;text-align:center}.direct-transparent::before{content:"→";display:grid;place-items:center;width:64px;height:28px;border-top:1px dashed rgba(122,74,8,.4);color:var(--gold);font:600 20px/1 var(--serif)}.direct-transparent b{font:500 18px var(--serif)}.direct-transparent span,.direct-transparent small{font:500 8px/1.45 var(--mono)}.direct-transparent small{color:var(--mute)}.direct-unknown{display:grid;gap:5px;text-align:center}.direct-unknown small{color:var(--mute);font:600 8px var(--mono)}.direct-unknown b{font:500 18px var(--serif)}
.direct-canonical-preview.studio-visual-program{width:100%;min-width:0;min-height:298px;display:grid;place-items:center;padding:10px;background:transparent}.direct-canonical-preview .vinci-program-function{width:min(100%,330px);min-height:250px;padding:42px 15px;border-radius:18px}.direct-canonical-preview .vinci-program-function-label{left:17px;top:15px;font-size:11px}.direct-canonical-preview .vinci-program-function-body{width:min(100%,330px);min-height:166px;padding:12px;border-radius:12px}.direct-canonical-preview .vinci-program-function-body-label{position:absolute;left:14px;top:13px;z-index:3;color:var(--ink-soft);font:650 9px/1 var(--mono);letter-spacing:.05em}.direct-canonical-preview .vinci-function-entry::before,.direct-canonical-preview .vinci-function-exit::after{height:21px}.direct-canonical-preview .vinci-function-port-copy{left:16px}.direct-canonical-preview .vinci-program-operation{font-size:10px}.direct-canonical-preview[data-preview-focus="program"]>.vinci-program-scope{width:100%;min-height:278px;padding:43px 14px 12px}.direct-canonical-preview[data-preview-focus="block"] .vinci-program-function-body{border-color:rgba(238,150,20,.55);box-shadow:0 0 0 5px rgba(238,150,20,.08),inset 0 1px 0 #fff}.direct-canonical-preview[data-preview-focus="change"] .vinci-program-operation{opacity:1;transform:scale(1.2);padding:7px 11px;border-radius:999px;background:#fff8e8;box-shadow:0 8px 20px rgba(122,74,8,.1)}.direct-canonical-preview[data-preview-focus="call"] .vinci-function-entry,.direct-canonical-preview[data-preview-focus="return"] .vinci-function-exit{position:absolute;top:50%;bottom:auto}.direct-canonical-preview[data-preview-focus="call"] .vinci-function-entry .vinci-function-port-mouth,.direct-canonical-preview[data-preview-focus="return"] .vinci-function-exit .vinci-function-port-mouth{box-shadow:0 0 0 8px rgba(238,150,20,.14),0 0 24px rgba(238,150,20,.28)}
.translator{display:grid;grid-template-columns:minmax(340px,.85fr) minmax(420px,1.15fr);min-height:590px;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:0 25px 70px rgba(40,26,10,.1)}.pane{min-width:0;display:flex;flex-direction:column}.source-pane{background:#241b15}.visual-pane{background:rgba(255,253,250,.96)}.pane-head{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 17px;border-bottom:1px solid rgba(255,255,255,.1)}.visual-pane .pane-head{border-color:var(--line)}.pane-head b{color:var(--gold);font:700 9px var(--mono);letter-spacing:.14em;text-transform:uppercase}.pane-head span{color:rgba(255,255,255,.48);font:500 8px var(--mono)}.visual-pane .pane-head span{color:var(--mute)}
#object-source{width:100%;min-height:430px;flex:1;resize:none;border:0;outline:0;padding:24px;color:#f4eee6;background:transparent;font:500 13px/1.8 var(--mono);tab-size:2;caret-color:#ffb43b}#object-source::selection{background:rgba(238,150,20,.34)}.source-actions{display:flex;align-items:center;gap:12px;padding:13px 16px;border-top:1px solid rgba(255,255,255,.1)}#translate-object{min-height:40px;border:0;border-radius:8px;padding:0 17px;color:#271906;background:linear-gradient(135deg,#ffc154,var(--gold));font:700 11px var(--sans);cursor:pointer}.shortcut{color:rgba(255,255,255,.42);font:500 8px var(--mono)}
#object-stage{min-height:390px;display:grid;place-items:center;padding:30px;background-image:radial-gradient(circle,rgba(122,74,8,.1) .7px,transparent .8px);background-size:20px 20px}#object-stage .translated-object{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px}#object-stage .translated-object>.vmark-ball-live-wrap{min-width:72px}#object-stage .translated-object>.vmark-ball-live-wrap .vmark-ball-live[data-state="collapsed"]{width:52px;height:52px}#object-stage .translated-object>.vmark-ball-live-wrap .vmark-ball-live-label{font-size:10px}.translation-refusal{display:grid;gap:8px;max-width:430px;padding:20px;border:1px dashed var(--red);border-radius:12px;color:var(--red);background:#fff7f5;text-align:center}.translation-refusal b{font:600 20px var(--serif)}.translation-refusal span{font:500 10px/1.5 var(--mono)}
#object-stage>.translated-object{display:grid;place-items:center}
#translation-status{min-height:42px;margin:0;padding:12px 17px;border-top:1px solid var(--line);color:var(--soft);font:600 9px/1.4 var(--mono)}#translation-status[data-state="ok"]{color:var(--green)}#translation-status[data-state="bad"]{color:var(--red)}
.anatomy{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}.anatomy section{min-width:0;padding:18px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.8)}.anatomy h2{margin:0 0 12px;font:500 20px var(--serif)}#source-mappings{display:grid;gap:7px;margin:0;padding:0;list-style:none}#source-mappings li{display:grid;grid-template-columns:72px minmax(100px,.7fr) auto minmax(140px,1fr);align-items:center;gap:8px;padding:8px;border-radius:7px;background:#fff}#source-mappings span{color:var(--mute);font:600 8px var(--mono)}#source-mappings code{overflow:hidden;color:var(--soft);font:600 9px var(--mono);text-overflow:ellipsis}#source-mappings i{color:var(--gold);font-style:normal}#source-mappings b{font:700 9px var(--mono)}details summary{cursor:pointer;color:var(--gold-deep);font:700 9px var(--mono)}#translation-proof{max-height:260px;overflow:auto;white-space:pre-wrap;color:var(--soft);font:500 9px/1.55 var(--mono)}
.limits{margin:18px 0 0;color:var(--mute);font:500 9px var(--mono)}
@media(max-width:1120px){.translator-workspace{grid-template-columns:248px minmax(0,1fr)}main{padding-left:30px;padding-right:30px}.rule-dissection{grid-template-columns:1fr}.dissection-arrow{min-height:28px;transform:rotate(90deg)}.dissection-step pre{min-height:130px}.section-heading{align-items:start;flex-direction:column;gap:8px}.section-heading>p{text-align:left}}
@media(max-width:760px){.translator-workspace{display:block}.rule-sidebar{position:relative;top:auto;width:100%;height:auto;max-height:330px;padding:20px 14px;overflow:auto;border-right:0;border-bottom:1px solid var(--line)}.translator{grid-template-columns:1fr}.anatomy{grid-template-columns:1fr}.pipeline{grid-template-columns:1fr;justify-items:start}.pipeline i{transform:rotate(90deg);margin-left:22px}#object-source{min-height:260px}.topbar{padding:0 14px}main{padding:26px 12px 60px}.section-heading h2{font-size:25px}}

.direct-binding-traits{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.direct-binding-traits span{padding:4px 7px;border:1px solid rgba(122,74,8,.18);border-radius:999px;color:var(--gold-deep);background:#fffaf0;font:650 7px var(--mono)}
.direct-declaration-contribution::before{content:"applies";width:auto;height:auto;border:0;color:var(--mute);font:650 7px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.direct-declaration-contribution>b{display:inline-grid;place-items:center;min-width:74px;min-height:34px;padding:5px 12px;border:1px solid rgba(238,150,20,.42);border-radius:999px;color:var(--gold-deep);background:#fff8e8;font:750 15px var(--mono)}
.direct-rule-refusal{display:grid;gap:9px;max-width:360px;padding:20px;border:1px dashed var(--red);border-radius:12px;color:var(--red);background:#fff8f5;text-align:center}
.direct-rule-refusal b{font:600 20px var(--serif)}
.direct-rule-refusal span{font:550 9px/1.5 var(--mono)}
.direct-change-composition{display:grid;place-items:center;width:100%;min-height:298px}
.direct-change-ball{display:grid;place-items:center}
.direct-change-composition .vmark-ball-live{overflow:visible}
.direct-change-composition .vinci-program-operation{display:inline-flex;align-items:center;margin-left:7px;padding:4px 8px;border:1px solid rgba(238,150,20,.52);border-radius:999px;color:var(--gold-deep);background:#fff9ed;box-shadow:0 5px 12px rgba(122,74,8,.13);font:750 9px var(--mono);transform:none}
.direct-change-composition .vinci-operation-field{display:none}
.direct-change-composition .vinci-operation-mechanism{color:var(--gold-deep)}
.direct-program-object{display:grid;grid-template-columns:auto auto auto;grid-template-areas:"pill tether ball" "fact fact fact";align-items:center;justify-content:center;gap:8px 12px}.direct-program-object .direct-context-pill{grid-area:pill}.direct-context-tether{grid-area:tether;color:var(--gold);font:700 18px var(--serif)}.direct-program-ball{grid-area:ball}.direct-context-binding-fact{grid-area:fact;justify-self:start;margin-left:6px;padding:3px 7px;border-radius:999px;color:var(--gold-deep);background:#fff8e8;font:700 7px var(--mono)}.direct-context-binding-fact[hidden]{display:none}

/* Public semantic anatomy. Raw AST rules now live only inside Inspect. */
.vinci-mark-preview{position:relative;isolation:isolate;color:var(--ink);font-family:var(--sans)}
.vinci-mark-preview .vf-ballwrap{position:relative;z-index:5;display:grid;place-items:center}
.vinci-mark-preview .vf-ballwrap>.vmark-ball-live-wrap{min-width:72px}
.vinci-mark-preview .vmark-pill{min-height:34px;padding:8px 14px;line-height:1.35}
.vinci-mark-preview .vinci-primitive-binding-pill{
  min-height:var(--vinci-data-pill-h,38px);padding:var(--vinci-data-pill-pad,8px 14px);
  line-height:var(--vinci-data-pill-line-height,normal)}
.vinci-mark-preview button.vmark-pill{appearance:none;-webkit-appearance:none}
.semantic-workspace{display:grid;grid-template-columns:304px minmax(0,1fr);gap:24px;width:min(100%,1940px);margin:0 auto;padding:22px 26px 100px}.semantic-sidebar{position:sticky;top:106px;align-self:start;height:calc(100vh - 130px);display:flex;flex-direction:column;overflow:auto;padding:24px 12px 28px 6px}.semantic-sidebar-kicker{margin:0 10px 9px;color:var(--orange-deep);font:650 8px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}.semantic-sidebar h2{margin:0 10px 7px;font:560 25px/1.05 var(--serif);letter-spacing:-.045em}.semantic-sidebar>p{margin:0 10px 18px;color:var(--mute);font:500 10px/1.55 var(--mono)}.semantic-search-label{margin:0 10px 8px;color:var(--ink);font:650 8px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}.semantic-case-search{flex:none;height:45px;margin:0 5px 14px;border:1px solid var(--hairline);border-radius:15px;padding:0 14px;color:var(--ink);background:rgba(255,255,255,.8);font:500 10px var(--mono)}.semantic-search-empty{padding:9px;border:1px dashed rgba(179,74,46,.35);border-radius:11px;color:var(--red)!important;background:#fff8f5}.semantic-search-empty[hidden]{display:none}#semantic-concept-tabs{display:grid;gap:5px}.semantic-concept-entry{border-radius:21px;transition:background .2s ease,box-shadow .2s ease,padding .2s ease}.semantic-concept-entry[data-expanded="true"]{padding:5px 5px 12px;background:#fff;box-shadow:0 9px 26px rgba(70,50,20,.06)}.semantic-concept-button{width:100%;min-height:61px;display:grid;grid-template-columns:30px minmax(0,1fr);gap:6px;align-items:center;border:0;border-radius:17px;padding:10px 12px;text-align:left;color:var(--ink);background:transparent}.semantic-concept-button>small{color:#ada38f;font:550 9px var(--mono)}.semantic-concept-button>span{display:grid;gap:5px}.semantic-concept-button strong{font:560 14px/1 var(--sans)}.semantic-concept-button code{color:var(--mute);font:500 8px/1 var(--mono)}.semantic-concept-button:hover{background:rgba(255,255,255,.7)}.semantic-concept-button[aria-selected="true"]{color:#faf7ef;background:var(--char);box-shadow:0 11px 25px rgba(28,22,14,.18)}.semantic-concept-button[aria-selected="true"] small,.semantic-concept-button[aria-selected="true"] code{color:rgba(255,247,235,.52)}.semantic-cases{display:grid;gap:3px;margin:8px 5px 1px 20px;padding:0 0 2px 12px;border-left:1px solid rgba(122, 74, 8,.24)}.semantic-case-family{margin:13px 7px 5px;color:#a09580;font:650 7px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}.semantic-case-button{min-height:39px;display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:8px;align-items:center;border:0;border-radius:11px;padding:7px 8px;color:var(--soft);text-align:left;background:transparent}.semantic-case-button i{width:6px;height:6px;border:1px solid #c7bda8;border-radius:50%}.semantic-case-button span{font:550 10px/1.25 var(--sans)}.semantic-case-button small{color:#aaa08c;font:550 7px/1 var(--mono);text-transform:uppercase}.semantic-case-button:hover{color:var(--ink);background:#faf8f3}.semantic-case-button[aria-pressed="true"]{color:var(--ink);background:#fff3e0;box-shadow:inset 0 0 0 1px rgba(238, 150, 20,.13)}.semantic-case-button[aria-pressed="true"] i,.semantic-case-button[data-outcome="accepted"] i{border-color:var(--orange);background:var(--orange)}.semantic-case-button[data-outcome="refused"] i{border-color:#ba654f;background:transparent}.semantic-case-button[data-direct-outcome="accepted"][data-outcome="refused"] i{border-color:#c19044;background:#fff1c8}.semantic-sidebar .sidebar-mark{margin-top:auto}.semantic-main{min-width:0;padding:0}.semantic-hero{padding:68px 18px 48px}.semantic-hero h1{max-width:880px;margin:12px 0 18px;font:540 clamp(46px,5vw,78px)/.96 var(--serif);letter-spacing:-.065em}.semantic-hero h1 em{color:var(--orange-deep);font-style:normal}.semantic-hero p{max-width:720px;margin:0;color:var(--soft);font:430 16px/1.65 var(--sans)}
.semantic-atlas{border:1px solid var(--hairline);border-radius:30px;padding:28px;background:rgba(255,255,255,.68);box-shadow:0 24px 60px rgba(70,50,20,.06)}.semantic-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;padding:3px 4px 24px}.semantic-heading h2{margin:7px 0 0;font:520 clamp(33px,3.4vw,58px)/1 var(--serif);letter-spacing:-.055em}.semantic-heading>p{max-width:570px;margin:0 0 5px;color:var(--mute);font:550 10px/1.6 var(--mono);text-align:right}.semantic-dissection{display:grid;grid-template-columns:minmax(315px,.76fr) 34px minmax(620px,1.45fr) minmax(235px,.58fr);align-items:stretch;gap:0}.semantic-pane,.semantic-meaning{min-width:0;border:1px solid var(--hairline);background:rgba(255,255,255,.8)}.semantic-pane{border-radius:24px;overflow:hidden}.semantic-pane>header{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 21px;border-bottom:1px solid var(--hairline)}.semantic-pane>header b{font:650 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}.semantic-pane>header span{color:var(--mute);font:500 8px/1 var(--mono)}.semantic-source-pane{background:var(--char)}.semantic-source-pane>header{color:#dfd5c5;border-color:rgba(255,255,255,.1)}.semantic-source-pane>header span{color:#8d806d}#semantic-source{min-height:680px;margin:0;padding:32px 18px;overflow:auto;color:#eee6da;background:var(--char);font:550 11px/1.75 var(--mono);white-space:pre}.semantic-source-line{display:grid;grid-template-columns:26px minmax(max-content,1fr);gap:10px;min-height:24px;margin:0 -8px;padding:1px 8px;border-left:2px solid transparent;border-radius:3px}.semantic-source-line[data-focus="true"]{border-left-color:var(--orange);color:#fff;background:rgba(238, 150, 20,.13)}.semantic-source-line[data-context="true"]{color:#a99c89}.semantic-line-number{color:#695f52;font-style:normal;font-weight:500;user-select:none}.semantic-arrow{display:grid;place-items:center;color:var(--orange);font:350 28px var(--sans)}.semantic-canvas-pane{border-radius:24px 0 0 24px}.semantic-canvas-pane>header{padding-left:24px}#semantic-stage{position:relative;min-height:680px;overflow:auto;background-image:radial-gradient(circle,rgba(122, 74, 8,.11) .75px,transparent .85px);background-size:24px 24px}#semantic-stage>.semantic-visual-program{min-height:680px;padding:18px}.semantic-visual-program .vinci-program-place{min-height:640px}.semantic-visual-program [data-semantic-focus]{position:relative;z-index:40}.semantic-visual-program .vinci-program-scope[data-semantic-focus]{border-color:var(--orange);box-shadow:0 0 0 6px rgba(238, 150, 20,.12),0 18px 42px rgba(90,52,12,.12)}.semantic-visual-program .vf-ballwrap[data-semantic-focus]>.vmark-ball-live-wrap{border-radius:18px;background:rgba(238, 150, 20,.035);box-shadow:0 0 0 4px rgba(238, 150, 20,.1)}.semantic-visual-program .vinci-program-function[data-semantic-focus]{border-style:solid;border-color:var(--orange);box-shadow:0 0 0 6px rgba(238, 150, 20,.1),0 22px 48px rgba(90,52,12,.12)}.semantic-visual-program .vinci-program-function-body[data-semantic-focus]{border-color:var(--orange);box-shadow:0 0 0 6px rgba(238, 150, 20,.12),inset 0 1px 0 #fff}.semantic-visual-program .vinci-program-operation[data-semantic-focus]{opacity:1!important;outline:1px solid rgba(238,150,20,.25);outline-offset:3px}/* A stage-wide control card (Switch, IF) keeps its glow but not the 8% zoom: scaling a full-width card pushes it past the stage and adds a horizontal scrollbar. */.semantic-visual-program .vinci-control-operation[data-semantic-focus]{transform:none}.semantic-visual-program .vinci-function-port[data-semantic-focus] .vinci-function-port-mouth{box-shadow:0 0 0 9px rgba(238, 150, 20,.15),0 0 30px rgba(238, 150, 20,.48)}.semantic-visual-program [data-binding-inspectable]{cursor:pointer}
.semantic-meaning{display:flex;flex-direction:column;min-height:750px;padding:95px 22px 28px;border-left:0;border-radius:0 24px 24px 0;background:linear-gradient(155deg,#fffdfa,#f7f1e5)}.semantic-meaning-kicker,.semantic-binding-inspector>small,.semantic-refusal-copy>small{color:var(--orange-deep);font:650 7px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase}.semantic-meaning h3{margin:12px 0 30px;font:560 29px/1 var(--serif);letter-spacing:-.045em}.semantic-facts,.semantic-binding-details{display:grid;grid-template-columns:minmax(75px,.75fr) minmax(0,1.25fr);gap:0;margin:0}.semantic-facts dt,.semantic-facts dd,.semantic-binding-details dt,.semantic-binding-details dd{margin:0;padding:11px 0;border-bottom:1px solid var(--hairline);font:520 9px/1.4 var(--mono)}.semantic-facts dt,.semantic-binding-details dt{color:var(--mute)}.semantic-facts dd,.semantic-binding-details dd{color:var(--ink);overflow-wrap:anywhere}.semantic-binding-inspector{margin-top:auto;padding-top:28px}.semantic-binding-inspector>small{display:block;margin-bottom:12px;line-height:1.5}.semantic-binding-details{padding:8px 12px;border:1px solid rgba(238, 150, 20,.2);border-radius:15px;background:#fff8ed}.semantic-binding-details[hidden]{display:none}.semantic-stage-refusal{min-height:680px;display:grid;place-content:center;gap:12px;padding:40px;text-align:center}.semantic-stage-refusal b{color:var(--red);font:700 11px var(--mono);letter-spacing:.18em}.semantic-stage-refusal span{max-width:450px;color:var(--soft);font:500 12px/1.6 var(--mono)}.semantic-refusal-copy{margin:auto 0}.semantic-refusal-copy h3{color:var(--red)}.semantic-refusal-copy ul{padding-left:18px;color:var(--soft);font:500 10px/1.6 var(--mono)}
.semantic-inspect{margin-top:18px;border:1px solid var(--hairline);border-radius:20px;background:rgba(255,255,255,.75)}.semantic-inspect>summary,.semantic-raw-rules>summary{padding:19px 22px;font:650 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}.semantic-inspect[open]>summary{border-bottom:1px solid var(--hairline)}.semantic-inspect-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:22px}.semantic-inspect-grid section{min-width:0}.semantic-inspect h3{margin:0 0 13px;color:var(--mute);font:650 8px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}.semantic-inspect pre{max-height:440px;margin:0;overflow:auto;border-radius:14px;padding:18px;color:#e8dfd2;background:var(--char);font:500 9px/1.55 var(--mono)}.semantic-translation-chain{display:grid;gap:6px;margin:0;padding:0;list-style:none}.semantic-translation-chain li{display:grid;grid-template-columns:minmax(120px,.8fr) 20px minmax(120px,1fr);gap:7px;align-items:center;min-height:46px;border:1px solid var(--hairline);border-radius:12px;padding:8px 12px;background:#fff}.semantic-translation-chain li[data-focus="true"]{border-color:rgba(238, 150, 20,.45);background:#fff4e2}.semantic-translation-chain code,.semantic-translation-chain b{font:600 9px var(--mono)}.semantic-translation-chain small{grid-column:1/-1;color:var(--mute);font:500 7px/1.4 var(--mono);overflow-wrap:anywhere}.semantic-raw-rules{margin:0 22px 22px;border:1px solid var(--hairline);border-radius:14px}.semantic-raw-rules .semantic-translation-chain{padding:0 14px 14px}#object-editable-proof{margin-top:90px}
@media(max-width:1650px){.semantic-dissection{grid-template-columns:minmax(300px,.72fr) 30px minmax(580px,1.3fr)}.semantic-meaning{grid-column:3;min-height:0;border:1px solid var(--hairline);border-top:0;border-radius:0 0 24px 24px;padding:28px}.semantic-canvas-pane{border-radius:24px 24px 0 0}}
@media(max-width:1050px){.semantic-workspace{display:block;padding:16px}.semantic-sidebar{position:relative;top:0;height:auto;padding:20px 0}.semantic-sidebar .sidebar-mark{display:none}.semantic-main{width:100%}.semantic-dissection{grid-template-columns:1fr}.semantic-arrow{min-height:50px;transform:rotate(90deg)}.semantic-canvas-pane,.semantic-meaning{grid-column:auto;border:1px solid var(--hairline);border-radius:24px}.semantic-meaning{margin-top:12px}.semantic-inspect-grid{grid-template-columns:1fr}.semantic-heading{align-items:start;flex-direction:column}.semantic-heading>p{text-align:left}}
@media(max-width:650px){.semantic-atlas{padding:14px;border-radius:21px}.semantic-hero{padding:44px 4px 32px}.semantic-hero h1{font-size:45px}.semantic-source-pane,#semantic-source{min-height:440px}.semantic-pane>header{align-items:flex-start;flex-direction:column;justify-content:center}.semantic-canvas-pane{overflow:auto}.semantic-canvas-pane>header{min-width:620px}.semantic-meaning{padding:25px 18px}.semantic-inspect-grid{padding:14px}}
.semantic-visual-program .vinci-call-operation[data-semantic-focus],.semantic-visual-program .vinci-return-operation[data-semantic-focus]{border-color:var(--orange);background:#fff2dc;box-shadow:0 0 0 7px rgba(238, 150, 20,.13),0 13px 28px rgba(100,55,8,.18);transform:scale(1.08)}

/* The public Translator is one compact anatomy, not a second oversized app. */
#semantic-source,
#semantic-stage,
.semantic-stage-refusal{min-height:500px}
#semantic-stage>.semantic-visual-program{min-height:0;padding:12px}
.semantic-visual-program .vinci-program-place{min-height:0}
.semantic-meaning{min-height:570px;padding-top:56px}
@media(max-width:650px){
  .semantic-source-pane,#semantic-source{min-height:380px}
}

/* Complete SOL Translator: section -> concept -> valid syntax examples. */
.semantic-nav-section{display:grid;gap:4px;margin:0 0 18px}
.semantic-nav-section[hidden]{display:none}
.semantic-nav-section-title{margin:14px 12px 5px;color:#9e947f;font:700 8px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.semantic-concept-entry[hidden]{display:none}
.semantic-cases[hidden]{display:none}
.semantic-case-button[data-outcome="accepted"] small{color:#877c6f}
.semantic-inspect-note{margin:0;padding:14px 22px 0;color:var(--mute);font:500 9px/1.55 var(--mono)}
#semantic-stage>.sol-scene-host{display:block;width:100%;min-width:0;min-height:500px}
#semantic-stage>.sol-scene-host[hidden]{display:none!important}
.semantic-stage-invalid{min-height:500px;display:grid;place-content:center;gap:12px;padding:40px;text-align:center}
.semantic-stage-invalid b{color:var(--red);font:700 11px var(--mono);letter-spacing:.14em}
.semantic-stage-invalid span{max-width:440px;color:var(--soft);font:500 11px/1.6 var(--mono)}
.semantic-invalid-copy,.semantic-truth-note{color:var(--soft);font:500 10px/1.65 var(--mono)}
.semantic-truth-note{margin:auto 0 0;padding-top:24px}

/* Truthful public states: a matched rule is not automatically a translated scene. */
.semantic-outcome-badge{display:inline-flex;align-items:center;min-height:25px;margin-top:15px;padding:0 10px;border:1px solid currentColor;border-radius:999px;font:700 7px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.semantic-outcome-badge::before{content:"";width:6px;height:6px;margin-right:7px;border-radius:50%;background:currentColor}
.semantic-outcome-badge[data-outcome="translated"]{color:#985f0b;background:#f7f5f2}
.semantic-outcome-badge[data-outcome="illustrative-spec"]{color:#91600e;background:#fff6df}
.semantic-outcome-badge[data-outcome="runtime-required"]{color:#6655a8;background:#f3f0ff}
.semantic-outcome-badge[data-outcome="unmapped"]{color:#6b6259;background:#f3f0ec}
.semantic-outcome-badge[data-outcome="invalid"]{color:var(--red);background:#fff2ee}

.semantic-dissection[data-linked="false"]{grid-template-columns:minmax(315px,.76fr) minmax(620px,1.45fr) minmax(235px,.58fr);column-gap:16px}
.semantic-dissection[data-linked="false"]>.semantic-arrow{display:none}
.semantic-dissection[data-linked="false"]>.semantic-canvas-pane{border-radius:24px}
.semantic-dissection[data-linked="false"]>.semantic-meaning{border-left:1px solid var(--hairline);border-radius:24px}
.semantic-atlas[data-outcome="translated"] .semantic-canvas-pane{box-shadow:inset 0 3px 0 rgba(122,74,8,.55)}
.semantic-atlas[data-outcome="illustrative-spec"] .semantic-canvas-pane{box-shadow:inset 0 3px 0 rgba(238,150,20,.6)}
.semantic-atlas[data-outcome="runtime-required"] .semantic-canvas-pane{box-shadow:inset 0 3px 0 rgba(102,85,168,.55)}
.semantic-atlas[data-outcome="unmapped"] .semantic-canvas-pane{box-shadow:inset 0 3px 0 rgba(107,98,89,.45)}
.semantic-atlas[data-outcome="invalid"] .semantic-canvas-pane{box-shadow:inset 0 3px 0 rgba(168,68,47,.55)}

.semantic-case-button[data-outcome="translated"] i{border-color:#985f0b;background:#985f0b}
.semantic-case-button[data-outcome="translated"] small{color:#985f0b}
.semantic-case-button[data-outcome="illustrative-spec"] i{border-color:var(--gold);background:#fff3d6}
.semantic-case-button[data-outcome="illustrative-spec"] small{color:#91600e}
.semantic-case-button[data-outcome="runtime-required"] i{border-color:#6655a8;background:#eee9ff}
.semantic-case-button[data-outcome="runtime-required"] small{color:#6655a8}
.semantic-case-button[data-outcome="unmapped"] i{border-color:#756d64;background:#e7e2dc}
.semantic-case-button[data-outcome="unmapped"] small{color:#756d64}
.semantic-case-button[data-outcome="invalid"] i{border-color:var(--red);background:#fff}
.semantic-case-button[data-outcome="invalid"] small{color:var(--red)}

.semantic-stage-banner{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;margin:16px 16px 0;padding:13px 15px;border:1px solid var(--hairline);border-radius:14px;background:rgba(255,253,250,.94);box-shadow:0 8px 24px rgba(50,35,15,.06)}
.semantic-stage-banner b{grid-row:1/3;min-width:110px;font:750 8px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.semantic-stage-banner span{color:var(--soft);font:520 9px/1.45 var(--mono)}
.semantic-stage-banner small{color:var(--mute);font:550 7px/1.35 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.semantic-stage-banner[data-outcome="illustrative-spec"]{border-color:rgba(238,150,20,.3);background:#fff9ed}.semantic-stage-banner[data-outcome="illustrative-spec"] b{color:#91600e}
.semantic-stage-banner[data-outcome="runtime-required"]{border-color:rgba(102,85,168,.25);background:#f8f6ff}.semantic-stage-banner[data-outcome="runtime-required"] b{color:#6655a8}
.semantic-stage-banner[data-outcome="runtime-required"]{grid-template-columns:auto minmax(0,1fr) auto;
  gap:8px;margin:10px 16px 0;padding:7px 11px;border-radius:999px;box-shadow:none}
.semantic-stage-banner[data-outcome="runtime-required"] b{grid-row:auto;min-width:0}
.semantic-stage-banner[data-outcome="unmapped"] b{color:#6b6259}
.semantic-stage-banner[data-outcome="invalid"]{border-color:rgba(168,68,47,.25);background:#fff7f4}.semantic-stage-banner[data-outcome="invalid"] b{color:var(--red)}
.semantic-stage-banner[data-outcome="predicted"]{border-color:rgba(51,94,154,.22);background:#f5f8fc}.semantic-stage-banner[data-outcome="predicted"] b{color:#335e9a}
#semantic-stage[data-outcome="illustrative-spec"]>.sol-scene-host,#semantic-stage[data-outcome="runtime-required"]>.sol-scene-host{min-height:430px}
#semantic-stage[data-outcome="illustrative-spec"]>.sol-scene-host{filter:saturate(.72)}
#semantic-stage[data-outcome="runtime-required"]>.sol-scene-host{filter:saturate(.35);opacity:.75}
#semantic-stage[data-motion-teaching-example="true"]>.sol-scene-host{filter:none;opacity:1}
.semantic-source-brick{min-height:430px;display:grid;place-content:center;padding:36px}
.semantic-source-brick>div{width:min(100%,590px);border:1px solid rgba(107,98,89,.32);border-radius:18px;padding:25px;background:#f6f2ec;box-shadow:0 16px 42px rgba(40,30,20,.08)}
.semantic-source-brick b{display:block;margin-bottom:12px;color:#6b6259;font:750 8px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.semantic-source-brick code{display:block;overflow:auto;white-space:pre-wrap;color:var(--ink);font:550 11px/1.7 var(--mono)}
.semantic-source-brick p{margin:15px 0 0;color:var(--soft);font:520 9px/1.55 var(--mono)}
.semantic-stage-invalid{min-height:430px}
.semantic-stage-invalid code{max-width:580px;white-space:pre-wrap;color:var(--ink);font:550 10px/1.6 var(--mono)}
.semantic-translation-chain li[data-provenance]{border-width:2px}.semantic-translation-chain li[data-provenance="derived"]{border-color:rgba(152,95,11,.35);background:#f8f7f5}.semantic-translation-chain li[data-provenance="catalog"]{border-color:rgba(238,150,20,.4);background:#fff8e9}.semantic-translation-chain li[data-provenance="runtime-required"]{border-color:rgba(102,85,168,.32);background:#f6f3ff}.semantic-translation-chain li[data-provenance="unmapped"]{border-color:rgba(107,98,89,.3);background:#f5f2ee}.semantic-translation-chain li[data-provenance="invalid"]{border-color:rgba(168,68,47,.32);background:#fff5f2}

@media(max-width:1650px){
  .semantic-dissection[data-linked="false"]{grid-template-columns:minmax(300px,.72fr) minmax(580px,1.3fr)}
  .semantic-dissection[data-linked="false"]>.semantic-meaning{grid-column:2}
}
/* Between tablet and wide desktop the navigator still occupies 304px. The
   old 300 + 30 + 580 minimums therefore made the entire explanation wider
   than the viewport at 1280px even when every Place fit its own canvas. Keep
   the source useful but compact and give the picture the remaining width; the
   meaning panel continues on the row below. */
@media (min-width:1051px) and (max-width:1350px){
  .semantic-dissection{grid-template-columns:240px 24px minmax(0,1fr)}
  .semantic-dissection>.semantic-meaning{grid-column:3}
  .semantic-dissection[data-linked="false"]{grid-template-columns:240px minmax(0,1fr);column-gap:12px}
  .semantic-dissection[data-linked="false"]>.semantic-meaning{grid-column:2}
}
@media(max-width:1050px){
  .semantic-dissection[data-linked="false"]{grid-template-columns:1fr}
  .semantic-dissection[data-linked="false"]>.semantic-meaning{grid-column:auto}
}
@media(max-width:650px){
  .semantic-stage-banner{grid-template-columns:1fr}.semantic-stage-banner b{grid-row:auto}
  /* motion/canonical:motion's "not witnessed" banner is the only banner that
     ever carries data-outcome="runtime-required" — sol-translator.mjs only
     returns that outcome for the motion rule — so this looks generic but in
     practice touches nothing else. Above 650px its pill shape (three columns
     in one row, border-radius:999px, set unconditionally near the top of
     this file) fits the short title + copy + foot on one line. Below 650px
     the pill never actually reset: `.semantic-stage-banner{grid-template-
     columns:1fr}` just above has lower specificity than the outcome-scoped
     selector that sets the pill, so the three-column pill kept winning at
     narrow widths. Measured live at true 480: the copy column was squeezed
     to near zero, wrapping "Play the three-part gesture: start -> travel ->
     arrive." one word per line, and the foot column — still positioned by
     the old row math — painted its text on top of that wrapped copy instead
     of below it. Give this banner the same one-column rounded-rectangle
     fallback every other outcome already gets here, so title/copy/foot
     stack in reading order instead of colliding. */
  .semantic-stage-banner[data-outcome="runtime-required"]{
    grid-template-columns:1fr;border-radius:14px;padding:12px 14px;gap:4px;
    margin:12px 16px 0
  }
  .semantic-stage-banner[data-outcome="runtime-required"] b{grid-row:auto;min-width:0}
}

/* Public taxonomy: semantic variants are not presented as AST test duplicates. */
.semantic-concept-button>span>em{display:-webkit-box;overflow:hidden;color:var(--mute);font:500 7px/1.35 var(--mono);font-style:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.semantic-concept-button[aria-selected="true"]>span>em{color:rgba(255,247,235,.48)}
.semantic-case-group{display:grid;gap:3px}
.semantic-case-group[hidden]{display:none}
.semantic-case-button>span{display:grid;gap:3px;min-width:0}
.semantic-case-button>span>b{overflow:hidden;color:inherit;font:560 10px/1.2 var(--sans);text-overflow:ellipsis;white-space:nowrap}
.semantic-case-button>span>em{color:var(--mute);font:600 6px/1 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase}
.semantic-case-button[data-default="true"]>span>em{color:var(--orange-deep)}
.semantic-taxonomy-note{margin:-17px 0 22px;padding:10px 12px;border-left:2px solid rgba(238, 150, 20,.4);color:var(--soft);background:rgba(255,255,255,.55);font:540 8px/1.55 var(--mono)}

/* Curated source lessons are deliberately separate from the 60-rule language
   catalogue. They use the same renderer, but are examples of code rather than
   new Vinci primitives. */
.semantic-codeblock-section{padding-top:4px;border-top:1px solid rgba(21,17,13,.08)}
.semantic-codeblock-intro{margin:0 12px 9px;color:var(--mute);font:500 8px/1.5 var(--mono)}
.semantic-codeblock-list{display:grid;gap:4px;margin:0 5px}
.semantic-codeblock-example-button{width:100%;display:grid;grid-template-columns:9px minmax(0,1fr);gap:8px;align-items:start;border:0;border-radius:12px;padding:9px 9px;color:var(--soft);text-align:left;background:transparent}
.semantic-codeblock-example-button i{width:6px;height:6px;margin-top:5px;border:1px solid #c7bda8;border-radius:50%}
.semantic-codeblock-example-button span{display:grid;gap:4px;min-width:0}
.semantic-codeblock-example-button b{overflow:hidden;color:inherit;font:560 10px/1.25 var(--sans);text-overflow:ellipsis;white-space:nowrap}
.semantic-codeblock-example-button small{color:var(--mute);font:500 7px/1.35 var(--mono)}
.semantic-codeblock-example-button:hover{color:var(--ink);background:#faf8f3}
.semantic-codeblock-example-button[aria-pressed="true"]{color:var(--ink);background:#fff3e0;box-shadow:inset 0 0 0 1px rgba(238,150,20,.13)}
.semantic-codeblock-example-button[aria-pressed="true"] i{border-color:var(--orange);background:var(--orange)}
.semantic-codeblock-example-button[hidden]{display:none}

/* ── Minimal construct view ──────────────────────────────────────────────────
   The hero belongs to an INTRO, not to every one of 60 constructs: repeating a
   78px headline and a paragraph of manifesto above each construct buried the
   thing the reader came for. The construct view is now quiet — the source, the
   picture, and the notes. Calm surfaces, one warm accent, generous air. */
.semantic-hero{display:none}
.semantic-main{padding-top:26px}

/* The atlas card stops competing with its own contents. */
.semantic-atlas{
  border-color:rgba(21,17,13,.07);border-radius:24px;padding:22px;
  background:rgba(255,255,255,.55);box-shadow:0 10px 34px rgba(70,50,20,.035)}

/* One quiet line naming the construct, with its summary beneath it. */
.semantic-heading{
  align-items:flex-start;flex-direction:column;gap:6px;padding:2px 4px 16px}
.semantic-heading>div{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 12px
}
.semantic-heading>div>.eyebrow{grid-column:1;grid-row:1}
.semantic-heading h2{
  grid-column:1/-1;margin:2px 0 0;font:520 clamp(26px,2.2vw,36px)/1.05 var(--serif);letter-spacing:-.04em}
.semantic-heading .semantic-outcome-badge{
  grid-column:2;grid-row:1;justify-self:start;margin-top:0
}
.semantic-heading>p{
  max-width:640px;margin:0;color:var(--mute);font:500 10px/1.6 var(--mono);text-align:left}
.semantic-heading .eyebrow{font-size:8px;letter-spacing:.16em;opacity:.72}

/* Panes: hairlines instead of frames, so the Vinci picture is the loudest thing. */
.semantic-pane,.semantic-meaning{border-color:rgba(21,17,13,.07)}
.semantic-pane>header{min-height:54px;padding:0 18px;border-color:rgba(21,17,13,.06)}
#semantic-source{min-height:560px;padding:26px 18px}
#semantic-stage{min-height:560px;background-size:28px 28px;
  background-image:radial-gradient(circle,rgba(122, 74, 8,.06) .7px,transparent .8px)}
#semantic-stage>.semantic-visual-program{min-height:560px}
/* The STAGE reserves the pane (560px above) so the canvas never collapses; the
   PLACE inside it must still hug what it holds. This rule used to restate
   520px, contradicting the "one compact anatomy" rule earlier in this file, and
   the later value won — so a one-Ball program drew a 520px box with ~340px of
   nothing under it, on all 121 cases. A Place is the size of what is in it. */
.semantic-visual-program .vinci-program-place{min-height:0}

/* date/canonical:date only, desktop side-by-side layout only (scoped by the
   route's own concept+case data attributes, so no sibling operator-family
   route and no stacked mobile/tablet layout is touched). Two host-clock
   reads are the complete authored picture here — there is no third device
   to add without inventing one, and the shared 286px-wide value-operation
   card (see .vinci-expression-binding-operation below) must stay exactly
   that width on every route, so the fix cannot be "make it wider". But the
   reserved 560px canvas above left these two ~85px cards stacked at the very
   top with well over half the panel empty beneath them, reading as a stray
   island rather than a picture that "occupies the canvas" at first glance.
   Center the picture in the room the fixed-height canvas already reserves,
   and let each card breathe a little more — same content, same shared
   operator-lens geometry (verified unchanged by
   operator-feedback-acceptance-browser-check.mjs), more presence. */
@media (min-width:1051px){
  #semantic-stage[data-concept-id="date"][data-case-id="canonical:date"]
    > .semantic-visual-program{
    display:flex;flex-direction:column;justify-content:center;min-height:560px
  }
  #semantic-stage[data-concept-id="date"][data-case-id="canonical:date"]
    .vinci-program-top-operations{
    gap:28px
  }
  #semantic-stage[data-concept-id="date"][data-case-id="canonical:date"]
    .vinci-expression-definition-binding{
    padding:16px 10px
  }
  /* evalcode/canonical:evalcode only (scoped by the route's own concept+case
     data attributes, so no sibling operator-family route — and no other
     flat-inferred route such as object/primitive, which intentionally keeps
     its stripped scope chrome — is touched). Verified live: this route's
     renderer correctly proves ONE inferred program scope with no authored
     host boundary and strips the scope/place box for it (the same "flat-
     inferred" simplification object/primitive already use — see the
     data-context-presentation rule below); that stripped chrome is correct
     and stays untouched here. But the two authored bindings plus the single
     eval(…) opaque-boundary card that remain measured only ~153px tall
     inside the same fixed 560px reserved canvas every route gets, landing
     top-left as a small island with most of the panel empty beneath it —
     same defect class as date/canonical:date above, same fix: center the
     picture in the room the canvas already reserves and let the two
     bindings and the boundary card breathe more. Nothing here re-adds the
     stripped scope box or invents any runtime fact; the eval(…) card's
     "Unknown until run" stays exactly that. */
  #semantic-stage[data-concept-id="evalcode"][data-case-id="canonical:evalcode"]
    > .semantic-visual-program{
    display:flex;flex-direction:column;justify-content:center;min-height:560px
  }
  #semantic-stage[data-concept-id="evalcode"][data-case-id="canonical:evalcode"]
    .vinci-program-definitions{
    padding:14px 0;gap:14px
  }
  #semantic-stage[data-concept-id="evalcode"][data-case-id="canonical:evalcode"]
    .vinci-program-top-operations{
    margin-top:34px
  }
  #semantic-stage[data-concept-id="evalcode"][data-case-id="canonical:evalcode"]
    .vinci-authored-operation.vinci-advanced-operation{
    padding:34px 22px
  }

  /* mapset/canonical:mapset only (scoped by the route's own concept+case data
     attributes, so no sibling collection route — array, object-statics,
     weak-collections, and no other-viewport/other-case mapset variant — is
     touched). Same defect class as date/evalcode directly above: the Map's
     own keyed-collection card measures a fixed 350×274 (.vinci-collection-
     place's authored-content size) inside the same reserved 560px canvas
     every route gets, landing top-left as a small island with most of the
     panel empty around and beneath it — a verification pass named this a
     "modest card marooned inside a mostly-empty canvas". Center the picture
     in the room the fixed-height canvas already reserves and let the card
     breathe wider and roomier, same as evalcode's operation card above.
     Nothing here changes the three authored set/set/get rows, the "runtime
     size ?" honesty text, or the truth line — only their room to breathe. */
  #semantic-stage[data-concept-id="mapset"][data-case-id="canonical:mapset"]
    > .semantic-visual-program{
    display:flex;flex-direction:column;justify-content:center;min-height:560px
  }
  #semantic-stage[data-concept-id="mapset"][data-case-id="canonical:mapset"]
    .vinci-static-definition[data-collection-grammar]{
    width:min(100%,460px)
  }
  #semantic-stage[data-concept-id="mapset"][data-case-id="canonical:mapset"]
    .vinci-collection-place{
    gap:12px;padding:18px
  }
  #semantic-stage[data-concept-id="mapset"][data-case-id="canonical:mapset"]
    .vinci-collection-entries{
    gap:9px
  }
  #semantic-stage[data-concept-id="mapset"][data-case-id="canonical:mapset"]
    .vinci-program-operation.vinci-collection-operation{
    padding:11px 13px
  }
}

/* Flatten only the inferred Frontend presentation. The source program scope
   is restored by the shared declared-scope rules below for every L1. Real
   authored host boundaries retain their own presentation. */
#semantic-stage>.semantic-visual-program[data-context-presentation="flat-inferred"]
  >.vinci-program-place[data-context-evidence="inferred-no-boundary"]{
  width:100%;align-self:stretch;gap:0;margin:0;padding:0;border:0;border-radius:0;
  background:transparent;box-shadow:none
}
#semantic-stage>.semantic-visual-program[data-context-presentation="flat-inferred"]
  >.vinci-program-place[data-context-evidence="inferred-no-boundary"]
  >.vinci-program-scope[data-scope-kind="program"]{
  width:100%;min-height:0;padding:0;border:0;border-radius:0;
  background:transparent;box-shadow:none
}
/* Clip the two presentation labels instead of deleting them. Their text,
   section/header semantics, aria context and source-linked IDs remain
   available to Inspect and assistive technology. */
#semantic-stage>.semantic-visual-program[data-context-presentation="flat-inferred"]
  >.vinci-program-place[data-context-evidence="inferred-no-boundary"]
  >.vinci-program-place-label,
#semantic-stage>.semantic-visual-program[data-context-presentation="flat-inferred"]
  >.vinci-program-place[data-context-evidence="inferred-no-boundary"]
  >.vinci-program-scope[data-scope-kind="program"]
  >.vinci-program-scope-label{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;
  white-space:nowrap!important;border:0!important
}

/* Scope lessons retain their compact room sizing. Shared declared-scope
   rules below also preserve the room in every other L1. */
:is(#semantic-stage[data-concept-id="scope"],#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"])>.semantic-visual-program[data-context-presentation="flat-inferred"]
  >.vinci-program-place[data-context-evidence="inferred-no-boundary"]
  >.vinci-program-scope[data-scope-kind="program"]{
  position:relative;align-self:center;width:min(100%,320px);min-height:94px;
  box-sizing:border-box;padding:31px 10px 7px;border:1px solid rgba(21,17,13,.12);
  border-radius:14px;background:rgba(255,255,255,.77);
  box-shadow:0 12px 30px rgba(21,17,13,.045)
}
:is(#semantic-stage[data-concept-id="scope"],#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"])>.semantic-visual-program[data-context-presentation="flat-inferred"]
  >.vinci-program-place[data-context-evidence="inferred-no-boundary"]
  >.vinci-program-scope[data-scope-kind="program"]
  >.vinci-program-scope-label{
  position:absolute!important;left:14px!important;top:13px!important;
  width:auto!important;height:auto!important;margin:0!important;padding:0!important;
  overflow:visible!important;clip:auto!important;clip-path:none!important;
  color:var(--ink-soft);font:650 9px/1 var(--mono);letter-spacing:.06em;
  white-space:normal!important;border:0!important
}

/* A comment-only file still has one authored meaning. Keep the exact source
   lexeme floating over its real script-scope room, with one quiet switch in
   the room's top-right corner. This is presentation only: a Comment never
   becomes an executable operation or runtime-evidence card. */
#semantic-stage[data-concept-id="scope"][data-case-id="legacy:program-place/empty-file"]
  >.semantic-visual-program[data-context-presentation="flat-inferred"]
  >.vinci-program-place[data-context-evidence="inferred-no-boundary"]
  >.vinci-program-scope[data-scope-kind="program"]{
  min-height:184px;overflow:visible
}
.semantic-authored-comment-overlay{
  position:absolute;inset:7px;z-index:24;display:grid;place-items:center;
  pointer-events:none
}
.semantic-authored-comment-toggle{
  position:absolute;right:5px;top:4px;z-index:2;min-height:29px;padding:0 10px;
  border:1px solid rgba(122,74,8,.24);border-radius:999px;color:#6f4a16;
  background:rgba(255,253,250,.9);font:700 7px/1 var(--mono);letter-spacing:.07em;
  text-transform:uppercase;box-shadow:0 5px 14px rgba(63,40,10,.06);cursor:pointer;
  pointer-events:auto
}
.semantic-authored-comment-toggle[aria-checked="false"]{
  color:var(--mute);background:rgba(255,255,255,.7)
}
.semantic-authored-comment-list{
  display:grid;width:min(86%,238px);gap:8px;margin-top:22px
}
.semantic-authored-comment-list[hidden]{display:none}
.semantic-authored-comment-card{
  min-width:0;padding:15px 17px;border:1px solid rgba(122,74,8,.2);
  border-radius:13px;background:rgba(255,249,236,.76);
  box-shadow:0 12px 30px rgba(55,35,9,.09);backdrop-filter:blur(7px)
}
.semantic-authored-comment-card code{
  display:block;overflow-wrap:anywhere;color:#6e4b19;font:600 10px/1.55 var(--mono);
  white-space:pre-wrap
}
@media (max-width:650px),(pointer:coarse){
  .semantic-authored-comment-toggle{min-height:44px;padding-inline:13px}
}

/* THIS and Arrow share the same practical identity law: authored `this`
   names the existing receiver Ball. Their focused L1 pictures therefore keep
   one real canonical Ball and one plain token-to-Ball cue; the complete
   Function/Call scaffolding stays source-backed but hidden for this view. */
#semantic-stage[data-receiver-ball-lesson]
  >.semantic-visual-program[data-receiver-ball-lesson]
  >.vinci-program-place[data-receiver-ball-place]{
  display:grid;place-items:center;min-height:300px;padding:20px 12px;
  overflow:visible
}
#semantic-stage[data-receiver-ball-lesson]
  >.semantic-visual-program[data-receiver-ball-lesson]
  >.vinci-program-place[data-receiver-ball-place]
  >.vinci-program-scope[data-receiver-ball-scope]{
  display:grid;place-items:center;width:min(100%,520px);min-height:0;padding:0;
  overflow:visible;border:0;background:transparent;box-shadow:none
}
/* Scaffolding the lesson hides must actually disappear even where a component
   rule pins its own display (fragments, definition racks), and must stay gone
   across incremental repaints that recreate un-hidden nodes. The adopted Ball
   seat lives inside the lesson section, never in these racks. */
.vinci-program-place[data-receiver-ball-place] [hidden]{display:none !important}
.vinci-program-place[data-receiver-ball-place] .vinci-semantic-fragment,
.vinci-program-place[data-receiver-ball-place] .vinci-program-definitions,
.vinci-program-place[data-receiver-ball-place] .vinci-program-top-operations{
  display:none !important
}
.semantic-receiver-ball-simple{
  display:grid;justify-items:center;gap:10px;width:min(100%,430px);min-width:0;
  padding:10px 12px;color:var(--ink);text-align:center
}
.semantic-receiver-ball-equation{
  display:grid;justify-items:center;gap:5px;min-width:0
}
.semantic-receiver-ball-target{
  display:grid;place-items:center;min-width:0
}
.semantic-receiver-ball-target>.vinci-ball-seat{
  display:grid;place-items:center;min-width:0;margin:0
}
.semantic-receiver-ball-target .vf-ballwrap{margin:0}
.semantic-receiver-ball-explanation{
  max-width:380px;margin:0;color:#4f463b;font:600 10px/1.5 var(--mono)
}
.semantic-receiver-ball-evidence{
  color:#8b806f;font:700 7px/1.3 var(--mono);letter-spacing:.08em;
  text-transform:uppercase
}
@media(max-width:650px){
  #semantic-stage[data-receiver-ball-lesson]
    >.semantic-visual-program[data-receiver-ball-lesson]
    >.vinci-program-place[data-receiver-ball-place]{
    min-height:270px;padding:14px 8px
  }
  .semantic-receiver-ball-simple{gap:8px;padding:7px 6px}
  .semantic-receiver-ball-explanation{max-width:310px;font-size:9px}
}

/* Property (2026-09-11): the result Binding is g's own Primitive pill on the
   scope rack, its VALUE seat holding the same live owning Ball (the seat is
   vinci-value-pill.mjs's: name left, carrier right, grows with an expanded
   Ball). The rack therefore stays; only the fragments and top operations
   fold. */
#semantic-stage[data-property-value-ball-lesson]
  .vinci-program-place[data-property-value-ball-place]{
  display:grid;place-items:center;min-height:300px;padding:20px 12px;overflow:visible
}
#semantic-stage[data-property-value-ball-lesson]
  .vinci-program-scope[data-property-value-ball-scope]{
  display:grid;place-items:center;width:min(100%,520px);min-height:0;padding:0;
  overflow:visible;border:0;background:transparent;box-shadow:none
}
.vinci-program-place[data-property-value-ball-place] [hidden]{display:none !important}
.vinci-program-place[data-property-value-ball-place] .vinci-semantic-fragment,
.vinci-program-place[data-property-value-ball-place] .vinci-program-top-operations{
  display:none !important
}
.vinci-program-place[data-property-value-ball-place] .vinci-program-definitions{
  min-height:0;width:100%;place-items:center
}
.vinci-binding-pill[data-property-value-ball-pill] .vinci-ball-seat{
  display:grid;place-items:center;margin:0
}
/* A repaint may dock the field-level read chip back under the read field;
   inside the very pill that already is g it would say "read messi.goals →"
   a second time, so fold it (nodes stay for provenance/Inspect). */
.vinci-binding-pill[data-property-value-ball-pill] .vinci-field-operation-dock{display:none !important}
.vinci-binding-pill[data-property-value-ball-pill] .vf-ballwrap{margin:0}
.semantic-atlas .vinci-binding-pill[data-property-value-ball-pill] > .vinci-value-pill-carrier-open{
  grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;
  min-height:44px;padding:0 12px;border:1px solid #e3d7bf;border-radius:999px;
  background:#fffaf1;color:#7a4a08;font:600 12px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;cursor:pointer
}
.semantic-atlas .vinci-binding-pill[data-property-value-ball-pill] > .vinci-value-pill-carrier-open:hover{background:#fff3df}
.semantic-atlas .vinci-binding-pill[data-property-value-ball-pill] > .vinci-value-pill-carrier-open:focus-visible{outline:2px solid #7a6440;outline-offset:2px}
/* The standalone editor uses the shared Pill and its body-level palette.
   Keep the directly editable targets comfortable for a finger without
   changing presentation in Foundation consumers that import this sheet. */
@media(pointer:coarse){
  body:has(.semantic-atlas) :is(.vinci-value-chain-part,.vinci-value-editor-actions button,.vinci-value-palette button,.vinci-value-literal-input),
  .semantic-atlas .vinci-value-pill[data-binding-name]{min-height:44px;min-width:44px;box-sizing:border-box}
}
/* An ephemeral Ball edit repaints the whole scope: the renderer reclaims the
   Ball seat into the rack and docks g back under the read field, leaving the
   seat empty until the lesson mounts again. An empty seat must not also
   silence the pill's text value — `g: messi.goals` is the honest fallback. */
.vinci-binding-pill[data-property-value-ball-pill][data-value-slot]:not(:has(>.vinci-value-pill-slot>[data-ball-seat]))
  >.vinci-value-pill-value{display:block !important}
/* Named structured values (a Map board with its read row, an accessor's
   Ball) still compose through createStructuredValuePrimitive. */
.semantic-property-value-pill{
  display:grid;justify-items:center;gap:8px;width:max-content;max-width:min(100%,340px);
  padding:12px 22px 10px;border:2px solid rgba(122,74,8,.24);border-radius:28px;
  background:#fffdfa;box-shadow:0 8px 20px rgba(122,74,8,.08);color:var(--ink)
}
.semantic-property-value-pill .vinci-ball-seat{display:grid;place-items:center;margin:0}
.semantic-property-value-pill .vinci-field-operation-dock{display:none !important}
.semantic-property-value-pill .vf-ballwrap{margin:0}
.semantic-property-value-name{
  justify-self:start;color:#6f4a16;font:600 13px/1.2 var(--mono, 'Manrope')
}
.semantic-property-value-slot{display:grid;place-items:center;min-width:0}
.semantic-property-value-provenance{
  color:#8b806f;font:700 7px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase
}
@media(max-width:650px){
  .semantic-property-value-pill{padding:10px 14px 9px;border-radius:24px}
}

/* Catch/finally (2026-09-01): try/catch/finally in the IF/ELSE step grammar.
   TRY is the gate with two labeled routes (THROW / NO THROW); CATCH is the
   THROW arm's step; FINALLY is the step both routes rejoin. */
[data-catch-finally-if-grammar="true"] [data-cf-step]{
  position:relative;border:1px solid rgba(122,74,8,.22)!important;border-radius:16px!important;
  background:#fff!important;box-shadow:0 6px 16px rgba(122,74,8,.06)!important
}
[data-catch-finally-if-grammar="true"] [data-cf-step]>.vinci-authored-operation-header>b{
  font:750 8px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#7a4a08
}
[data-catch-finally-if-grammar="true"] [data-cf-step="try"]{margin-bottom:30px!important}
[data-catch-finally-if-grammar="true"] [data-cf-step="try"]::before{
  content:"THROW ↓";position:absolute;top:calc(100% + 4px);left:18%;
  color:#a8641c;font:750 7px/1 var(--mono);letter-spacing:.08em
}
[data-catch-finally-if-grammar="true"] [data-cf-step="try"]::after{
  content:"NO THROW ↓";position:absolute;top:calc(100% + 4px);right:14%;
  color:#985f0b;font:750 7px/1 var(--mono);letter-spacing:.08em
}
[data-catch-finally-if-grammar="true"] [data-cf-step="catch"],
[data-catch-finally-if-grammar="true"] [data-cf-step="finally"]{margin-top:14px!important}
[data-catch-finally-if-grammar="true"] [data-cf-step="catch"]::before,
[data-catch-finally-if-grammar="true"] [data-cf-step="finally"]::before{
  content:"";position:absolute;bottom:100%;left:50%;width:1px;height:14px;
  background:rgba(122,74,8,.28)
}
[data-catch-finally-if-grammar="true"] [data-cf-step="finally"]::after{
  content:"BOTH ROUTES REJOIN · ALWAYS RUNS";position:absolute;bottom:calc(100% + 3px);
  left:50%;transform:translateX(-50%);white-space:nowrap;
  color:#8b806f;font:750 6px/1 var(--mono);letter-spacing:.1em;background:#fffdfa;padding:0 6px
}

/* Database (2026-09-01): source-derived Play + explicitly-labeled example
   view. The rehearsed row is the real Ball moved, never cloned. */
.semantic-database-controls{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;margin:0 0 12px
}
.semantic-database-controls button{
  padding:5px 11px;border:1px solid rgba(122,74,8,.3);border-radius:999px;
  background:#fff;color:#7a4a08;font:750 9px/1 var(--mono);cursor:pointer
}
.semantic-database-controls button[data-database-action="example"]{
  border-style:dashed;color:#8b806f
}
.semantic-database-controls output{
  flex-basis:100%;text-align:center;color:var(--ink-soft);font:650 8px/1.3 var(--mono)
}
.vinci-database-row-offer{transition:transform .36s cubic-bezier(.2,.8,.2,1)}
[data-db-rehearsal-beat="1"] .vinci-database-row-offer{transform:translateY(26px)}
.vhost-db-grid .vinci-database-row-offer{transform:none}
.semantic-database-rehearsal-tag{
  display:block;margin-top:3px;color:#8a6a1f;text-align:center;
  font:750 6.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase
}
.semantic-database-example-banner{
  margin:0 0 8px;padding:6px 10px;border:1.5px dashed rgba(139,128,111,.5);border-radius:10px;
  color:#8b806f;text-align:center;font:750 7px/1.4 var(--mono);letter-spacing:.08em
}
.semantic-database-example-band{
  display:flex;justify-content:center;gap:14px;padding:4px 2px
}
.semantic-database-example-row{
  display:flex;flex-direction:column;align-items:center;gap:3px;min-width:34px;
  padding:0;border:0;background:transparent;cursor:help
}
.semantic-database-example-ball{
  box-sizing:border-box;width:24px;height:24px;border-radius:50%;
  border:1.5px dashed rgba(122,74,8,.5);
  background:radial-gradient(circle at 35% 25%,rgba(255,229,173,.5),rgba(238,150,20,.26) 60%,rgba(169,87,16,.2));
  box-shadow:inset 0 -1px 3px rgba(122,74,8,.08)
}
.semantic-database-example-label{
  color:#15110d;font:500 9px/1 'JetBrains Mono',var(--mono);letter-spacing:.02em;opacity:.75
}
/* 2.15's active grammar: the card glows and its entry port absorbs while the
   rehearsed row is in motion or freshly seated. */
.vhost-database[data-db-active="true"]{
  border-color:rgba(238,150,20,.45)!important;
  box-shadow:0 0 0 4px rgba(238,150,20,.1),0 10px 26px rgba(238,150,20,.14)!important;
  transition:box-shadow .3s ease,border-color .3s ease
}
.vhost-database[data-db-active="true"] .vhost-db-port[data-port="entry"]{
  box-shadow:0 0 0 5px rgba(238,150,20,.18);border-color:rgba(238,150,20,.7)
}

/* Proxy (2026-09-01): the Property-pill canon — one name pill whose VALUE is
   the masked Ball + its one trap route; the construction source leaves the
   mask; the loose result pill folds. */
[data-proxy-value-lesson="true"] [data-proxy-result-folded="true"]{display:none !important}
[data-proxy-value-lesson="true"] .vinci-proxy-trap-mask .vinci-binding-pill-value{display:none !important}
[data-proxy-value-lesson="true"] .vinci-proxy-trap-mask{min-width:150px}
.semantic-proxy-value-pill{margin:8px auto 0;max-width:min(100%,380px)}
.semantic-proxy-value-pill .vinci-proxy-composition{padding:0}

/* Module (2026-09-01): scope logic inside the worlds — the importer's
   binding lives in its script-scope room; the exporter gains a distinct
   dashed EXPORTS room, separate from the module's own scope. */
[data-module-scope-worlds="true"] [data-module-scope-folded="true"]{display:none !important}
.semantic-module-scope-room{
  display:grid;justify-items:center;gap:7px;margin-top:8px;padding:12px 14px;
  border:1.5px solid rgba(122,74,8,.24);border-radius:14px;background:rgba(255,253,250,.9)
}
.semantic-module-scope-room[data-module-scope-room="exports"]{
  border-style:dashed;background:rgba(255,250,240,.85)
}
.semantic-module-scope-label{
  color:#8b806f;font:750 6.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase
}
.semantic-module-scope-pill{
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  min-height:var(--vinci-data-pill-h,38px);padding:var(--vinci-data-pill-pad,8px 14px);
  border:var(--vinci-data-pill-border,2px) solid rgba(122,74,8,.28);
  border-radius:var(--vinci-data-pill-radius,999px);background:#fff;
  font-size:var(--vinci-data-pill-font-size,13px);font-weight:var(--vinci-data-pill-font-weight,500);
  box-shadow:0 6px 16px rgba(122,74,8,.12)
}
.semantic-module-scope-pill small{color:#8b806f;font:700 6.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase}

/* Host (2026-09-01): the SERVER node's entry/exit speak the Function port
   grammar — quiet 30px dashed socket in, return-style port out — still on
   the left and right. */
#semantic-stage[data-concept-id="host"][data-case-id="canonical:host"] .vhost-api-port[data-port="entry"]{
  box-sizing:border-box;width:30px!important;height:30px!important;
  border:1px dashed rgba(122,74,8,.55)!important;border-radius:50%!important;
  background:#fff!important;box-shadow:none!important
}
#semantic-stage[data-concept-id="host"][data-case-id="canonical:host"] .vhost-api-port[data-port="exit"]{
  box-sizing:border-box;width:22px!important;height:22px!important;
  border:2px solid rgba(152,95,11,.5)!important;border-radius:50%!important;
  background:#f9f7f5!important;box-shadow:none!important
}

/* Plain-block purpose (2026-09-02): quiet chip in the Single-IF card language. */
[data-plain-block-purpose]{
  margin:6px 0 4px;padding:5px 10px;border-radius:999px;width:max-content;max-width:100%;
  background:#fff;border:1px solid rgba(15,23,42,.14);color:#334155;
  font:600 11px/1.35 "Inter",system-ui,sans-serif;letter-spacing:.01em;
}

/* Function canonical (2026-09-02): the richer programmable lesson must still
   land its whole frame inside the phone fold. */
@media(max-width:600px){
  #semantic-stage[data-concept-id="function"][data-case-id="canonical:function"] .vinci-function-call-routes{
    min-height:0!important;margin:2px 0!important;padding:2px 0!important;gap:4px!important
  }
  #semantic-stage[data-concept-id="function"][data-case-id="canonical:function"] .vinci-program-function{
    margin-top:4px!important
  }
  #semantic-stage[data-concept-id="function"][data-case-id="canonical:function"] .vinci-program-place{
    padding-top:2px!important;padding-bottom:4px!important
  }
  #semantic-stage[data-concept-id="function"][data-case-id="canonical:function"] .vinci-mark-preview{
    padding-top:8px!important
  }
  #semantic-stage[data-concept-id="function"][data-case-id="canonical:function"] .vinci-program-scope{
    margin-bottom:2px!important
  }
}

/* Quiet canon (2026-09-01): white named steps with attr()-driven truth
   labels; folded chrome disappears but stays in the DOM. */
[data-quiet-step="true"]{
  position:relative;border:1px solid rgba(122,74,8,.22)!important;border-radius:16px!important;
  background:#fff!important;box-shadow:0 6px 16px rgba(122,74,8,.06)!important
}
[data-quiet-step="true"] .vinci-authored-operation-header>b,
[data-quiet-step="true"] .vinci-static-definition-title{
  font:750 8px/1 var(--mono)!important;letter-spacing:.1em;text-transform:uppercase;color:#7a4a08
}
[data-quiet-step="true"][data-quiet-label]{margin-bottom:26px!important}
[data-quiet-step="true"][data-quiet-label]::after{
  content:attr(data-quiet-label);position:absolute;top:calc(100% + 5px);left:50%;
  transform:translateX(-50%);width:max-content;max-width:min(92vw,420px);text-align:center;
  color:#8a6a1f;font:750 6.5px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase
}
[data-quiet-folded="true"]{display:none !important}

/* Accessor (2026-09-01): the Property grammar plus the get mark — one taller
   name pill seating the live player Ball and its accessor field. */
#semantic-stage[data-accessor-value-ball]
  .vinci-program-place[data-accessor-value-ball-place]{
  display:grid;place-items:center;min-height:300px;padding:20px 12px;overflow:visible
}
#semantic-stage[data-accessor-value-ball]
  .vinci-program-scope[data-accessor-value-ball-scope]{
  display:grid;place-items:center;width:min(100%,520px);min-height:0;padding:0;
  overflow:visible;border:0;background:transparent;box-shadow:none
}
[data-accessor-value-ball-scope] > [data-accessor-source-folded="true"]{display:none !important}
.semantic-accessor-value-pill .vinci-accessor-flow{margin-top:6px}

/* Typed array (2026-09-01, array canon): one rail — the duplicate anonymous
   literal rail folds; the typed card's initializer row is the rail. */
[data-typed-array-canon="true"] [data-typed-array-folded-literal="true"]{
  display:none !important
}

/* Object statics (2026-09-01): the source-computed keys result is a real
   mini rail — ordered member seats and a ×count. */
.semantic-mini-rail{
  display:inline-flex;align-items:center;gap:5px;padding:4px 9px;
  border:1.5px solid rgba(122,74,8,.3);border-radius:12px;background:#fffdfa
}
.semantic-mini-rail>b{color:#8b806f;font:750 7px/1 var(--mono)}
.semantic-mini-rail-member{
  position:relative;padding:3px 9px;border:1.5px solid rgba(122,74,8,.28);border-radius:999px;
  background:#fff;color:var(--ink);font:600 10px/1 var(--mono)
}

/* Map board (2026-09-01): keys left, values right, 2 rows + more; seats
   inside the taller result pill when the source authors a get. */
.semantic-map-board{
  display:grid;justify-items:stretch;gap:14px;width:min(100%,392px);
  padding:22px 22px;border:1px solid rgba(203,162,91,.36);border-radius:18px;
  background:rgba(255,255,255,.96);box-shadow:0 2px 4px rgba(44,35,20,.025),0 6px 16px rgba(44,35,20,.035)
}
.semantic-map-board-title{
  color:#73716b;font:500 11px/1.2 var(--sans,system-ui);letter-spacing:0;text-transform:none;
  text-align:center;padding-bottom:8px;border-bottom:1px solid rgba(133,119,97,.12)
}
.semantic-map-board-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.semantic-map-board-col{
  color:#858077;font:450 10px/1.2 var(--sans,system-ui);letter-spacing:0;text-transform:none;
  text-align:center
}
.semantic-map-board-row{display:contents}
.semantic-map-board-row[hidden]{display:none}
.semantic-map-board-row .vmark-pill{justify-self:stretch;justify-content:center}
.semantic-map-board-row [data-board-operation-id]{cursor:pointer}
/* Host API (2026-09-03): the endpoint is a real opener for the shared editor
   (decorateHostEndpointEditor sets role, tabindex and aria-haspopup on it), but
   it sat inside .vhost-api-node, which the Map-board rule above never reached —
   so an editable endpoint had no visible affordance at all. "how it'll be
   editable" was the ask; this is the part of it that was missing. */
.vhost-api-node [data-board-operation-id]{cursor:pointer}
.vhost-api-node [data-board-operation-id]:hover,
.vhost-api-node [data-board-operation-id]:focus-visible{
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px
}
.semantic-map-board-row-badge{
  grid-column:1 / -1;margin-top:-3px;color:#8b806f;text-align:center;
  font:700 6.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase
}
.semantic-map-board-row[data-map-board-hit="true"] .vmark-pill{
  border-color:rgba(152,95,11,.5);box-shadow:0 0 0 3px rgba(238,150,20,.12)
}
.semantic-map-board-row[data-map-board-hit="true"] .semantic-map-board-row-badge{color:#985f0b}
.semantic-map-board-more{
  justify-self:center;padding:4px 12px;border:1px solid rgba(122,74,8,.3);border-radius:999px;
  background:#fff;color:#7a4a08;font:750 8px/1 var(--mono);cursor:pointer
}
[data-map-board-folded="true"],
[data-map-board-source-folded="true"]{display:none !important}
.semantic-map-value-pill{margin:0 auto;max-width:min(100%,452px);padding:20px 28px 18px;gap:12px}
.vinci-collection-place:has(.semantic-map-value-pill){
  border:0;background:transparent;box-shadow:none;padding:0
}

/* Async iteration (2026-09-01, loop canon): one named loop device; the
   duplicate CALL card folds; wait-before-body is named. */
[data-async-iterator-loop-canon="true"] [data-ai-step]{
  position:relative;border:1px solid rgba(122,74,8,.22)!important;border-radius:16px!important;
  background:#fff!important;box-shadow:0 6px 16px rgba(122,74,8,.06)!important
}
[data-async-iterator-loop-canon="true"] [data-ai-step]>.vinci-authored-operation-header>b{
  font:750 8px/1 var(--mono)!important;letter-spacing:.1em;text-transform:uppercase;color:#7a4a08
}

/* the "WAITS BEFORE EACH BODY" caption belonged to the scrapped base; the
   lesson subtitle already states it and the ring carries the identity */

[data-async-iterator-loop-canon="true"] [data-ai-folded-duplicate="true"]{
  display:none !important
}

/* Event loop (2026-09-01, array canon): the queues speak the rail card
   language — name ×count header, ordered member seats. */
[data-event-loop-queue-rails="true"] [data-event-loop-queue]{
  border:1px solid rgba(122,74,8,.22)!important;border-radius:18px!important;
  background:#fff!important;box-shadow:0 6px 16px rgba(122,74,8,.06)!important
}
[data-event-loop-queue-rails="true"] [data-event-loop-queue]>.vinci-authored-operation-header>b{
  font:750 10px/1 var(--mono)!important;letter-spacing:.06em;color:#7a4a08
}

/* Promises (2026-09-01): follows the await treatment — pills carry the
   story; duplicated combinator chrome folds; Promise.all names its wait. */
[data-promises-await-grammar="true"] [data-promise-step]{
  position:relative;border:1px solid rgba(122,74,8,.22)!important;border-radius:16px!important;
  background:#fff!important;box-shadow:0 6px 16px rgba(122,74,8,.06)!important
}
[data-promises-await-grammar="true"] [data-promise-step]>.vinci-expression-row{
  display:none !important
}
[data-promises-await-grammar="true"] [data-promise-step="input"]>.vinci-authored-operation-header{
  display:none !important
}
[data-promises-await-grammar="true"] [data-promise-step="all"]>.vinci-authored-operation-header>b{
  font:750 8px/1 var(--mono)!important;letter-spacing:.1em;text-transform:uppercase;color:#7a4a08
}
[data-promises-await-grammar="true"] [data-promise-step="all"]{margin-bottom:26px!important}
[data-promises-await-grammar="true"] [data-promise-step="all"]::after{
  content:"Keeps input order · settlement unknown";position:absolute;
  top:calc(100% + 5px);left:50%;transform:translateX(-50%);white-space:nowrap;
  color:#8a6a1f;font:750 6.5px/1 var(--mono);letter-spacing:.09em
}



/* Throw (2026-09-01): the abrupt-completion story in the same step grammar.
   STEP 1 makes the Error value; STEP 2 is the throw edge whose one labeled
   route leaves the current Place — destination honestly Unknown. */
[data-throw-if-grammar="true"] [data-throw-step]{
  position:relative;border:1px solid rgba(122,74,8,.22)!important;border-radius:16px!important;
  background:#fff!important;box-shadow:0 6px 16px rgba(122,74,8,.06)!important
}
[data-throw-if-grammar="true"] [data-throw-step="error"] .vinci-static-definition-title,
[data-throw-if-grammar="true"] [data-throw-step="throw"]>.vinci-authored-operation-header>b{
  font:750 8px/1 var(--mono)!important;letter-spacing:.1em;text-transform:uppercase;color:#7a4a08
}
[data-throw-if-grammar="true"] [data-throw-step="throw"]{margin-top:14px!important;margin-bottom:26px!important}
[data-throw-if-grammar="true"] [data-throw-step="throw"]::before{
  content:"";position:absolute;bottom:100%;left:50%;width:1px;height:14px;
  background:rgba(122,74,8,.28)
}
[data-throw-if-grammar="true"] [data-throw-step="throw"]::after{
  content:"Leaves this scope · destination unknown";position:absolute;
  top:calc(100% + 5px);left:50%;transform:translateX(-50%);white-space:nowrap;
  color:#a8641c;font:750 6.5px/1 var(--mono);letter-spacing:.09em
}

/* Generator (2026-09-01, loop canon): the duplicate CALL rectangles fold —
   the resume enters the drills* frame through its quiet dashed socket; the
   d binding and the authored yield device carry the story. */
[data-generator-loop-canon="true"] .vinci-semantic-fragment[data-generator-folded-call="true"]{
  display:none !important
}
[data-generator-loop-canon="true"] .vinci-program-function .vinci-function-port-mouth{
  box-sizing:border-box;width:30px!important;height:30px!important;
  border:1px dashed rgba(122,74,8,.55)!important;border-radius:50%!important;
  background:#fff!important;box-shadow:none!important
}

/* Completion (2026-09-01): break/continue in the one-arm IF/ELSE step
   grammar. Gates are white STEP cards; each abrupt route reads as that gate's
   named green exit port; the separate label card folds into the exits'
   wording (nodes stay for provenance/Inspect). */
[data-completion-if-grammar="true"] [data-completion-if-gate]{
  border:1px solid rgba(122,74,8,.22);border-radius:16px;background:#fff;
  box-shadow:0 6px 16px rgba(122,74,8,.06)
}
[data-completion-if-grammar="true"] [data-completion-if-gate]>.vinci-authored-operation-header>b{
  font:750 8px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#7a4a08
}
[data-completion-if-grammar="true"] [data-completion-if-exit]{
  position:relative;width:max-content!important;max-width:100%;margin:2px auto 10px!important;
  padding:5px 12px 5px 8px!important;border:1.5px solid rgba(152,95,11,.42)!important;
  border-radius:999px!important;background:#f9f7f5!important;box-shadow:none!important
}
[data-completion-if-grammar="true"] [data-completion-if-exit]::before{
  content:"";position:absolute;bottom:100%;left:50%;width:1px;height:10px;
  background:rgba(152,95,11,.4)
}
[data-completion-if-grammar="true"] [data-completion-if-exit]>.vinci-authored-operation-header{
  display:none !important
}
[data-completion-if-grammar="true"] [data-completion-if-exit] .vinci-completion-origin{
  color:#985f0b;font:750 8px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase
}
[data-completion-if-grammar="true"] [data-completion-if-exit] .vinci-completion-destination{
  color:#985f0b;font:650 8px/1.2 var(--mono)
}
[data-completion-if-grammar="true"] [data-completion-if-exit="label"]{
  display:none !important
}

/* (2026-09-02: the legacy Conditional block lesson shares every rule below —
   same room, same gate, same editable condition — by user request.)
/* Scope reuses Branch Step 1's one condition device, but a one-arm IF is not
   a two-way fork. The authored IF operation becomes the single entry gate on
   its own block-scope room; its authored body stays inside that room. If the
   gate does not pass, the browser skips the whole room—there are deliberately
   no TRUE/FALSE lanes or duplicate branch cards in this lesson. */
:is(#semantic-stage[data-concept-id="scope"][data-case-id="canonical:scope"],#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"])
  [data-curriculum-scope-if-step="true"]{
  position:relative;width:min(100%,280px);min-height:124px;margin-top:8px;
  padding:67px 10px 9px;border-color:rgba(122,74,8,.26);border-style:dashed;
  background:rgba(255,252,245,.9);overflow:visible
}
:is(#semantic-stage[data-concept-id="scope"][data-case-id="canonical:scope"],#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"])
  [data-curriculum-scope-if-step="true"]>.vinci-program-scope-label{
  left:11px;top:10px;color:#827769;font:750 6px/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase
}
:is(#semantic-stage[data-concept-id="scope"][data-case-id="canonical:scope"],#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"])
  [data-curriculum-scope-if-entry-port="true"]{
  position:absolute;left:50%;top:-6px;z-index:10;display:block;box-sizing:border-box;
  width:10px;height:10px;transform:translateX(-50%);border:1.5px solid rgba(122,74,8,.38);
  border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.72)
}
:is(#semantic-stage[data-concept-id="scope"][data-case-id="canonical:scope"],#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"])
  [data-curriculum-scope-if-entry-port="true"]::after{
  content:"";position:absolute;left:50%;top:8px;height:12px;border-left:1px solid rgba(122,74,8,.3);
  transform:translateX(-50%)
}
:is(#semantic-stage[data-concept-id="scope"][data-case-id="canonical:scope"],#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"])
  [data-curriculum-scope-if-gate="true"]{
  position:absolute;left:50%;top:20px;z-index:9;display:block!important;
  width:min(calc(100% - 32px),220px);min-width:0;margin:0!important;padding:0!important;
  transform:translateX(-50%);color:var(--ink);background:transparent
}
:is(#semantic-stage[data-concept-id="scope"][data-case-id="canonical:scope"],#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"])
  [data-curriculum-scope-if-diagram="entry-gate"]{
  position:relative;display:block!important;width:100%!important;min-height:38px;
  margin:0!important;padding:0!important;overflow:visible!important
}
:is(#semantic-stage[data-concept-id="scope"][data-case-id="canonical:scope"],#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"])
  [data-curriculum-scope-if-diagram="entry-gate"]>:is(.vinci-function-if-step,.vinci-function-condition-gate){
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-sizing:border-box;width:100%!important;height:auto!important;min-height:38px;
  margin:0!important;padding:0!important;transform:none!important;border:0!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important
}
:is(#semantic-stage[data-concept-id="scope"][data-case-id="canonical:scope"],#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"])
  [data-curriculum-scope-if-diagram="entry-gate"] .vinci-function-if-evaluation-pill{
  --vinci-data-pill-h:34px;--vinci-data-pill-pad:6px 12px;
  --vinci-data-pill-font-size:10px;--vinci-data-pill-font-family:var(--mono);
  box-sizing:border-box;display:inline-flex!important;align-items:center;justify-content:center;
  width:max-content;min-width:0;height:auto;min-height:var(--vinci-data-pill-h,38px);max-width:100%;margin:0!important;
  padding:var(--vinci-data-pill-pad,8px 14px)!important;opacity:1;transform:none!important;pointer-events:none;
  border:var(--vinci-data-pill-border,2px) solid var(--vinci-data-pill-edge,rgba(238,150,20,.3))!important;
  border-radius:var(--vinci-data-pill-radius,999px)!important;
  background:var(--vinci-data-pill-bg,#fffdfa)!important;box-shadow:var(--vinci-data-pill-shadow,0 6px 15px rgba(122,74,8,.07))!important
}
:is(#semantic-stage[data-concept-id="scope"][data-case-id="canonical:scope"],#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"])
  [data-curriculum-scope-if-diagram="entry-gate"]
  .vinci-function-if-evaluation-pill[data-condition-value-editor="true"]{
  pointer-events:auto;cursor:pointer
}
:is(#semantic-stage[data-concept-id="scope"][data-case-id="canonical:scope"],#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"])
  [data-curriculum-scope-if-step="true"]:has(
    .vmark-ball-live-field-editor[data-condition-expression-editor="true"]){
  min-height:190px;padding-top:133px
}
:is(#semantic-stage[data-concept-id="scope"][data-case-id="canonical:scope"],#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"])
  .vmark-ball-live-field-editor[data-condition-expression-editor="true"]
  .vinci-value-pill-editor{
  width:min(100%,680px);max-width:100%
}
:is(#semantic-stage[data-concept-id="scope"][data-case-id="canonical:scope"],#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"])
  [data-curriculum-scope-if-diagram="entry-gate"]
  .vinci-function-if-evaluation-pill>.vinci-value-pill-name{
  display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:visible;
  color:#55483a;text-overflow:clip;white-space:nowrap
}
:is(#semantic-stage[data-concept-id="scope"][data-case-id="canonical:scope"],#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"])
  [data-curriculum-scope-if-diagram="entry-gate"]
  :is(.vinci-function-if-condition-operand,.vinci-function-if-condition-operator){
  display:inline-block;min-width:0;white-space:nowrap
}
:is(#semantic-stage[data-concept-id="scope"][data-case-id="canonical:scope"],#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"])
  [data-curriculum-scope-if-diagram="entry-gate"]
  .vinci-function-if-evaluation-pill>.vinci-value-pill-value:empty{display:none!important}
:is(#semantic-stage[data-concept-id="scope"][data-case-id="canonical:scope"],#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"])
  [data-curriculum-scope-if-source-cue]{
  display:block;margin-top:3px;color:var(--mute);font:650 6px/1 var(--mono);
  letter-spacing:.05em;text-align:center;text-transform:uppercase
}
@media(max-width:520px){
  :is(#semantic-stage[data-concept-id="scope"][data-case-id="canonical:scope"],#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"])
    .vinci-function-if-evaluation-pill[data-condition-value-editor="true"]{
    --vinci-data-pill-h:44px
  }
}
:is(#semantic-stage[data-concept-id="scope"][data-case-id="canonical:scope"],#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"])
  [data-curriculum-scope-if-step="true"]>.vinci-program-definitions{
  min-height:50px
}

/* L1 Call: keep the exact source-derived player Ball and Function, and add
   only the authored direction between them. */
#semantic-stage[data-concept-id="event-loop"][data-case-id="canonical:event-loop"]
  .vinci-program-top-operations[data-curriculum-event-loop-queues="true"]{
  display:grid;grid-template-columns:minmax(150px,210px) minmax(64px,88px) minmax(150px,210px);
  align-items:center;justify-content:center;gap:12px;width:100%;padding:42px 8px
}
#semantic-stage[data-concept-id="event-loop"][data-case-id="canonical:event-loop"]
  [data-curriculum-event-loop-queue]{
  display:grid;align-content:center;min-height:136px;padding:17px;
  border:2px solid rgba(122,74,8,.24);border-radius:22px;background:rgba(255,253,248,.94);
  box-shadow:0 12px 28px rgba(21,17,13,.055)
}
#semantic-stage[data-concept-id="event-loop"][data-case-id="canonical:event-loop"]
  [data-curriculum-event-loop-queue="microtask"]{
  border-color:rgba(238,150,20,.48);box-shadow:0 12px 28px rgba(238,150,20,.08)
}
#semantic-stage[data-concept-id="event-loop"][data-case-id="canonical:event-loop"]
  [data-curriculum-event-loop-queue] .vinci-authored-operation-header{
  justify-content:center
}
#semantic-stage[data-concept-id="event-loop"][data-case-id="canonical:event-loop"]
  [data-curriculum-event-loop-queue] .vinci-authored-operation-header>b{
  font-size:12px;text-align:center
}
#semantic-stage[data-concept-id="event-loop"][data-case-id="canonical:event-loop"]
  [data-curriculum-event-loop-queue] :is(
    .vinci-authored-operation-header>small,.vinci-expression-arrow,
    .vinci-expression-outcome,.vinci-expression-result,.vinci-operation-result-binding){display:none}
#semantic-stage[data-concept-id="event-loop"][data-case-id="canonical:event-loop"]
  [data-curriculum-event-loop-queue] .vinci-expression-row{
  display:grid;place-items:center;margin-top:13px
}
#semantic-stage[data-concept-id="event-loop"][data-case-id="canonical:event-loop"]
  [data-curriculum-event-loop-queue] .vinci-expression-part{
  padding:7px 10px;border:1px solid rgba(238,150,20,.3);border-radius:999px;
  background:#fff;font-size:8px;font-weight:750;text-align:center
}
#semantic-stage[data-concept-id="event-loop"][data-case-id="canonical:event-loop"]
  [data-curriculum-event-loop-callback="true"]{display:none!important}
.vinci-curriculum-event-loop-tether{
  display:grid;align-items:center;gap:7px;color:var(--gold-deep);text-align:center
}
.vinci-curriculum-event-loop-tether small{
  font:750 8px/1.1 var(--mono);letter-spacing:.06em;text-transform:uppercase
}
.vinci-curriculum-event-loop-tether i{
  position:relative;display:block;height:0;border-top:2px solid rgba(238,150,20,.68)
}
.vinci-curriculum-event-loop-tether i:after{
  position:absolute;right:0;top:-5px;width:7px;height:7px;
  border-top:2px solid rgba(238,150,20,.78);border-right:2px solid rgba(238,150,20,.78);
  content:"";transform:rotate(45deg)
}
.vinci-curriculum-event-loop-tether b{color:var(--ink-mute);font:650 7px/1 var(--mono)}

/* L1 Function is only the source-authored frame. Its empty train() example
   has no incoming route and no outgoing Return, so the decorative stems above
   and below the frame imply connections that do not exist. Keep the real
   boundary nodes, but present entry with the same dormant dotted socket used
   by the Call lesson. This is deliberately scoped to function/canonical:function;
   parameter handoffs and playable Function graphs keep their own geometry. */
#semantic-stage[data-concept-id="function"][data-case-id="canonical:function"]
  .vinci-program-function>.vinci-function-entry::before,
#semantic-stage[data-concept-id="function"][data-case-id="canonical:function"]
  .vinci-program-function>.vinci-function-entry::after,
#semantic-stage[data-concept-id="function"][data-case-id="canonical:function"]
  .vinci-program-function>.vinci-function-exit::after{
  display:none!important;content:none!important
}
#semantic-stage[data-concept-id="function"][data-case-id="canonical:function"]
  .vinci-program-function>.vinci-function-entry>.vinci-function-port-mouth{
  width:30px!important;height:30px!important;border:1px dashed rgba(152,95,11,.46)!important;
  background:rgba(255,255,255,.9)!important;box-shadow:none!important
}

/* L1 Class: keep the two source-derived Class blueprints, but arrange them as
   one readable relationship instead of two full-size circles stacked below
   the fold. The tether is only a label between those exact canonical nodes. */
#semantic-stage[data-concept-id="class"][data-case-id="canonical:class"]
  .vinci-program-definitions[data-curriculum-class-relationship="true"]{
  grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);place-items:center;
  justify-content:center;gap:10px;width:100%;max-width:500px;padding:28px 8px
}
#semantic-stage[data-concept-id="class"][data-case-id="canonical:class"]
  .vinci-program-definitions[data-curriculum-class-relationship="true"]
  >.vinci-static-definition[data-definition-kind="class"]{
  width:100%;min-width:0
}
#semantic-stage[data-concept-id="class"][data-case-id="canonical:class"]
  .vinci-program-definitions[data-curriculum-class-relationship="true"]
  .vinci-class-schema.vinci-class-blueprint-ball[data-state="expanded"]{
  width:190px;min-height:190px;padding:28px 22px
}
.vinci-curriculum-class-tether{
  display:grid;align-items:center;gap:7px;width:100%;color:var(--gold-deep);
  text-align:center
}
.vinci-curriculum-class-tether small{
  font:750 8px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase
}
.vinci-curriculum-class-tether i{
  position:relative;display:block;height:0;border-top:2px dashed rgba(122,74,8,.48)
}
.vinci-curriculum-class-tether i:before{
  position:absolute;left:0;top:-5px;width:7px;height:7px;
  border-left:2px solid rgba(122,74,8,.64);border-bottom:2px solid rgba(122,74,8,.64);
  content:"";transform:rotate(45deg)
}

/* L1 Module: the export/import operations are the canonical source nodes.
   Present those same nodes as two Worlds joined by one live-binding tether;
   generic Unknown result chrome would wrongly suggest a copied runtime value. */
#semantic-stage[data-concept-id="module"][data-case-id="canonical:module"]
  .vinci-program-top-operations[data-curriculum-module-relationship="true"]{
  display:grid;grid-template-columns:minmax(150px,210px) minmax(68px,94px) minmax(150px,210px);
  align-items:center;justify-content:center;gap:12px;width:100%;padding:42px 10px
}
#semantic-stage[data-concept-id="module"][data-case-id="canonical:module"]
  [data-curriculum-module-world]{
  display:grid;align-content:center;min-height:154px;padding:18px;
  border:2px solid rgba(122,74,8,.28);border-radius:24px;background:rgba(255,253,248,.94);
  box-shadow:0 12px 28px rgba(21,17,13,.06)
}
#semantic-stage[data-concept-id="module"][data-case-id="canonical:module"]
  [data-curriculum-module-world] .vinci-authored-operation-header{
  justify-content:center
}
#semantic-stage[data-concept-id="module"][data-case-id="canonical:module"]
  [data-curriculum-module-world] .vinci-authored-operation-header>b{
  font-size:13px;text-align:center
}
#semantic-stage[data-concept-id="module"][data-case-id="canonical:module"]
  [data-curriculum-module-world] .vinci-authored-operation-header>small,
#semantic-stage[data-concept-id="module"][data-case-id="canonical:module"]
  [data-curriculum-module-world] .vinci-expression-arrow,
#semantic-stage[data-concept-id="module"][data-case-id="canonical:module"]
  [data-curriculum-module-world] .vinci-expression-result,
#semantic-stage[data-concept-id="module"][data-case-id="canonical:module"]
  [data-curriculum-module-world] .vinci-expression-outcome,
#semantic-stage[data-concept-id="module"][data-case-id="canonical:module"]
  [data-curriculum-module-world] .vinci-operation-result-binding{
  display:none
}
#semantic-stage[data-concept-id="module"][data-case-id="canonical:module"]
  [data-curriculum-module-world] .vinci-expression-row{
  display:grid;place-items:center;margin-top:14px
}
#semantic-stage[data-concept-id="module"][data-case-id="canonical:module"]
  [data-curriculum-module-world] .vinci-expression-part{
  padding:8px 12px;border:1px solid rgba(238,150,20,.34);border-radius:999px;
  background:#fff;font-weight:750
}
.vinci-curriculum-module-tether{
  display:grid;align-items:center;gap:7px;color:var(--gold-deep);text-align:center
}
.vinci-curriculum-module-tether small{
  font:750 8px/1.1 var(--mono);letter-spacing:.06em;text-transform:uppercase
}
.vinci-curriculum-module-tether i{
  position:relative;display:block;height:0;border-top:2px solid rgba(238,150,20,.64)
}
.vinci-curriculum-module-tether i:after{
  position:absolute;right:0;top:-5px;width:7px;height:7px;
  border-top:2px solid rgba(238,150,20,.74);border-right:2px solid rgba(238,150,20,.74);
  content:"";transform:rotate(45deg)
}
.vinci-curriculum-module-tether b{
  color:var(--ink-mute);font:650 7px/1 var(--mono)
}

@media(max-width:650px){
  #semantic-stage[data-concept-id="event-loop"][data-case-id="canonical:event-loop"]
    .vinci-program-top-operations[data-curriculum-event-loop-queues="true"]{
    grid-template-columns:minmax(104px,1fr) minmax(46px,58px) minmax(104px,1fr);
    gap:5px;padding:20px 1px
  }
  #semantic-stage[data-concept-id="event-loop"][data-case-id="canonical:event-loop"]
    [data-curriculum-event-loop-queue]{min-height:116px;padding:9px 6px}
  #semantic-stage[data-concept-id="event-loop"][data-case-id="canonical:event-loop"]
    [data-curriculum-event-loop-queue] .vinci-authored-operation-header>b{font-size:9px}
  .vinci-curriculum-event-loop-tether small{font-size:6.5px}

  #semantic-stage[data-concept-id="class"][data-case-id="canonical:class"]
    .vinci-program-definitions[data-curriculum-class-relationship="true"]{
    grid-template-columns:116px minmax(42px,54px) 116px;gap:5px;padding:18px 2px
  }
  #semantic-stage[data-concept-id="class"][data-case-id="canonical:class"]
    .vinci-program-definitions[data-curriculum-class-relationship="true"]
    >.vinci-static-definition[data-definition-kind="class"],
  #semantic-stage[data-concept-id="class"][data-case-id="canonical:class"]
    .vinci-program-definitions[data-curriculum-class-relationship="true"]
    .vinci-class-schema.vinci-class-blueprint-ball{
    width:116px
  }
  #semantic-stage[data-concept-id="class"][data-case-id="canonical:class"]
    .vinci-program-definitions[data-curriculum-class-relationship="true"]
    .vinci-class-schema.vinci-class-blueprint-ball{
    min-height:116px;padding:17px 10px
  }
  #semantic-stage[data-concept-id="module"][data-case-id="canonical:module"]
    .vinci-program-top-operations[data-curriculum-module-relationship="true"]{
    grid-template-columns:minmax(112px,1fr) minmax(50px,62px) minmax(112px,1fr);
    gap:6px;padding:22px 2px
  }
  #semantic-stage[data-concept-id="module"][data-case-id="canonical:module"]
    [data-curriculum-module-world]{
    min-height:126px;padding:10px 7px
  }
  #semantic-stage[data-concept-id="module"][data-case-id="canonical:module"]
    [data-curriculum-module-world] .vinci-authored-operation-header>b{
    font-size:10px
  }
}

/* Every L1 and L2 retains its source-derived program scope. Make its boundary visible so its Balls have an honest home above
   the Function covers;
   only the inferred outer Frontend chrome remains flat. */
#semantic-stage>.semantic-visual-program[data-context-presentation="flat-inferred"]:is([data-atlas-l2-program-canvas="shared"],[data-program-scope-presentation="declared"])
  >.vinci-program-place[data-context-evidence="inferred-no-boundary"]
  >.vinci-program-scope[data-scope-kind="program"]{
  position:relative;box-sizing:border-box;width:100%;min-height:94px;margin:12px auto 24px;
  padding:31px 12px 9px;border:1px solid rgba(21,17,13,.12);border-radius:14px;
  background:rgba(255,255,255,.77);box-shadow:0 12px 30px rgba(21,17,13,.045)
}
#semantic-stage>.semantic-visual-program[data-context-presentation="flat-inferred"]:is([data-atlas-l2-program-canvas="shared"],[data-program-scope-presentation="declared"])
  >.vinci-program-place[data-context-evidence="inferred-no-boundary"]
  >.vinci-program-scope[data-scope-kind="program"]
  >.vinci-program-scope-label{
  position:absolute!important;left:14px!important;top:13px!important;width:auto!important;height:auto!important;
  margin:0!important;padding:0!important;overflow:visible!important;clip:auto!important;clip-path:none!important;
  color:var(--ink-soft);font:650 9px/1 var(--mono);letter-spacing:.06em;white-space:normal!important;border:0!important
}

/* The outcome badge is a quiet marker, not a banner. */
.semantic-outcome-badge{font-size:8px;letter-spacing:.1em;opacity:.9}

/* Notes sit as calmly as everything else. */
.vnotes{border-color:rgba(21,17,13,.07);background:rgba(255,255,255,.55)}

/* ── Note, attached to the Vinci it is about ─────────────────────────────────
   Feedback belongs beside the picture that provoked it, not in a panel below
   the fold. This sits at the foot of the canvas pane: one line closed, opens
   as you type, and saves to the repo. */
.vnotes{display:grid;gap:7px;padding:11px 16px 13px;border-top:1px solid rgba(21,17,13,.07);background:rgba(255,253,250,.72)}
.vnotes-head{display:flex;align-items:center;gap:9px}
.vnotes-head b{color:var(--ink);font:650 8px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase}
.vnotes-head #vnotes-construct{color:var(--orange-deep,#7a4a08)}
.vnotes-status{padding:2px 8px;border-radius:999px;font:700 7px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.vnotes-status[data-status="open"]{color:#7a4a08;background:#fdf1dd;border:1px solid rgba(122,74,8,.26)}
.vnotes-status[data-status="wip"]{color:#8a3d08;background:#fde9dd;border:1px solid rgba(138,61,8,.26)}
.vnotes-status[data-status="done"]{color:#7a4a08;background:#f3f1ed;border:1px solid rgba(152,95,11,.26)}
.vnotes-saved{margin-left:auto;color:#7a4a08;font:650 8px/1 var(--mono)}
.vnotes textarea{width:100%;box-sizing:border-box;min-height:38px;padding:8px 11px;border:1px solid rgba(21,17,13,.14);border-radius:10px;background:#fff;color:var(--ink);font:500 11px/1.55 var(--mono);resize:vertical}
.vnotes textarea::placeholder{color:#b4aa9a}
.vnotes textarea:focus-visible{outline:2px solid var(--orange,#ee9614);outline-offset:1px}
.vnotes-mine{padding:8px 11px;border:1px dashed rgba(21,17,13,.17);border-radius:10px;background:rgba(250,248,245,.92);color:var(--soft);font:500 10px/1.6 var(--mono);white-space:pre-wrap}
.vnotes-mine[hidden]{display:none}

/* ── The intro ───────────────────────────────────────────────────────────────
   One composition, seen before the constructs begin.
   The orb sits BEHIND a frosted panel and bleeds through it — the layering is
   what makes it read as designed, not the orb on its own. Quiet type, a lot of
   air, one warm mass, one dark pill. */
.vintro{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:stretch;gap:0;min-height:min(74vh,660px);
  border:1px solid rgba(21,17,13,.07);border-radius:30px;
  background:linear-gradient(118deg,#fffefc 0%,#fefaf4 52%,#fdf6ea 100%);
  box-shadow:0 26px 70px rgba(70,50,20,.06)}
.vintro[hidden]{display:none}

/* The warm mass, cropped by the card and half-covered by the panel. */
.vintro-orb{
  position:absolute;z-index:0;top:50%;left:34%;
  /* Modest, like the reference: a mass that peeks from behind the panel, not
     one that swallows the column and leaves the text unreadable on orange. */
  width:min(330px,29%);aspect-ratio:1;border-radius:50%;
  transform:translateY(-50%);
  /* Same architectural-orb treatment as vinci-interface.css's .hero::after —
     stated in the canon ramp (VINCI_TOKENS goldHi->gold2->gold->a16207), not
     the retired Atelier amber/rust stops (#f9c877/#f4a832/#d55402), so the
     two "orb behind glass" compositions in this atlas read as the same
     material instead of two different oranges. */
  background:radial-gradient(circle at 36% 32%,var(--orange-pale,#ffd890) 0%,var(--orange-soft,#f4b04a) 26%,var(--orange,#ee9614) 64%,#a16207 100%);
  filter:saturate(1.02)}

/* The frosted panel the orb bleeds through. */
.vintro-panel{
  position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;
  margin:14px 0 14px 14px;padding:clamp(30px,4vw,54px);
  border-radius:22px;
  background:rgba(255,253,250,.62);
  backdrop-filter:blur(26px) saturate(1.25);-webkit-backdrop-filter:blur(26px) saturate(1.25);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 44px rgba(70,50,20,.07)}
.vintro-kicker{
  margin:0 0 auto;color:var(--orange-deep,#7a4a08);
  font:650 8px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.vintro-title{
  margin:26px 0 0;font:540 clamp(40px,4.6vw,68px)/.94 var(--serif);letter-spacing:-.055em}
.vintro-title span{color:#b9ad9c}
.vintro-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:26px}
.vintro-meta b{
  padding:6px 11px;border:1px solid rgba(21,17,13,.09);border-radius:999px;
  background:rgba(255,255,255,.7);color:var(--soft);
  font:600 8px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}

/* The reading side stays plain — the panel carries the weight. */
.vintro-side{
  position:relative;z-index:1;display:flex;flex-direction:column;
  justify-content:flex-end;gap:22px;padding:clamp(30px,4vw,54px)}
/* Reading ground: the text is never asked to compete with the orb behind it. */
.vintro-side::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(255,253,250,0) 0%,rgba(255,253,250,.86) 18%,#fffdfa 40%)}
.vintro-lede{max-width:38ch;margin:0;color:var(--soft);font:400 14px/1.7 var(--sans)}
.vintro-laws{display:grid;gap:9px;margin:0;padding:0;list-style:none;max-width:44ch}
.vintro-laws li{color:var(--mute);font:400 11px/1.6 var(--sans)}
.vintro-laws b{color:var(--ink);font-weight:600}
.vintro-cta{
  align-self:flex-start;display:inline-flex;align-items:center;gap:14px;
  margin-top:4px;padding:13px 14px 13px 22px;border:0;border-radius:999px;
  color:#fdf7ef;background:#15110d;cursor:pointer;
  font:600 12px/1 var(--sans);box-shadow:0 14px 32px rgba(21,17,13,.22)}
.vintro-cta span{
  display:grid;place-items:center;width:27px;height:27px;border-radius:50%;
  color:#15110d;background:var(--gold,#ee9614);font-size:13px}
.vintro-cta:focus-visible{outline:2px solid var(--orange,#ee9614);outline-offset:3px}

/* Start here, above the constructs. */
.semantic-start-tab{
  width:100%;min-height:56px;display:grid;grid-template-columns:30px minmax(0,1fr);gap:6px;
  align-items:center;margin:0 0 9px;border:0;border-radius:17px;padding:10px 12px;
  text-align:left;color:var(--ink);background:transparent;cursor:pointer}
.semantic-start-tab>small{color:#ada38f;font:550 9px var(--mono)}
.semantic-start-tab>span{display:grid;gap:5px}
.semantic-start-tab strong{font:560 14px/1 var(--sans)}
.semantic-start-tab code{color:var(--mute);font:500 8px/1 var(--mono)}
.semantic-start-tab:hover{background:rgba(255,255,255,.7)}
.semantic-start-tab[aria-pressed="true"]{color:#faf7ef;background:var(--char,#15110d);box-shadow:0 11px 25px rgba(28,22,14,.18)}
.semantic-start-tab[aria-pressed="true"] small,.semantic-start-tab[aria-pressed="true"] code{color:rgba(255,247,235,.52)}

@media(max-width:1050px){
  .vintro{grid-template-columns:1fr;min-height:0}
  .vintro-orb{left:50%;top:34%;width:min(420px,80%);transform:translate(-50%,-50%)}
  .vintro-panel{margin:14px}
  .vintro-side{padding-top:8px}
}

/* A note is a thread: each entry is kept, and adding one never overwrites
   what was said before. */
.vnotes-thread{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.vnotes-thread[hidden]{display:none}
.vnotes-entry{display:grid;gap:3px;padding:8px 11px;border-radius:10px;
  border:1px solid rgba(21,17,13,.08);background:rgba(255,255,255,.86)}
.vnotes-entry[data-who="me"]{border-style:dashed;background:rgba(250,248,245,.9)}
.vnotes-entry b{color:var(--orange-deep,#7a4a08);font:650 7px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase}
.vnotes-entry[data-who="me"] b{color:var(--mute)}
.vnotes-entry p{margin:0;color:var(--soft);font:500 10px/1.6 var(--mono);white-space:pre-wrap}
.vnotes-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.vnotes-add{align-self:stretch;padding:0 16px;border:0;border-radius:10px;cursor:pointer;
  color:#fdf7ef;background:#15110d;font:650 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.vnotes-add:hover{background:#2a2118}
.vnotes-add:focus-visible{outline:2px solid var(--orange,#ee9614);outline-offset:2px}

/* ───────────────────────────────────────────────────────────────────────────
   THE CALMER PAGE — three fixes, each from a note.

   1 · READABLE HONESTY. The marks that carry the truth — the "?" that means
       Unknown, "unlit", "not executed", the beat counter — were painted in
       --mute at 3.07:1 on paper. A claim nobody can read is not a claim. The
       token moves to 5.08:1 on paper / 4.50:1 on cream: readable, still quiet,
       still clearly the secondary voice under --ink. vinci-interface.css
       defines the same token later in the cascade, so this redefinition is
       written at :root:root to win on specificity rather than on order.
   2 · THE NAME IS SAID ONCE. The construct title is the atlas heading; the
       meaning panel no longer repeats it, so the panel's first line is now the
       kicker and the taxonomy note can stop hanging itself off a heading that
       is not there any more.
   3 · A QUIETER PORT. "the entry exit nodes shouldnt be so thick" — the mouth
       keeps the Mapper's 10px body and 2px white ring; what goes is the hard
       dark collar around it and the heavy stems reaching for it.
   ─────────────────────────────────────────────────────────────────────────── */

:root:root{--mute:#756c61}

/* 2 · the meaning panel, without the second copy of the title */
.semantic-meaning>.semantic-meaning-kicker{display:block;margin:0 0 26px;line-height:1.5}
.semantic-meaning>.semantic-taxonomy-note{margin-top:0}

/* 3 · entry and exit, drawn thin */
.semantic-visual-program .vinci-function-port-mouth{
  width:9px;height:9px;border:2px solid #fff;background:var(--gold,#ee9614);
  box-shadow:0 0 0 1px rgba(122,74,8,.35)}
.semantic-visual-program .vinci-function-port-mouth[data-state="active"]{
  box-shadow:0 0 0 1px rgba(122,74,8,.45),0 0 8px rgba(238,150,20,.5)}
.semantic-visual-program .vinci-function-entry::before,
.semantic-visual-program .vinci-function-exit::after{height:14px;opacity:.55}

/* 1 · the honesty marks, at a contrast a person can actually read */
.semantic-visual-program .vinci-expression-result,
.semantic-visual-program .vinci-expression-arrow,
.semantic-visual-program .vinci-program-path-state,
.semantic-visual-program .vinci-semantic-fragment-header small{color:#756c61}
.semantic-visual-program .vinci-property-operation-action{color:#4f5d75}
.semantic-visual-program .vinci-program-operation.vinci-property-operation[data-owner-routed="true"][data-semantic-focus]{
  padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none
}
.semantic-visual-program .vinci-program-operation.vinci-property-operation[data-owner-routed="true"][data-semantic-focus] .vinci-property-operation-action{
  color:var(--orange);box-shadow:0 0 0 3px rgba(238, 150, 20,.16)
}

/* Computed keys are the Atlas's one source-editing exception. The edit is a
   disposable teaching gesture, so its scope and reset law sit beside the
   canvas instead of being hidden in a tooltip or a generic Studio link. */
.semantic-example-authoring{position:relative;z-index:3;display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px 13px;
  margin:14px 16px 0;padding:10px 12px 10px 14px;border:1px solid rgba(238, 150, 20,.28);
  border-radius:14px;background:#fff9ed;box-shadow:0 6px 18px rgba(50,35,15,.05)}
.semantic-example-authoring>span{display:grid;gap:2px;min-width:0}
.semantic-example-authoring>span>b{color:#8b460e;font:750 8px/1.3 var(--mono);
  letter-spacing:.1em;text-transform:uppercase}
.semantic-example-authoring>span>small{color:var(--soft);font:520 8px/1.45 var(--mono)}
.semantic-example-authoring output{color:var(--mute);font:650 7px/1.35 var(--mono);
  letter-spacing:.06em;text-align:right;text-transform:uppercase}
.semantic-example-authoring button{min-height:30px;padding:0 11px;border:1px solid rgba(21,17,13,.18);
  border-radius:999px;color:var(--char);background:#fff;cursor:pointer;
  font:700 7px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.semantic-example-authoring button:disabled{cursor:default;opacity:.38}
.semantic-example-authoring button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.semantic-example-authoring[data-state="edited"]{border-color:rgba(152,95,11,.3);background:#fbfaf8}
.semantic-example-authoring[data-state="error"]{border-color:rgba(168,68,47,.34);background:#fff7f4}
.semantic-example-authoring[data-state="error"] output{color:var(--red)}
@media (max-width:760px){
  .semantic-example-authoring{grid-template-columns:1fr auto}
  .semantic-example-authoring output{grid-column:1/-1;grid-row:2;text-align:left}
}

/* One provenance sentence is enough. The Play/Structure switch carries the
   visible claim; this retained hook exists only for legacy probes while the
   scene's own `.sol-scene-provenance` serves assistive technology. */
.semantic-rehearsal-note{position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#semantic-stage[data-choreography]>.sol-scene-host{min-height:0;padding-bottom:6px}
.semantic-visual-program[hidden],
#semantic-stage>.sol-scene-host[hidden],
.semantic-rehearsal-note[hidden]{display:none!important}

/* One selected source gets one visible explanation. Play is the motion-first
   account requested in the notes; Structure swaps in the complete canonical
   VinciProgram without stacking it underneath the rehearsal. */
.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)}
.semantic-primary-view-switch button{min-height:30px;border:0;border-radius:999px;
  padding:0 13px;color:var(--soft);background:transparent;cursor:pointer;
  font:700 8px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.semantic-primary-view-switch button[aria-pressed="true"]{color:#fffaf2;background:var(--char,#15110d);
  box-shadow:0 4px 11px rgba(21,17,13,.18)}
.semantic-primary-view-switch button:focus-visible{outline:2px solid var(--orange,#ee9614);outline-offset:2px}
.semantic-primary-view-switch>span{justify-self:end;padding:0 11px;color:var(--mute);
  font:550 7px/1.35 var(--mono);letter-spacing:.04em;text-align:right}
.semantic-canonical-loop-controls{position:relative;z-index:4;display:grid;
  grid-template-columns:auto auto auto auto minmax(150px,1fr);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)}
.semantic-canonical-loop-controls[hidden]{display:none!important}
.semantic-canonical-loop-controls button{min-height:29px;padding:0 11px;border:1px solid rgba(122,74,8,.18);
  border-radius:999px;color:var(--char);background:#fff;cursor:pointer;
  font:700 7px/1 var(--mono);letter-spacing:.055em;text-transform:uppercase}
.semantic-canonical-loop-controls button:first-child{color:#fffaf2;background:var(--char)}
.semantic-canonical-loop-controls button:disabled{cursor:wait;opacity:.5}
.semantic-canonical-loop-controls button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.semantic-canonical-loop-controls output{justify-self:end;color:var(--mute);
  font:550 7px/1.4 var(--mono);letter-spacing:.025em;text-align:right}
.semantic-function-transport{
  grid-template-columns:auto auto auto auto minmax(72px,1fr) auto
}
.semantic-function-transport input[type="range"]{
  width:100%;min-width:90px;accent-color:var(--orange);cursor:pointer
}
.semantic-function-transport input[type="range"]:disabled{cursor:wait;opacity:.5}
.semantic-function-transport [data-canonical-function-counter]{
  min-width:38px;color:var(--gold-deep);font-weight:750;text-align:center
}
.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
}
#semantic-stage[data-canonical-loop="true"] .semantic-visual-program[data-canonical-loop-play="false"]
  :is(.vinci-loop-rail-border,.vinci-loop-rail-current){display:none}
#semantic-stage[data-canonical-loop="true"] .semantic-visual-program[data-canonical-loop-play="true"]
  .vinci-program-block-scopes:not([data-atlas-loop-binding-host="true"]){display:none!important}
/* Branch Play projects the exact Branch and selected property-write nodes as
   typed Steps. The otherwise empty block-scope card remains available in
   Structure, but must not sit between the one carrier Ball and the IF input
   Port or push the decisive IF Step below a narrow first fold. */
#semantic-stage[data-canonical-branch="true"] .semantic-visual-program[data-canonical-branch-play="true"]
  .vinci-program-block-scopes{display:none!important}
@media (max-width:650px){
  .semantic-primary-view-switch{grid-template-columns:auto auto}
  .semantic-primary-view-switch>span{grid-column:1/-1;justify-self:start;padding:3px 9px 5px;text-align:left}
  .semantic-canonical-loop-controls{grid-template-columns:repeat(4,auto);margin-inline:10px}
  .semantic-canonical-loop-controls output{grid-column:1/-1;justify-self:start;padding:2px 5px;text-align:left}
  .semantic-function-transport{grid-template-columns:repeat(4,auto)}
  .semantic-function-transport input[type="range"]{grid-column:1/4}
  .semantic-function-transport [data-canonical-function-counter]{grid-column:4;justify-self:end}
  .semantic-function-transport [data-canonical-loop-status]{grid-column:1/-1}
}

/* Studio-like source tracking, applied to the exact source bytes already on
   the left. The static Atlas selection recedes while a rehearsal is active;
   one warm rail and one full-line wash identify the current authored line. */
#semantic-source .semantic-source-line{
  transition:color .2s ease,background-color .24s ease,border-color .24s ease,box-shadow .24s ease
}
#semantic-source[data-playback="true"] .semantic-source-line[data-focus="true"]{
  border-left-color:transparent;color:#b9ac99;background:transparent;box-shadow:none
}
#semantic-source[data-playback="true"] .semantic-source-line[data-play-current="true"]{
  border-left:3px solid #f2a11d;color:#fff9ed;
  background:linear-gradient(90deg,rgba(238,150,20,.3),rgba(238,150,20,.13) 72%,rgba(238,150,20,.03));
  box-shadow:inset 0 1px rgba(255,212,132,.08),0 5px 18px rgba(0,0,0,.12)
}
#semantic-source[data-playback="true"] .semantic-source-line[data-play-current="true"] .semantic-line-number{
  color:#ffc45c
}
@media (prefers-reduced-motion:reduce){
  #semantic-source .semantic-source-line{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

.semantic-meaning>.semantic-meaning-kicker{color:#b84604}

/* "?" is the whole of what Vinci says about an unproven value, and the rail
   index is how a reader tells member 3 from member 4. Both were painted at
   3.07:1 in the marks' ink-3. The mark keeps its quiet role; it stops being
   invisible. */
.semantic-visual-program .vmark-pill[data-unknown="true"] .v,
.semantic-visual-program .vinci-rail-member[data-member-mark]>.vinci-rail-member-index,
.semantic-visual-program .vinci-rail-member-index{color:#756c61}

/* Source focus highlights the shared value-operation CARD; it must not turn
   that rectangular device into the legacy generic-operation capsule. The old
   999px radius plus scale also made adjacent JSON calls touch and read as one
   blob. Keep the focus colour, but preserve the compact shared geometry. */
.semantic-visual-program .vinci-program-operation.vinci-authored-operation.vinci-value-operation[data-semantic-focus]{
  padding:7px 8px;border-radius:11px;transform:none;
  box-shadow:0 0 0 3px rgba(238, 150, 20,.1),0 8px 20px rgba(100,55,8,.1)
}
/* A formula lesson already has its one field-shaped Binding pill. The generic
   selected-operation halo used to wrap that pill in a second orange card,
   making one value look like two nested devices. Keep focus on the source
   line; the renderer's shared data-pill is the only visible formula mark. */
.semantic-visual-program .vinci-program-operation.vinci-authored-operation.vinci-formula-binding-operation[data-semantic-focus]{
  display:flex!important;gap:0!important;width:auto!important;padding:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;transform:none!important
}
.semantic-visual-program .vinci-program-operation.vinci-database-operation[data-semantic-focus]{
  padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none!important
}

/* ── Product-first Atlas chrome ─────────────────────────────────────────────
   The source and the Vinci picture are the public explanation. Translation
   metadata and the feedback ledger remain fully available, but neither is a
   third primary column and a completed review transcript no longer makes a
   one-line source sample into a page-high black wall. */
.semantic-dissection{
  grid-template-columns:minmax(320px,.8fr) 30px minmax(420px,1.2fr);
  align-items:stretch
}
.semantic-dissection[data-linked="false"]{
  grid-template-columns:minmax(320px,.8fr) minmax(420px,1.2fr);
  column-gap:16px
}
.semantic-source-pane,.semantic-canvas-pane{align-self:stretch}
#semantic-source{
  min-height:180px;
  max-height:min(54vh,520px)
}
.semantic-main{scroll-margin-top:82px}

/* Mapper-like translation anatomy on desktop: one readable source surface and
   one equally intentional Vinci surface. The hidden editor must never reserve
   a second, ghost code area; at rest the real source fills the same vertical
   frame as the picture. Source bytes are unchanged — only their line box may
   wrap at a visible whitespace boundary instead of forcing horizontal scroll. */
@media (min-width:1051px){
  .semantic-source-pane{
    display:grid;grid-template-rows:54px minmax(0,1fr)
  }
  #semantic-source{
    box-sizing:border-box;height:100%;min-height:0;max-height:none;padding:28px 22px;
    white-space:pre-wrap;font-size:13px;line-height:1.75
  }
  .semantic-source-line{
    grid-template-columns:30px minmax(0,1fr)
  }
  .semantic-source-line>code{
    min-width:0;white-space:pre-wrap
  }

  /* Object is a deliberately simple first lesson. Keep its canonical 370px
     expanded Ball untouched, but give it a controlled Mapper-sized theatre
     and centre either its collapsed or expanded state within that frame. */
  #semantic-stage[data-concept-id="object"][data-case-id="canonical:object"],
  #semantic-stage[data-concept-id="object"][data-case-id="canonical:object"]>.semantic-visual-program{
    min-height:430px
  }
  #semantic-stage[data-concept-id="object"][data-case-id="canonical:object"]>.semantic-visual-program{
    box-sizing:border-box;display:flex;align-items:center;justify-content:center
  }
  #semantic-stage[data-concept-id="object"][data-case-id="canonical:object"]>.semantic-visual-program>.vinci-program-place{
    align-self:center
  }
}

/* Phones get one compact, truthful description of the current route. The
   full catalogue remains the same searchable navigator when this disclosure
   is opened. It is hidden only after the shell module is ready, so a script
   failure leaves the ordinary navigator available rather than a dead button. */
.semantic-mobile-nav{display:none}
.semantic-mobile-nav-toggle{
  width:100%;min-height:62px;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:14px;align-items:center;border:1px solid rgba(21,17,13,.1);border-radius:18px;
  padding:10px 15px;color:var(--ink);text-align:left;background:rgba(255,253,250,.94);
  box-shadow:0 8px 24px rgba(70,50,20,.06);cursor:pointer
}
.semantic-mobile-nav-copy{min-width:0;display:grid;gap:6px}
.semantic-mobile-nav-copy>small{
  color:var(--orange-deep);font:650 7px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase
}
.semantic-mobile-nav-copy>strong{
  overflow:hidden;font:600 14px/1.2 var(--sans);text-overflow:ellipsis;white-space:nowrap
}
.semantic-mobile-nav-chevron{
  color:var(--mute);font:700 17px/1 var(--mono);transition:transform .18s ease
}
.semantic-mobile-nav-toggle[aria-expanded="true"] .semantic-mobile-nav-chevron{
  transform:rotate(180deg)
}
.semantic-mobile-nav-toggle:focus-visible{
  outline:2px solid var(--orange,#ee9614);outline-offset:2px
}

/* Feedback is contextual review evidence. Native details keeps the full
   thread and composer keyboard-accessible while the summary stays compact. */
details.vnotes{
  position:static;display:block;width:100%;padding:0;overflow:hidden;
  border:0;border-top:1px solid rgba(21,17,13,.08);border-radius:0;
  background:rgba(255,253,250,.72);box-shadow:none
}
.vnotes-head{min-height:44px;display:flex;align-items:center;gap:9px;padding:12px 16px 8px;list-style:none;cursor:default;pointer-events:none}
.vnotes-head::-webkit-details-marker{display:none}
.vnotes-head::marker{content:""}
.vnotes-head:focus-visible{outline:2px solid var(--orange,#ee9614);outline-offset:-3px}
.vnotes-count{color:var(--mute);font:600 7px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.vnotes-saved{margin-left:0}
.vnotes-body{display:grid;gap:8px;padding:0 16px 16px}
.vnotes:not([open])>.vnotes-body{display:grid}
.vnotes-thread{max-height:280px;overflow:auto}
.vnotes-swipe-hint{display:none}
.vnotes-review-nav{display:grid;grid-template-columns:auto minmax(64px,1fr) auto;gap:8px;align-items:center}
.vnotes-review-nav output{color:var(--mute);font:650 8px/1 var(--mono);text-align:center;letter-spacing:.08em;text-transform:uppercase}
.vnotes-review-move{min-height:38px;padding:0 13px;border:1px solid rgba(21,17,13,.12);border-radius:10px;color:var(--ink);background:#fff;cursor:pointer;font:650 9px/1 var(--mono)}
.vnotes-review-move:disabled{opacity:.35;cursor:default}
.vnotes-compose-actions{display:grid;grid-template-columns:auto auto;gap:7px;align-self:stretch}
.vnotes-add-next{background:var(--orange-deep,#7a4a08)}

/* Keep source bindings in Program Scope; the authored extraction flow stays
   visible in the execution area so object destructuring explains its path. */
#semantic-stage:has(.vinci-destructure-operation[data-pattern-kind="object"])
  .vinci-program-definitions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px}
#semantic-stage:has(.vinci-destructure-operation[data-pattern-kind="object"])
  .vinci-program-definitions>.vinci-ball-seat{order:1}
#semantic-stage:has(.vinci-destructure-operation[data-pattern-kind="object"])
  .vinci-program-definitions>.vinci-primitive-binding-pill[data-translator-rule-id="destructuring-declarator"]{order:2}

/* The meaning facts are still rendered by the same translator and keep the
   same ids/classes for audits. They now live with the evidence they explain. */
.semantic-inspect-meaning{grid-column:1/-1}
.semantic-inspect-meaning>.semantic-meaning{
  display:block;min-height:0;padding:18px;border:1px solid var(--hairline);
  border-radius:16px;background:linear-gradient(155deg,#fffdfa,#f7f1e5)
}
.semantic-inspect-meaning .semantic-meaning-kicker{margin:0 0 14px}
.semantic-inspect-meaning .semantic-taxonomy-note{margin:0 0 14px}
.semantic-inspect-meaning .semantic-truth-note{margin:16px 0 0;padding:0}

@media (min-width:1180px) and (max-width:1350px){
  .semantic-dissection{grid-template-columns:minmax(300px,.8fr) 24px minmax(0,1.2fr)}
  .semantic-dissection[data-linked="false"]{grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);column-gap:12px}
}
@media (min-width:1051px) and (max-width:1179px){
  .semantic-dissection{grid-template-columns:220px 24px minmax(0,1fr)}
  .semantic-dissection[data-linked="false"]{grid-template-columns:220px minmax(0,1fr);column-gap:12px}
}
@media (max-width:1050px){
  html.atlas-shell-ready .semantic-mobile-nav{display:block;margin:0 0 12px}
  /* The opened disclosure is a bounded catalogue, not permanent content
     ahead of the selected lesson. */
  html.atlas-shell-ready .semantic-sidebar{
    max-height:min(68vh,560px);overflow:auto;margin:0 0 14px;padding:18px 12px;
    border:1px solid var(--hairline);border-radius:22px;background:rgba(255,253,250,.94);
    box-shadow:0 18px 44px rgba(70,50,20,.1)
  }
  html.atlas-shell-ready .semantic-sidebar[hidden]{display:none!important}
  .semantic-dissection,.semantic-dissection[data-linked="false"]{grid-template-columns:1fr}
  .semantic-source-pane,.semantic-canvas-pane{width:100%}
  /* The picture must arrive promptly on a stacked, single-column layout — it
     may not be buried behind a source block sized for the old side-by-side
     desktop pane. .semantic-source-pane still carried an unrelated 380px
     min-height from an older breakpoint (below), which forced dead white
     space under a short source and pushed the whole canvas pane — and its
     Ball/frames — past a full viewport before any picture appeared. The
     source box itself already caps its own height and scrolls internally;
     let its wrapper size to that actual content instead of a stale floor. */
  .semantic-source-pane{min-height:0}
  #semantic-source{min-height:120px;max-height:240px}
  /* closure/canonical:closure only (data-relationship-kind is set exactly to
     the route's own sceneKind, so this cannot touch any other relationship
     route). The decorative direction arrow between the source and canvas
     panes is aria-hidden and purely cosmetic on the stacked single-column
     mobile layout; on this route it cost 50px pushing the actual closure
     picture further down a phone screen that was already tight. Hiding it
     changes no content, only reclaims dead vertical space. */
  .semantic-dissection:has(#semantic-stage[data-relationship-kind="closure-relationship"]) .semantic-arrow{
    display:none
  }
  /* Same route-exclusive scope: the Relationship/Structure view switch is
     real, truthful UI (it is how "Source-derived relationship · nothing
     executed" is disclosed) and must stay, but its desktop margin-top was
     sized for a roomier canvas. Tighten it only here. */
  #semantic-stage[data-relationship-kind="closure-relationship"] .semantic-primary-view-switch{
    margin-top:6px
  }
  /* date/canonical:date only (scoped by the route's own concept+case data
     attributes on #semantic-stage, so no sibling operator-family route is
     touched). At a true 480×800 phone viewport this route's decisive
     picture — two stacked host-clock-read cards — sat with its second card
     entirely below the fold on a fresh, unscrolled load: two ~85px cards
     plus authored copy stacked underneath a source panel, a decorative
     arrow, and two pane headers all still sized for the roomier desktop
     canvas. None of that surrounding chrome is unique to this route, but
     this route is the one whose authored picture needs the most of it back
     — a single-device route (json, math, regexp, …) still clears the fold
     with the same shared chrome untouched. Reclaim dead margin/padding
     around real content; nothing here hides or shrinks the two authored
     reads themselves. */
  .semantic-dissection:has(#semantic-stage[data-concept-id="date"][data-case-id="canonical:date"]) .semantic-arrow{
    display:none
  }
  .semantic-dissection:has(#semantic-stage[data-concept-id="date"][data-case-id="canonical:date"]) .semantic-pane>header{
    min-height:30px;padding-top:4px;padding-bottom:4px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="date"][data-case-id="canonical:date"]) .semantic-heading{
    padding-bottom:6px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="date"][data-case-id="canonical:date"]) .semantic-outcome-badge{
    margin-top:4px
  }
  #semantic-stage[data-concept-id="date"][data-case-id="canonical:date"]>.semantic-visual-program{
    padding-top:2px
  }
  #semantic-stage[data-concept-id="date"][data-case-id="canonical:date"] .vinci-program-top-operations{
    gap:6px
  }
  /* event-loop/canonical:event-loop only (scoped by the route's own
     concept+case data attributes, so no sibling motion/choreography route —
     call, loop, async, iterator, etc. — is touched). Verified live: at a
     fresh, unscrolled true 480 CSS-width navigation the decorative source-
     canvas arrow, the roomy canvas-pane header, and the Structure/Play
     switch's desktop margin-top were all still sized for the wide desktop
     layout, adding dead vertical space above the Play canvas itself (whose
     own reserved room is trimmed separately, inside the shadow-rendered
     scene, by the matching [data-route="event-loop/canonical:event-loop"]
     rule in sol-translator-page.mjs's SCENE_CHROME_CSS). None of this hides
     or shrinks the three Places, the two authored jobs, or the Play
     controls — only chrome around them. */
  .semantic-dissection:has(#semantic-stage[data-concept-id="event-loop"][data-case-id="canonical:event-loop"]) .semantic-arrow{
    display:none
  }
  .semantic-dissection:has(#semantic-stage[data-concept-id="event-loop"][data-case-id="canonical:event-loop"]) .semantic-pane>header{
    min-height:30px;padding-top:4px;padding-bottom:4px
  }
  #semantic-stage[data-concept-id="event-loop"][data-case-id="canonical:event-loop"] .semantic-primary-view-switch{
    margin-top:6px
  }
  /* loop/canonical:loop only (scoped by the route's own concept+case data
     attributes on #semantic-stage, so no sibling choreography route — call,
     async, iterator, etc. — is touched, including iterator, which shares the
     same underlying Rail+round-Place motion shape but is a distinct concept
     id). Same reclaim as event-loop directly above: verified live at a
     fresh, unscrolled true 480 CSS-width navigation, the decorative source-
     canvas arrow, the roomy canvas-pane header, and the Structure/Play
     switch's desktop margin-top were all still sized for the wide desktop
     layout, adding dead vertical space above the Play canvas itself (whose
     own reserved room is trimmed separately, inside the shadow-rendered
     scene, by the matching [data-route="loop/canonical:loop"] rule in
     sol-translator-page.mjs's SCENE_CHROME_CSS). None of this hides or
     shrinks the Rail, its three seated Balls, the round Loop Place, or the
     Play controls — only chrome around them. */
  .semantic-dissection:has(#semantic-stage[data-concept-id="loop"][data-case-id="canonical:loop"]) .semantic-arrow{
    display:none
  }
  .semantic-dissection:has(#semantic-stage[data-concept-id="loop"][data-case-id="canonical:loop"]) .semantic-pane>header{
    min-height:30px;padding-top:4px;padding-bottom:4px
  }
  #semantic-stage[data-concept-id="loop"][data-case-id="canonical:loop"] .semantic-primary-view-switch{
    margin-top:6px
  }
  /* mutation/canonical:mutation AND mutation/legacy:assignment-expression/
     numeric-add (scoped by the route's own concept+case data attributes on
     #semantic-stage, so no sibling motion route — call, loop, async, etc. —
     is touched). Same reclaim as event-loop/loop directly above, verified
     live at a fresh, unscrolled true 480 CSS-width navigation: the
     decorative source-canvas arrow, the roomy canvas-pane header, and the
     Structure/Play switch's desktop margin-top were all still sized for the
     wide desktop layout, adding dead vertical space above the messi Ball
     itself (whose own reserved canvas room is trimmed separately, inside
     the shadow-rendered scene, by this route's data-compact-canvas="true"
     opt-in in sol-scene-derive.mjs's deriveMutation() plus the matching
     [data-route="mutation/canonical:mutation"] / [data-route="mutation/
     legacy:assignment-expression/numeric-add"] canonical-scene padding
     trims in sol-translator-page.mjs's SCENE_CHROME_CSS). None of this
     hides or shrinks the Ball, its field, the current-scope room, or the
     Play controls — only chrome around them.
     A 2026-08-13 verification pass found the legacy numeric-add case still
     failing this exact fold-arrival check even after the canonical case
     was fixed: deriveMutation()'s compactCanvas:true opt-in is shared by
     both cases (same Ball/room shape for a direct write and a compound
     += write), but these chrome trims below were scoped to
     case-id="canonical:mutation" only, so the legacy case never got them —
     measured fresh-load ballTop=754.7px at 480x667 (iPhone SE), entirely
     below the fold, and only barely inside a generous 900px window. Adding
     the legacy case-id to each selector here (not inventing a new rule)
     closes that gap the same way the canonical case was already closed. */
  .semantic-dissection:has(#semantic-stage[data-concept-id="mutation"][data-case-id="canonical:mutation"]) .semantic-arrow,
  .semantic-dissection:has(#semantic-stage[data-concept-id="mutation"][data-case-id="legacy:assignment-expression/numeric-add"]) .semantic-arrow{
    display:none
  }
  .semantic-dissection:has(#semantic-stage[data-concept-id="mutation"][data-case-id="canonical:mutation"]) .semantic-pane>header,
  .semantic-dissection:has(#semantic-stage[data-concept-id="mutation"][data-case-id="legacy:assignment-expression/numeric-add"]) .semantic-pane>header{
    min-height:30px;padding-top:4px;padding-bottom:4px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="mutation"][data-case-id="canonical:mutation"]) .semantic-heading,
  .semantic-atlas:has(#semantic-stage[data-concept-id="mutation"][data-case-id="legacy:assignment-expression/numeric-add"]) .semantic-heading{
    padding-bottom:6px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="mutation"][data-case-id="canonical:mutation"]) .semantic-outcome-badge,
  .semantic-atlas:has(#semantic-stage[data-concept-id="mutation"][data-case-id="legacy:assignment-expression/numeric-add"]) .semantic-outcome-badge{
    margin-top:4px
  }
  #semantic-stage[data-concept-id="mutation"][data-case-id="canonical:mutation"] .semantic-primary-view-switch,
  #semantic-stage[data-concept-id="mutation"][data-case-id="legacy:assignment-expression/numeric-add"] .semantic-primary-view-switch{
    margin-top:6px
  }
  /* evalcode/canonical:evalcode only (scoped by the route's own concept+case
     data attributes, so no sibling operator-family or flat-inferred route is
     touched). Verified live: at a true 480×800 phone viewport this route's
     single authored eval(…) boundary card sat with its bottom edge below the
     fold on a fresh, unscrolled load (the desktop-only centering/padding fix
     above deliberately does not apply below 1051px — same reasoning as
     date's comment on why that trim is desktop-only: growing padding on a
     narrow stacked layout would push the card further down, not up). Same
     reclaim as date/event-loop: hide the decorative arrow, tighten the two
     pane headers, the heading, and the outcome-badge margins, and tighten
     the top-operations gap — no authored content resized or removed. */
  .semantic-dissection:has(#semantic-stage[data-concept-id="evalcode"][data-case-id="canonical:evalcode"]) .semantic-arrow{
    display:none
  }
  .semantic-dissection:has(#semantic-stage[data-concept-id="evalcode"][data-case-id="canonical:evalcode"]) .semantic-pane>header{
    min-height:30px;padding-top:4px;padding-bottom:4px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="evalcode"][data-case-id="canonical:evalcode"]) .semantic-heading{
    padding-bottom:4px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="evalcode"][data-case-id="canonical:evalcode"]) .semantic-outcome-badge{
    margin-top:4px
  }
  #semantic-stage[data-concept-id="evalcode"][data-case-id="canonical:evalcode"]>.semantic-visual-program{
    padding-top:0
  }
  #semantic-stage[data-concept-id="evalcode"][data-case-id="canonical:evalcode"] .vinci-program-top-operations{
    gap:2px
  }
  /* object-statics/canonical:object-statics only (scoped by the route's own
     concept+case data attributes on #semantic-stage, so no sibling
     operator-family or collection route is touched). A 2026-08-13
     verification pass found the messi Ball + Object.keys(messi) -> [...]
     card sitting with its bottom edge below the fold on a fresh, unscrolled
     true 480x812 load: the standalone authored Ball drawn above the shared
     ONE OPERATOR DEVICE card (this route's picture is taller than a plain
     json/math/regexp single-device route because it carries that extra Ball)
     pushed the card's bottom past the viewport by ~37px, even though the
     #semantic-source floor itself was already correctly capped by the
     shared a157f11 fix above. Same reclaim as date/event-loop/loop/mutation:
     hide the decorative arrow and tighten the two pane headers, the heading,
     and the outcome-badge margins — nothing here hides or shrinks the
     authored messi Ball or the Object.keys(messi) card itself. */
  .semantic-dissection:has(#semantic-stage[data-concept-id="object-statics"][data-case-id="canonical:object-statics"]) .semantic-arrow{
    display:none
  }
  .semantic-dissection:has(#semantic-stage[data-concept-id="object-statics"][data-case-id="canonical:object-statics"]) .semantic-pane>header{
    min-height:30px;padding-top:4px;padding-bottom:4px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="object-statics"][data-case-id="canonical:object-statics"]) .semantic-heading{
    padding-bottom:6px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="object-statics"][data-case-id="canonical:object-statics"]) .semantic-outcome-badge{
    margin-top:4px
  }
  #semantic-stage[data-concept-id="object-statics"][data-case-id="canonical:object-statics"] .semantic-primary-view-switch{
    margin-top:6px
  }
  /* object/canonical:object only (scoped by the route's own concept+case data
     attributes on #semantic-stage, so no sibling route — including object's
     own legacy/computed-field case — is touched). A 2026-08-13 verification
     pass measured a genuine fold-arrival defect here even though desktop
     1280 and the closest existing gate (object-primitive-feedback-browser-
     check.mjs) both pass: that gate scrolls `.semantic-dissection` into view
     with `scrollIntoView({block:'start'})` before it measures anything, so it
     never notices what a first-time phone reader actually sees on an
     unscrolled load. Measured fresh (direct navigation to
     #object%2Fcanonical%3Aobject, mobile:false, no select()/scrollIntoView):
     at both 390x844 and 480x812 the default-expanded 370px Ball's own two
     data fields (name/goals — the actual decisive content, not just its rim)
     sat partly or wholly below the fold, because the same full-desktop-sized
     chrome already reclaimed for date/event-loop/loop/mutation/evalcode/
     object-statics above was still uncut here: a decorative arrow, two
     roomy pane headers, heading padding, and the outcome-badge margin, all
     stacked above a Ball that is taller than any of those sibling routes'
     pictures (370px, the full Mapper-exact expansion). Same proven reclaim,
     nothing here hides, shrinks, or duplicates the authored messi Ball or
     its two fields — only chrome around them. */
  .semantic-dissection:has(#semantic-stage[data-concept-id="object"][data-case-id="canonical:object"]) .semantic-arrow{
    display:none
  }
  .semantic-dissection:has(#semantic-stage[data-concept-id="object"][data-case-id="canonical:object"]) .semantic-pane>header{
    min-height:30px;padding-top:4px;padding-bottom:4px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="object"][data-case-id="canonical:object"]) .semantic-heading{
    padding-bottom:6px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="object"][data-case-id="canonical:object"]) .semantic-outcome-badge{
    margin-top:4px
  }
  #semantic-stage[data-concept-id="object"][data-case-id="canonical:object"]>.semantic-visual-program{
    padding-top:2px
  }
  /* Same route scope: the shared five-route reclaim above still left the
     Ball's bottom edge sitting exactly on the 812px fold line (measured
     812.8px — 0.8px over), because this route's 370px Ball is taller than
     any of those five sibling pictures. .semantic-atlas's own top padding
     (28px, sized for the roomy desktop card) is the only remaining reclaim
     that touches no pane, header, or authored content — trim it here only. */
  .semantic-atlas:has(#semantic-stage[data-concept-id="object"][data-case-id="canonical:object"]){
    padding-top:14px
  }
  /* params/canonical:params only (scoped by the route's own concept+case data
     attributes on #semantic-stage, so no sibling function/call route is
     touched). A 2026-08-13 verification pass found the exact literal task
     deep link (#params%2Fcanonical%3Aparams) already resolves correctly —
     Chrome/CDP normalizes %2F in a navigated fragment to a literal '/'
     before location.hash sees it, same as operators/math/iterator/mapset/
     module/call-wrapper — but at true 480 (measured fresh at 480x844) the
     decisive picture (the FUNCTION · TRAIN() frame with its player/drills/
     extras seats) never arrived: #semantic-sol-scene started at y≈657px on
     an unscrolled load, past most of an 844px phone viewport, because the
     same full-desktop-sized chrome already reclaimed for date/event-loop/
     loop/mutation/evalcode/object-statics/object above — a decorative arrow,
     two roomy pane headers, heading padding, the outcome-badge margin, and
     the Structure/Play switch's desktop margin-top — was still uncut here.
     Same proven reclaim, nothing here hides, shrinks, or duplicates the
     authored frame or its seats. The scene's own internal canvas floor is
     trimmed separately, inside the shadow-rendered scene, by the matching
     [data-route="params/canonical:params"] rule in sol-translator-page.mjs's
     SCENE_CHROME_CSS. */
  .semantic-dissection:has(#semantic-stage[data-concept-id="params"][data-case-id="canonical:params"]) .semantic-arrow{
    display:none
  }
  .semantic-dissection:has(#semantic-stage[data-concept-id="params"][data-case-id="canonical:params"]) .semantic-pane>header{
    min-height:30px;padding-top:4px;padding-bottom:4px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="params"][data-case-id="canonical:params"]) .semantic-heading{
    padding-bottom:6px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="params"][data-case-id="canonical:params"]) .semantic-outcome-badge{
    margin-top:4px
  }
  #semantic-stage[data-concept-id="params"][data-case-id="canonical:params"] .semantic-primary-view-switch{
    margin-top:6px
  }
  /* resource-management/canonical:resource-management only (scoped by
     data-relationship-kind, which STATIC_RELATIONSHIPS in
     sol-translator-page.mjs sets to 'resource-relationship' for exactly
     this one route — no sibling relationship route, class/closure/module/
     gcdeath/realms/shared-memory, carries that value, so none of them is
     touched, and desktop is untouched since this lives inside a max-width
     media query).

     A 2026-08-13 verification pass found the picture itself genuinely
     strong once visible — the USING SCOPE / DISPOSAL PORT relationship,
     one primary picture, "Source-derived relationship · nothing executed"
     stated once, zero fake motion — but the existing gate never measured
     vertical fold position, only horizontal containment and text truth
     after the scene was already in view. On a fresh, unscrolled true
     480x844 load none of the decisive picture was on screen: only the
     header and a mostly-empty black source-code box (sized for this
     route's 3-line source) were visible, and the round-tripped fix below
     is the same reclaim already proven for the other stacked-layout
     routes above (date/event-loop/loop/mutation/evalcode/object-statics/
     object/params) — hide the decorative source-canvas arrow (here it is
     rotated 90deg by the general stacked-layout rule and, per computed
     style, occupies only its own 50px grid row; its enlarged-looking
     bounding box is a rotation artifact, not real layout space, but that
     50px row is still real dead space above the picture) and tighten the
     two pane headers, the heading, the outcome badge, and the
     Relationship/Structure switch's desktop margin-top. Nothing here
     hides, shrinks, or duplicates the authored USING SCOPE room, the
     DISPOSAL PORT, or the tunnel between them — only chrome around them. */
  .semantic-dissection:has(#semantic-stage[data-relationship-kind="resource-relationship"]) .semantic-arrow{
    display:none
  }
  .semantic-dissection:has(#semantic-stage[data-relationship-kind="resource-relationship"]) .semantic-pane>header{
    min-height:30px;padding-top:4px;padding-bottom:4px
  }
  .semantic-atlas:has(#semantic-stage[data-relationship-kind="resource-relationship"]) .semantic-heading{
    padding-bottom:6px
  }
  .semantic-atlas:has(#semantic-stage[data-relationship-kind="resource-relationship"]) .semantic-outcome-badge{
    margin-top:4px
  }
  #semantic-stage[data-relationship-kind="resource-relationship"] .semantic-primary-view-switch{
    margin-top:6px
  }
  /* string-methods/canonical:string-methods only (scoped by the route's own
     concept+case data attributes on #semantic-stage, so no sibling operator-
     family route — math, json, regexp, date, coercion, etc., all of which
     draw only ONE device and already clear the fold with the shared chrome
     untouched — is touched, and desktop is unaffected since this lives
     inside a max-width media query).

     A verification pass (2026-08-13) found the picture itself genuinely
     strong once visible — playerName/fullName pills, then two labelled
     ONE OPERATOR DEVICE cards (shout: playerName.toUpperCase() -> LEO;
     parts: fullName.split(" ") -> ["Leo","Messi"]), matching every other
     operator-family route's shared device — but on a fresh, unscrolled true
     480 load the second device sat below the fold: this is the one operator
     route whose canonical source authors TWO operations (every sibling in
     OPERATOR_FAMILY authors exactly one), so its picture is taller than the
     single-device chrome budget already reclaimed for date/event-loop/loop/
     mutation/evalcode/object-statics/object/params/resource-management
     above assumed. Re-measured live at 480x844 after this fix: both devices
     land inside the first, unscrolled viewport. Same proven reclaim as the
     routes above — hide the decorative arrow, tighten the two pane headers,
     the heading, the outcome-badge margin, and the Structure/Play switch's
     margin-top, plus (unique to this route, because it alone stacks two
     devices) trim the small gap between the playerName/fullName pill row
     and the first device and between the two devices themselves. Nothing
     here hides, shrinks, or duplicates the authored playerName/fullName
     pills or either operation device — only chrome and inter-device
     spacing. */
  .semantic-dissection:has(#semantic-stage[data-concept-id="string-methods"][data-case-id="canonical:string-methods"]) .semantic-arrow{
    display:none
  }
  .semantic-dissection:has(#semantic-stage[data-concept-id="string-methods"][data-case-id="canonical:string-methods"]) .semantic-pane>header{
    min-height:30px;padding-top:4px;padding-bottom:4px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="string-methods"][data-case-id="canonical:string-methods"]) .semantic-heading{
    padding-bottom:6px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="string-methods"][data-case-id="canonical:string-methods"]) .semantic-outcome-badge{
    margin-top:4px
  }
  #semantic-stage[data-concept-id="string-methods"][data-case-id="canonical:string-methods"] .semantic-primary-view-switch{
    margin-top:6px
  }
  #semantic-stage[data-concept-id="string-methods"][data-case-id="canonical:string-methods"]>.semantic-visual-program{
    padding-top:2px
  }
  #semantic-stage[data-concept-id="string-methods"][data-case-id="canonical:string-methods"] .vinci-program-definitions{
    min-height:0;padding-bottom:0
  }
  #semantic-stage[data-concept-id="string-methods"][data-case-id="canonical:string-methods"] .vinci-program-top-operations{
    gap:5px;margin-top:0
  }
  /* template-literal/canonical:template-literal only (scoped by the route's
     own concept+case data attributes on #semantic-stage, so no sibling
     operator-family route — string-methods, optional-chain, symbol, regexp,
     etc. — is touched). A 2026-08-13 re-verification pass found the shared
     a157f11 #semantic-source cap already applies here (measured live:
     min-height 120px/max-height 240px, not the 380px the report described —
     that number came from a screenshot taken minutes before a157f11 landed),
     but a *different*, still-real defect remained: this route's own heading
     wraps to a two-line title/description (179px vs. math's single-line
     136px) and its picture carries a standalone authored messi Ball above
     the shared ONE OPERATOR DEVICE card — the same "extra Ball" shape that
     needed the object-statics fix above — so the greeting card's bottom
     edge sat 25px past a fresh, unscrolled true 480x852 fold (measured
     877px against an 852px viewport) even though math/regexp, which lack
     that extra Ball, clear the same fold with room to spare. Same proven
     reclaim as date/event-loop/loop/mutation/evalcode/object-statics/object
     above: hide the decorative arrow and tighten the two pane headers, the
     heading, and the outcome-badge margins. Nothing here hides or shrinks
     the authored messi Ball or the greeting result pill itself. */
  .semantic-dissection:has(#semantic-stage[data-concept-id="template-literal"][data-case-id="canonical:template-literal"]) .semantic-arrow{
    display:none
  }
  .semantic-dissection:has(#semantic-stage[data-concept-id="template-literal"][data-case-id="canonical:template-literal"]) .semantic-pane>header{
    min-height:30px;padding-top:4px;padding-bottom:4px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="template-literal"][data-case-id="canonical:template-literal"]) .semantic-heading{
    padding-bottom:6px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="template-literal"][data-case-id="canonical:template-literal"]) .semantic-outcome-badge{
    margin-top:4px
  }
  #semantic-stage[data-concept-id="template-literal"][data-case-id="canonical:template-literal"] .semantic-primary-view-switch{
    margin-top:6px
  }
  /* this/canonical:this only (scoped by the route's own concept+case data
     attributes on #semantic-stage, so no sibling callable/receiver route is
     touched). A 2026-08-13 verification pass reported two defects here.

     (1) ROUTING: re-checked live against the exact literal task URL
     (#this%2Fcanonical%3Athis) with a fresh CDP navigation. Chrome already
     normalizes an over-encoded %2F fragment separator to a literal '/'
     before location.hash ever sees it — the same behaviour already relied on
     for operators/math/iterator/mapset/module/call-wrapper/params/object/
     symbol/switch/shared-memory/scope above — so readRoute() receives a
     literal '/' and resolves to "this" correctly with no source change
     needed. The reported routing failure was not reproducible against the
     current tree; the stale ROUTING-this-literal-task-url-viewport.png in
     artifacts/feedback-verification/2026-08-12-100pct/ predates a157f11.

     (2) MOBILE FOLD: this one is real. Measured fresh at a true, unscrolled
     480x800 load: #semantic-sol-scene (the Caller Scope / Method·this-seat
     picture) started at y=681, and its decisive content (the messi Ball and
     the two Places) did not clear an 800px fold — the same full-desktop
     chrome already reclaimed for date/event-loop/loop/mutation/evalcode/
     object-statics/object/params/resource-management/template-literal above
     (a decorative source-canvas arrow, two roomy pane headers, heading
     padding, the outcome-badge margin, and the Structure/Play switch's
     desktop margin-top) was still uncut here, stacked above a 215px source
     card that itself already sits inside the shared a157f11 #semantic-source
     cap. Same proven reclaim; nothing here hides, shrinks, or duplicates the
     authored messi Ball, the Caller Scope Place, or the Method·this-seat
     Place/Port — only chrome around them. */
  .semantic-dissection:has(#semantic-stage[data-concept-id="this"][data-case-id="canonical:this"]) .semantic-arrow{
    display:none
  }
  .semantic-dissection:has(#semantic-stage[data-concept-id="this"][data-case-id="canonical:this"]) .semantic-pane>header{
    min-height:30px;padding-top:4px;padding-bottom:4px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="this"][data-case-id="canonical:this"]) .semantic-heading{
    padding-bottom:6px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="this"][data-case-id="canonical:this"]) .semantic-outcome-badge{
    margin-top:4px
  }
  #semantic-stage[data-concept-id="this"][data-case-id="canonical:this"] .semantic-primary-view-switch{
    margin-top:6px
  }
  /* branch/canonical:branch only (scoped by the route's own concept+case data
     attributes on #semantic-stage, so no sibling route — including branch's
     own legacy/conditional-block case, and switch/completion which share the
     same round-Place choice grammar — is touched, and desktop is unaffected
     since this lives inside a max-width media query).

     A 2026-08-13 verification pass reported two claims about the exact
     literal task URL '#branch%2Fcanonical%3Abranch'.

     (1) ROUTING: re-checked live with a fresh CDP navigation. Chrome already
     normalizes an over-encoded %2F fragment separator to a literal '/' before
     location.hash is ever read by app code, and readRoute() also carries its
     own a157f11 encodedCut fallback for the case where a client does not
     pre-normalize — so either mechanism alone resolves this route correctly.
     Reproduced live: the URL lands on branch/canonical:branch with no
     fallback to object/canonical:object and no console exception, at both
     1280 and true 480. Not reproducible against the current tree; the
     reported failure predates a157f11 landing. No source change was needed
     for routing.

     (2) MOBILE FOLD: this one was REAL, distinct from the shared a157f11
     #semantic-source cap (which already applies here — measured 120px, not
     the 380px figure the report's stale screenshot showed). Measured fresh
     at a true, unscrolled 480x844 load: the round Branch Place — the whole
     point of this route, the "ball can go in" picture with its condition
     entry port and two true/false exit ports — sat with its own bottom edge
     at y=936.7, 92.7px past the fold, inside an unconditional 270px canvas
     floor sized for taller multi-Place choreographies. The full-desktop
     chrome above the scene (decorative arrow, two roomy pane headers,
     heading padding, the outcome-badge margin, the Structure/Play switch's
     desktop margin-top) was still uncut here, the same gap already fixed for
     date/event-loop/loop/mutation/evalcode/object-statics/object/params/
     resource-management/string-methods/template-literal/this above. Same
     proven reclaim: hide the decorative arrow, tighten the two pane headers,
     the heading, the outcome-badge margin, and the view-switch's margin-top.
     Nothing here hides, shrinks, or duplicates the authored messi Ball, the
     "current scope" room, the round Branch Place, or any of its three ports —
     only chrome around them. Re-measured live after this fix: the round
     Place's bottom edge clears both 844 and 900 with room to spare. */
  .semantic-dissection:has(#semantic-stage[data-concept-id="branch"][data-case-id="canonical:branch"]) .semantic-arrow{
    display:none
  }
  .semantic-dissection:has(#semantic-stage[data-concept-id="branch"][data-case-id="canonical:branch"]) .semantic-pane>header{
    min-height:30px;padding-top:4px;padding-bottom:4px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="branch"][data-case-id="canonical:branch"]) .semantic-heading{
    padding-bottom:6px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="branch"][data-case-id="canonical:branch"]) .semantic-outcome-badge{
    margin-top:4px
  }
  #semantic-stage[data-concept-id="branch"][data-case-id="canonical:branch"] .semantic-primary-view-switch{
    margin-top:6px
  }
  /* branch/legacy:block-place/conditional-block only (scoped by the route's
     own concept+case data attributes on #semantic-stage, so no sibling route
     — including branch's own canonical case and switch, which share the same
     round-Place choice grammar — is touched, and desktop is unaffected since
     this lives inside the same max-width:1050px media query as the canonical
     Branch trim above).

     A 2026-08-13 verification pass reported two claims about this route.

     (1) ROUTING: re-checked live with a fresh CDP navigation to the exact
     over-encoded literal task URL
     (#branch%2Flegacy%3Ablock-place%2Fconditional-block). readRoute()'s own
     a157f11 encodedCut fallback cuts on the FIRST %2f it finds — which is
     exactly the concept/case separator here, since the fallback branch only
     runs when location.hash contains no literal '/' at all, and
     decodeURIComponent is then applied once to the remaining case-id tail,
     correctly turning the case id's own inner %2F (block-place/
     conditional-block) back into a literal slash together with %3A. Verified
     live: the URL resolves to branch/legacy:block-place/conditional-block
     with no fallback to object/canonical:object and no console exception, at
     both 1280 and true 480. Not reproducible against the current tree — same
     conclusion already reached for the sibling branch/canonical:branch case
     right above. No source change was needed for routing.

     (2) MOBILE FOLD: this one was REAL. Measured fresh at a true, unscrolled
     480x844 load (after the shared auto-scroll-to-lesson, scrollY≈74): the
     round Branch Place — the same "ball can go in" picture as the canonical
     case, with its lit condition entry port and two faint true/false exit
     ports — sat with its own bottom edge at y≈940.7, about 96.7px past the
     844px fold, inside the same unconditional 270px canvas floor. The
     full-desktop chrome above the scene (decorative arrow, two roomy pane
     headers, heading padding, the outcome-badge margin, the Structure/Play
     switch's desktop margin-top) was still uncut for this specific case id,
     the exact same gap already fixed one case up for
     branch/canonical:branch. Same proven reclaim, scoped to this case id only
     so the canonical case's own already-fixed trim is untouched and additive
     rather than overridden. Nothing here hides, shrinks, or duplicates the
     Unknown `ready` condition carrier, the "current scope" room, the round
     Branch Place, or any of its three ports — only chrome around them.
     Re-measured live after this fix: the round Place's bottom edge clears
     both 844 and 900 with room to spare. */
  .semantic-dissection:has(#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"]) .semantic-arrow{
    display:none
  }
  .semantic-dissection:has(#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"]) .semantic-pane>header{
    min-height:30px;padding-top:4px;padding-bottom:4px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"]) .semantic-heading{
    padding-bottom:6px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"]) .semantic-outcome-badge{
    margin-top:4px
  }
  #semantic-stage[data-concept-id="branch"][data-case-id="legacy:block-place/conditional-block"] .semantic-primary-view-switch{
    margin-top:6px
  }
  /* function/canonical:function only (scoped by the route's own concept+case
     data attributes on #semantic-stage, so no sibling callable/motion route —
     call, params, arrow-fn, generator, this, etc. — is touched, and desktop
     is unaffected since this lives inside a max-width media query).

     A 2026-08-13 verification pass found the mobile-fold defect real and
     reproducible against the current tree: at a fresh, unscrolled true
     480x844 load the "02 · PLAYABLE VINCI EXPLANATION" pane (the dashed
     player Ball inside the FUNCTION score() frame — the actual Vinci mark)
     never appeared on screen at all; only the header, breadcrumb, title,
     badge, description sentence, source-code panel, and Play controls were
     visible, and the user had to scroll roughly 1000px before any picture
     showed. Measured live: #semantic-source itself is already correctly
     capped by the shared a157f11 rule (120px content, not the 380px the
     report's first read suggested), but the full-desktop chrome stacked
     above the scene — the decorative source-canvas arrow, two roomy pane
     headers, heading padding, the outcome-badge margin, and the
     Structure/Play switch's desktop margin-top — was still uncut here, the
     same gap already fixed for date/event-loop/loop/mutation/evalcode/
     object-statics/object/params/resource-management/string-methods/
     template-literal/this/branch above, stacked on top of the unconditional
     270px .sol-motion-canvas floor (trimmed separately, inside the
     shadow-rendered scene, by rehearseFunction()'s new compactCanvas:true
     opt-in in sol-translator-page.mjs). Same proven reclaim: hide the
     decorative arrow, tighten the two pane headers, the heading, the
     outcome-badge margin, and the view-switch's margin-top. Nothing here
     hides, shrinks, or duplicates the authored dashed player Ball, the
     FUNCTION score() frame, or the Play controls — only chrome around them.
     Re-measured live after this fix: the frame's own bottom edge clears a
     fresh, unscrolled 844px fold. */
  .semantic-dissection:has(#semantic-stage[data-concept-id="function"][data-case-id="canonical:function"]) .semantic-arrow{
    display:none
  }
  .semantic-dissection:has(#semantic-stage[data-concept-id="function"][data-case-id="canonical:function"]) .semantic-pane>header{
    min-height:30px;padding-top:4px;padding-bottom:4px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="function"][data-case-id="canonical:function"]) .semantic-heading{
    padding-bottom:6px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="function"][data-case-id="canonical:function"]) .semantic-outcome-badge{
    margin-top:4px
  }
  #semantic-stage[data-concept-id="function"][data-case-id="canonical:function"] .semantic-primary-view-switch{
    margin-top:6px
  }
  /* sugar/canonical:sugar only (scoped by the route's own concept+case data
     attributes on #semantic-stage, so no sibling route is touched, and
     desktop is unaffected since this lives inside a max-width media query).

     A 2026-08-13 verification pass found the mobile-fold defect real and
     reproducible against the current tree, and the paired routing claim NOT
     reproducible.

     (1) ROUTING: re-checked live with a fresh CDP navigation to the exact
     over-encoded literal task URL (#sugar%2Fcanonical%3Asugar). Chrome
     already normalizes the over-encoded %2F fragment separator to a literal
     '/' before location.hash is ever read by app code — the same behaviour
     already relied on for operators/math/iterator/mapset/module/call-wrapper/
     params/object/symbol/switch/shared-memory/scope/this/branch/typed-array
     above — so readRoute() receives a literal '/' and resolves to "sugar"
     correctly with no source change needed. Measured live: both
     #sugar%2Fcanonical%3Asugar and the app's own routeFor() shape
     (#sugar/canonical%3Asugar) resolve to the identical
     {conceptId:"sugar", caseId:"canonical:sugar", outcome:"translated"}
     state, with no fallback to object/canonical:object and no console
     exception, at true 480. Not reproducible against the current tree.

     (2) MOBILE FOLD: this one was REAL. Measured fresh at a true, unscrolled
     480x844 load: the entire picture — the "source names" room holding the
     authored messi/neymar/mbappé Balls, the "destructure" frame, and the
     "front3" Rail — sat with .sol-motion-canvas itself starting at
     viewport-relative y=829.5 of an 844px window (own bottom at 1099.5),
     inside the same unconditional 270px canvas floor already fixed for
     date/event-loop/loop/mutation/evalcode/object-statics/object/params/
     resource-management/string-methods/template-literal/this/branch/
     function above, this time stacked on a 3-Place dense scene rather than a
     single Place. The full-desktop chrome above the scene (decorative arrow,
     two roomy pane headers, heading padding, the outcome-badge margin, the
     Structure/Play switch's desktop margin-top) was still uncut here. Same
     proven reclaim: hide the decorative arrow, tighten the two pane headers,
     the heading, the outcome-badge margin, and the view-switch's margin-top,
     paired with rehearseSugar()'s new compactCanvas:true opt-in in
     sol-translator-page.mjs (same mechanism this/generator/event-loop/loop/
     function already use). Nothing here hides, shrinks, or duplicates the
     authored messi/neymar/mbappé Balls, the destructuring gesture, or the new
     front3 Rail — only chrome around them. */
  .semantic-dissection:has(#semantic-stage[data-concept-id="sugar"][data-case-id="canonical:sugar"]) .semantic-arrow{
    display:none
  }
  .semantic-dissection:has(#semantic-stage[data-concept-id="sugar"][data-case-id="canonical:sugar"]) .semantic-pane>header{
    min-height:30px;padding-top:4px;padding-bottom:4px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="sugar"][data-case-id="canonical:sugar"]) .semantic-heading{
    padding-bottom:6px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="sugar"][data-case-id="canonical:sugar"]) .semantic-outcome-badge{
    margin-top:4px
  }
  #semantic-stage[data-concept-id="sugar"][data-case-id="canonical:sugar"] .semantic-primary-view-switch{
    margin-top:6px
  }
  /* Sugar's own source is six authored lines (messi/neymar/mbappé plus the
     destructure and spread statements) — genuinely longer than the 1-3 line
     sources the shared a157f11 #semantic-source cap (120-240px) was measured
     against, so even after that shared cap the panel still rendered its full
     ~207px of content without needing its own already-anticipated internal
     scroll (a157f11's own rationale: "the source box itself already caps its
     own height and scrolls internally"). On the stacked single-column mobile
     layout the source pane sits directly ABOVE the canvas pane, so every
     pixel it does not need is a pixel the round-trip to the Balls does not
     have to travel. Capping it tighter here, scoped to this one route only,
     closes the remaining gap the chrome/canvas trims above could not: all
     six lines stay fully reachable by the pane's own existing internal
     scroll (nothing hidden, only reached one small scroll instead of zero),
     while the destructure/spread picture itself now needs no scroll at all. */
  .semantic-dissection:has(#semantic-stage[data-concept-id="sugar"][data-case-id="canonical:sugar"]) #semantic-source{
    max-height:150px
  }
  /* completion/canonical:completion only (scoped by the route's own
     concept+case data attributes on #semantic-stage, so no sibling
     round-Place route — loop, iterator, switch, branch, etc. — is touched,
     and desktop is unaffected since this lives inside a max-width media
     query).

     A 2026-08-13 verification pass found the mobile-fold defect real and
     reproducible against the current tree. The node gate
     (completion-loop-place-check.mjs) already confirms the source is the
     exact squad/for-of/continue/break fixture and the structure is exactly
     one authored Rail (3 source-owned Balls: messi, neymar, alvarez) plus
     one round Loop Place — this is a page-chrome/layout-order defect, not a
     mapper or renderer defect. Measured fresh at a true, unscrolled 480x844
     load: #semantic-stage itself started at y=785.1 and .sol-motion-canvas
     — the Rail of 3 Balls feeding the round Loop Place, the entire point of
     this route — started at y=1020.5, both fully past the 844px fold.

     A first pass hid the decorative arrow, tightened the two pane headers,
     the heading, and the outcome-badge/switch margins, and opted
     deriveCompletion() into the shared data-compact-canvas="true" 178px
     canvas floor (the mechanism this/generator/event-loop/function/sugar
     use for SHORT non-round Places). That reclaimed space but introduced a
     worse defect: measured live, the round Loop Place's own 205px mobile
     min-height (mapper.css) was silently CROPPED by the 178px canvas's
     overflow:hidden into a visibly truncated half-circle. completion shares
     deriveLoopPlaceScene()'s exact Rail+round-Place shape with
     loop/canonical:loop, so it needed loop's own dedicated 230px
     [data-route="completion/canonical:completion"] canvas-floor rule in
     sol-translator-page.mjs's SCENE_CHROME_CSS instead (see that file) —
     sized to loop's proven-safe 205px round-Place need, not the smaller
     generic floor. Even with that correct floor and every chrome trim
     below, the two-line heading/description plus the shared a157f11
     #semantic-source cap (120–240px) still left the canvas starting past
     y=737 on a fresh 844px load, so the round Place's own bottom (205px
     of real content) still landed at y=955 — past the fold. The remaining
     gap is closed the same way sugar/canonical:sugar already closed an
     identical gap: cap #semantic-source tighter for this one route only.
     The source pane sits directly above the canvas pane in the stacked
     mobile layout, so every pixel it does not need is a pixel the Rail and
     round Place do not have to travel; all 8 source lines stay reachable
     by the pane's own existing internal scroll (nothing hidden, only
     reached with one small scroll instead of zero), while the decisive
     picture itself now arrives with no scroll needed. Nothing here hides,
     shrinks, or duplicates the authored messi/neymar/alvarez Balls, the
     Rail, or the round Loop Place and its entry/body/next/after-loop
     ports — only chrome around them. */
  .semantic-dissection:has(#semantic-stage[data-concept-id="completion"][data-case-id="canonical:completion"]) .semantic-arrow{
    display:none
  }
  .semantic-dissection:has(#semantic-stage[data-concept-id="completion"][data-case-id="canonical:completion"]) .semantic-pane>header{
    min-height:30px;padding-top:4px;padding-bottom:4px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="completion"][data-case-id="canonical:completion"]) .semantic-heading{
    padding-bottom:6px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="completion"][data-case-id="canonical:completion"]) .semantic-outcome-badge{
    margin-top:4px
  }
  #semantic-stage[data-concept-id="completion"][data-case-id="canonical:completion"] .semantic-primary-view-switch{
    margin-top:6px
  }
  .semantic-dissection:has(#semantic-stage[data-concept-id="completion"][data-case-id="canonical:completion"]) #semantic-source{
    max-height:120px
  }
  /* async/legacy:function-declaration/async-function only (scoped by the
     route's own concept+case data attributes, so no sibling route —
     including async/canonical:async, which shares rehearseAsync() but is
     not touched here — is affected). Same five-rule chrome-trim reclaim
     already proven for date/event-loop/loop/mutation/evalcode/
     object-statics/object/params/resource-management/string-methods/
     template-literal/this/branch/completion: hide the decorative arrow
     (only 50px of real grid-row height even though its rotated glyph
     visually overlaps neighbouring panes), tighten both pane headers, the
     heading's own bottom padding, the outcome-badge margin, and the
     Structure/Play switch margin. A 2026-08-13 verification pass measured
     a fresh, unscrolled true 480 CSS-width navigation to this exact route:
     .sol-motion-canvas's own top sat at y=818.5 regardless of viewport
     height (667-926px tested), so no actor was ever on screen without
     scrolling. Paired with rehearseAsync()'s new compactCanvas:true opt-in
     (sol-translator-page.mjs) and this route's own canvas-floor trim
     (SCENE_CHROME_CSS, same [data-route] mechanism promises/canonical:
     promises already uses), this closes the gap. None of this hides or
     shrinks the deferred-path vessel, its Places, or the Play controls —
     only chrome around them. */
  .semantic-dissection:has(#semantic-stage[data-concept-id="async"][data-case-id="legacy:function-declaration/async-function"]) .semantic-arrow{
    display:none
  }
  .semantic-dissection:has(#semantic-stage[data-concept-id="async"][data-case-id="legacy:function-declaration/async-function"]) .semantic-pane>header{
    min-height:30px;padding-top:4px;padding-bottom:4px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="async"][data-case-id="legacy:function-declaration/async-function"]) .semantic-heading{
    padding-bottom:6px
  }
  .semantic-atlas:has(#semantic-stage[data-concept-id="async"][data-case-id="legacy:function-declaration/async-function"]) .semantic-outcome-badge{
    margin-top:4px
  }
  #semantic-stage[data-concept-id="async"][data-case-id="legacy:function-declaration/async-function"] .semantic-primary-view-switch{
    margin-top:6px
  }
  /* This route's authored fixture is deliberately 6 lines (messi, the async
     score(player) declaration, its await line, its return line, the closing
     brace, and the authored score(messi) call) — the meaningful example a
     2026-08-11 fix replaced the old empty declaration with, and shortening
     it would reintroduce that problem. The shared 32px top/bottom source
     padding (sized for the desktop side-by-side pane) is real reclaimable
     space on a stacked mobile layout that already caps this box's height;
     tightening it to this route's already-established 14px/18px scoped
     pattern (matching sugar/completion's own #semantic-source overrides
     just above) does not truncate or scroll-hide any line. */
  .semantic-dissection:has(#semantic-stage[data-concept-id="async"][data-case-id="legacy:function-declaration/async-function"]) #semantic-source{
    padding:14px 18px
  }
  /* typed-array/canonical:typed-array now shows both the authored Array Rail
     and the derived Uint8Array result. On the stacked mobile layout, remove
     only the decorative inter-pane arrow and reclaim four pixels from each
     pane header so both real structures fit in the first 844px viewport. */
  .semantic-dissection:has(#semantic-stage[data-concept-id="typed-array"][data-case-id="canonical:typed-array"]) .semantic-arrow{
    display:none
  }
  .semantic-dissection:has(#semantic-stage[data-concept-id="typed-array"][data-case-id="canonical:typed-array"]) .semantic-pane>header{
    min-height:50px
  }
}
@media (max-width:650px){
  /* Reserve the fixed comment composer's real height (212px at 429px), so the
     last Return can always scroll clear of it. */
  body{padding-bottom:224px}
  html.atlas-shell-ready .semantic-sidebar{max-height:min(72vh,620px);padding:14px 9px}
  .semantic-mobile-nav-toggle{min-height:58px;padding:9px 13px}
  .semantic-canvas-pane>header{min-width:0}
  details.vnotes{
    position:fixed;z-index:90;right:0;bottom:0;left:0;width:auto;padding:0 0 env(safe-area-inset-bottom);
    overflow:visible;border:0;border-top:1px solid rgba(21,17,13,.13);border-radius:22px 22px 0 0;
    background:rgba(255,253,250,.96);box-shadow:0 -16px 42px rgba(39,29,18,.16);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)
  }
  .vnotes-head{min-height:32px;justify-content:center;padding:8px 14px 3px}
  .vnotes-head b{font-size:9px}.vnotes-head b::before{content:'New comment · '}
  .vnotes-count,.vnotes-status,.vnotes-thread{display:none!important}
  .vnotes-body{display:flex;flex-direction:column;gap:7px;padding:0 12px 10px}
  .vnotes-compose{order:1;grid-template-columns:1fr auto;gap:8px;align-items:stretch}
  .vnotes-review-nav{order:2;grid-template-columns:52px 1fr 52px;gap:8px}
  .vnotes-swipe-hint{position:absolute;right:0;bottom:calc(100% + 8px);left:0;display:block;margin:0;
    color:rgba(255,255,255,.92);font:700 9px/1 var(--mono);letter-spacing:.08em;text-align:center;text-transform:uppercase;
    text-shadow:0 1px 5px rgba(21,17,13,.7);pointer-events:none}
  .vnotes-review-move{min-height:38px;padding:0;border-radius:999px;font-size:0}
  #vnotes-previous::after{content:'←';font-size:20px}
  #vnotes-next::after{content:'→';font-size:20px}
  .vnotes-compose{grid-template-columns:1fr;gap:7px}
  .vnotes textarea{min-height:50px;max-height:86px;padding:12px 14px;border-radius:15px;font-size:16px;line-height:1.35;resize:none}
  .vnotes-compose-actions{grid-template-columns:1fr}
  #vnotes-add{display:none}
  #vnotes[data-can-advance="false"] #vnotes-add{display:block;min-height:48px;border-radius:15px;font-size:11px}
  .vnotes-add-next{min-height:48px;padding:0 16px;border-radius:15px;background:var(--ink);font-size:11px}
  .semantic-dissection{touch-action:pan-y;transition:transform .13s ease,opacity .13s ease}
  .semantic-dissection.is-swiping-left{transform:translateX(-18%);opacity:.18}
  .semantic-dissection.is-swiping-right{transform:translateX(18%);opacity:.18}
  .semantic-inspect-meaning>.semantic-meaning{padding:14px}
}

/* property/canonical:property only (scoped by the route's own concept+case
   data attributes on #semantic-stage, so no sibling route that shares the
   generic .vinci-field-operation-dock mechanism — mutation's field-change
   dock, any other property-read/write route — is touched, and desktop is
   untouched since this lives inside a max-width media query).

   A verification pass (2026-08-13) found the decisive "READ messi.goals"
   result — the dashed "g: ?" pill that is the entire point of this example —
   invisible on a fresh, unscrolled true-480 load, even after normal vertical
   scroll and 2+ seconds of settle. Root cause confirmed live: #semantic-stage
   carries overflow-x:auto with no visible scrollbar/hint (scrollWidth 428px
   vs clientWidth 389px), and the dock's desktop geometry
   (`.vinci-field-operation-dock{left:calc(100% + 9px)}`, tethered to the
   RIGHT of the "goals" field so it reads beside the Ball on the wide desktop
   canvas) pushed the dock's own box to right=468px inside a stage whose own
   right edge sits at 429px — 39px past the fold, reachable only by an
   undiscoverable horizontal micro-scroll on a nested canvas that looks like
   empty margin next to the Ball. The content was never lost, only hidden.

   Fix: at narrow widths only, the same dock tethers DOWNWARD instead of
   sideways — centred under its field, connected by a short vertical dashed
   line instead of a horizontal one — so the whole picture (Ball, its
   "goals: 0" field, and the routed read result) stays inside the stage's
   own horizontal bounds with zero horizontal scroll required. No change to
   which field the read is docked on, the "READ" verb, the expression text,
   the dashed "unknown" result pill's own geometry/aria-label, or the
   desktop-verified `left:calc(100% + 9px)` placement other routes still get
   above this breakpoint. */
@media (max-width:650px){
  #semantic-stage[data-concept-id="property"][data-case-id="canonical:property"]
    .vinci-field-operation-dock{
    left:50%;top:calc(100% + 10px);transform:translateX(-50%)
  }
  #semantic-stage[data-concept-id="property"][data-case-id="canonical:property"]
    .vinci-field-operation-dock::before{
    width:1px;height:15px;border-top:0;border-left:1.5px dashed rgba(238,150,20,.44)
  }
}

/* Your code lives in the Atlas source pane: same translator, no second canvas. */
.semantic-source-pane>header .yourcode-toggle{min-height:28px;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:0 9px;color:#eadfce;background:rgba(255,255,255,.06);font:650 8px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.semantic-source-pane>header .yourcode-toggle:hover,.semantic-source-pane>header .yourcode-toggle:focus-visible{border-color:var(--orange);color:#fff;background:rgba(238,150,20,.2);outline:none}
#yourcode-toggle{margin-left:auto}
.yourcode-src{display:block;width:100%;min-height:420px;margin:0;padding:26px 18px;border:0;outline:0;resize:vertical;color:#f3eadc;background:var(--char);font:550 13.5px/1.65 var(--mono);tab-size:2;white-space:pre;overflow:auto}
.yourcode-src[hidden],.yourcode-bar[hidden]{display:none!important}
.yourcode-src:focus{box-shadow:inset 3px 0 var(--orange)}
.yourcode-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 15px;border-top:1px solid rgba(255,255,255,.12);color:#b9aa96;background:#211d18;font:550 9px/1.4 var(--mono)}
.yourcode-status[data-kind="refused"]{color:#ffc082}
.yourcode-reset{min-height:28px;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:0 9px;color:#eadfce;background:transparent;font:650 8px/1 var(--mono);cursor:pointer}
.yourcode-reset:hover,.yourcode-reset:focus-visible{border-color:var(--orange);color:#fff;outline:none}
.semantic-workflow-l1-note{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:12px 14px 0;border:1px solid rgba(72,113,166,.32);border-radius:10px;padding:9px 11px;color:#284f7d;background:#edf4ff;font:600 10px/1.4 var(--mono)}
.semantic-workflow-l1-note b{color:#23446c;text-transform:uppercase;letter-spacing:.04em}
.semantic-workflow-l1-note span{color:#49678d;text-align:right}
.semantic-workflow-l1-switch{display:flex;gap:7px;margin:10px 14px 0}
.semantic-workflow-l1-switch button{min-height:28px;border:1px solid #cbd6e3;border-radius:999px;padding:0 10px;color:#496078;background:#fff;font:650 8px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.semantic-workflow-l1-switch button[aria-pressed="true"]{border-color:#5278a7;color:#24466e;background:#eaf2fc}
.semantic-workflow-l1-switch button:hover,.semantic-workflow-l1-switch button:focus-visible{border-color:#5278a7;outline:none}
.semantic-workflow-l1-map{margin:10px 14px 16px;border:1px solid #d6dee8;border-radius:12px;overflow:hidden;background:#fbfdff}
.semantic-workflow-l1-map>header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 13px;border-bottom:1px solid #dce4ed;color:#355474;background:#f1f6fc}
.semantic-workflow-l1-map>header b{font:700 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.semantic-workflow-l1-map>header span{color:#627b95;font:550 9px/1.4 var(--mono);text-align:right}
.semantic-workflow-l1-root{display:flex;align-items:baseline;gap:10px;padding:12px 13px 10px;border-bottom:1px solid #edf1f5;color:#63748a}
.semantic-workflow-l1-root code{display:inline-grid;place-items:center;min-width:58px;border:1px solid #a5bad0;border-radius:999px;padding:5px 8px;color:#264c72;background:#eaf2fc;font:700 9px/1 var(--mono)}
.semantic-workflow-l1-root span{font:550 10px/1.45 var(--mono)}
.semantic-workflow-l1-statements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:12px;list-style:none}
.semantic-workflow-l1-statement{display:flex;width:100%;min-height:82px;flex-direction:column;align-items:flex-start;gap:7px;border:1px solid #dce4ed;border-radius:9px;padding:10px;color:#283d52;background:#fff;text-align:left;cursor:pointer}
.semantic-workflow-l1-statement:hover,.semantic-workflow-l1-statement:focus-visible{border-color:#567ea9;box-shadow:0 0 0 2px rgba(79,119,163,.12);outline:none}
.semantic-workflow-l1-statement-meta{display:flex;width:100%;justify-content:space-between;gap:8px;color:#66809a;font:550 8px/1 var(--mono)}
.semantic-workflow-l1-statement-meta code{color:#365c83}
.semantic-workflow-l1-statement-name{max-width:100%;overflow:hidden;color:#25394c;font:700 11px/1.2 var(--mono);text-overflow:ellipsis;white-space:nowrap}
.semantic-workflow-l1-rule-chips{display:flex;flex-wrap:wrap;gap:4px}
.semantic-workflow-l1-rule-chips i{border:1px solid #d3dfeb;border-radius:999px;padding:3px 5px;color:#52708e;background:#f4f8fc;font:600 7px/1 var(--mono);font-style:normal}
@media (max-width:900px){.semantic-workflow-l1-statements{grid-template-columns:1fr}}
@media (max-width:650px){.semantic-workflow-l1-note{align-items:flex-start;flex-direction:column;margin:10px 10px 0}.semantic-workflow-l1-note span{text-align:left}}
@media (max-width:650px){.semantic-workflow-l1-switch{margin:10px 10px 0}.semantic-workflow-l1-map{margin:10px 10px 14px}.semantic-workflow-l1-map>header{align-items:flex-start;flex-direction:column}.semantic-workflow-l1-map>header span{text-align:left}.semantic-workflow-l1-root{align-items:flex-start;flex-direction:column}.semantic-workflow-l1-statements{padding:9px}}
@media (max-width:650px){.semantic-source-pane>header .yourcode-toggle{font-size:7px}.semantic-source-pane>header #yourcode-toggle{margin-left:0}.yourcode-src{min-height:420px;padding:18px 14px;font-size:13px}.yourcode-bar{align-items:flex-start;flex-direction:column}}

/* Standalone source stays readable in full, including on the phone. Wrapping
   changes line layout only: each numbered row retains its exact source text. */
.semantic-atlas #semantic-source{max-height:none;white-space:pre-wrap;overflow:visible}
.semantic-atlas #semantic-source .semantic-source-line{grid-template-columns:26px minmax(0,1fr)}
.semantic-atlas #semantic-source .semantic-source-line>code{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}

/* Canonical host disclosure: an embedding product can show the exact Atlas
   program surface immediately, while the full Atlas (source, provenance and
   navigator) remains available at its normal URL. Nothing is re-rendered or
   reinterpreted here; only surrounding Atlas chrome is folded. */
html[data-vinci-embed="program"],
html[data-vinci-embed="program"] body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}
html[data-vinci-embed="program"] .topbar,
html[data-vinci-embed="program"] .semantic-mobile-nav,
html[data-vinci-embed="program"] .semantic-sidebar,
html[data-vinci-embed="program"] .semantic-intro,
html[data-vinci-embed="program"] .semantic-hero,
html[data-vinci-embed="program"] .semantic-heading,
html[data-vinci-embed="program"] .semantic-source-pane,
html[data-vinci-embed="program"] #semantic-translation-arrow,
html[data-vinci-embed="program"] .semantic-canvas-pane > header,
html[data-vinci-embed="program"] .vnotes,
html[data-vinci-embed="program"] .semantic-inspect {
  display: none !important;
}
html[data-vinci-embed="program"] .semantic-workspace {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
}
html[data-vinci-embed="program"] .semantic-main,
html[data-vinci-embed="program"] .semantic-atlas,
html[data-vinci-embed="program"] .semantic-dissection,
html[data-vinci-embed="program"] .semantic-canvas-pane {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html[data-vinci-embed="program"] .semantic-main,
html[data-vinci-embed="program"] .semantic-canvas-pane {
  overflow: hidden;
}
html[data-vinci-embed="program"] .semantic-atlas {
  background: transparent;
}
html[data-vinci-embed="program"] .semantic-dissection,
html[data-vinci-embed="program"] .semantic-dissection[data-linked="false"] {
  display: block;
}
html[data-vinci-embed="program"] #semantic-stage {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: auto;
}
html[data-vinci-embed="program"] #semantic-stage > .semantic-visual-program {
  min-height: 100%;
  padding: 12px;
}

/* ── L2 panel chrome, minimal (Armand 2026-08-30): one quiet transport row,
   tiny status, disclosure rows instead of banded accordions. All hooks and
   DOM unchanged — this is presentation only. Loads after the surface sheet,
   so same-specificity rules here win. ── */
.atlas-l2-program-controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;padding:2px 0 6px}
.atlas-l2-program-control{min-height:22px;padding:3px 10px;border:1px solid rgba(122,74,8,.14);border-radius:999px;background:transparent;color:#8a7a63;font:600 9px/1 var(--mono,"JetBrains Mono",ui-monospace,monospace);letter-spacing:.04em}
.atlas-l2-program-control:hover:not(:disabled){border-color:rgba(122,74,8,.34);color:#211d18}
.atlas-l2-program-control:disabled{opacity:.38}
.atlas-l2-program-control[data-atlas-l2-program-action="play"]{border-color:rgba(122,74,8,.42);background:#fff;color:#211d18}
.atlas-l2-program-controls p,.atlas-l2-program-controls output,
[data-atlas-l2-runtime-evidence-summary]{margin:0;color:#6f6251;font:600 10px/1.5 var(--mono,"JetBrains Mono",ui-monospace,monospace)}
[data-atlas-l2-runtime-evidence],.atlas-l2-program-source-editor,.atlas-l2-program-connection-builder{margin:2px 0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
[data-atlas-l2-runtime-evidence]>summary,.atlas-l2-program-source-editor>summary,.atlas-l2-program-connection-builder>summary{min-height:0;padding:3px 2px;border:0;background:transparent;color:#8a7a63;font:700 8.5px/1 var(--mono,"JetBrains Mono",ui-monospace,monospace);letter-spacing:.08em;cursor:pointer}
[data-atlas-l2-runtime-evidence]>summary:hover,.atlas-l2-program-source-editor>summary:hover,.atlas-l2-program-connection-builder>summary:hover{color:#211d18}

/* Keep the L2 program's behavior intact while making its idle chrome recede.
   Disabled history/playback actions return when they become available; the
   initial surface leads with one Play action and the canvas itself. */
.atlas-l2-program-controls{justify-content:flex-start;flex-wrap:nowrap;min-width:0;margin:0;padding:6px 10px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;border-bottom:1px solid rgba(122,74,8,.08);scrollbar-width:thin}
.atlas-l2-program-controls>.atlas-l2-program-control{flex:0 0 auto}
.atlas-l2-program-control:disabled{display:none}
.atlas-l2-program-controls:has([data-atlas-l2-program-action="reset"]:disabled)
  [data-atlas-l2-program-action="step"]{display:none}
.atlas-l2-program-playback-status{flex:0 1 320px;min-width:72px;max-width:320px;min-height:0;margin-left:auto;overflow:hidden;text-align:right;text-overflow:ellipsis;white-space:nowrap}
.atlas-l2-program-playback-status[data-atlas-l2-provider-readiness]{flex:0 0 auto;max-width:255px;margin-left:0}
.atlas-l2-program-evidence-summary{display:none}
[data-atlas-l2-runtime-evidence]{flex:0 0 auto;margin:0 0 0 4px}
[data-atlas-l2-runtime-evidence]>summary{white-space:nowrap}
.atlas-l2-program-source-editor,.atlas-l2-program-connection-builder{display:inline-block;width:auto;margin:2px 8px 7px 0;padding:0}
.atlas-l2-program-source-editor>summary,.atlas-l2-program-connection-builder>summary{padding:4px 2px}

/* The Vinci panel is the canvas. Canvas mode reveals a small native palette
   beside the same canonical stage; it never swaps in a separate editor app. */
.semantic-canvas-pane>header{gap:10px}
.semantic-canvas-pane>header #semantic-canvas-subtitle{min-width:0;margin-left:auto}
.semantic-canvas-pane .atlas-edit-toggle{flex:none;min-height:27px;padding:0 10px;border:1px solid rgba(122,74,8,.25);border-radius:999px;color:#6f4a16;background:#fff;font:700 8px/1 var(--mono,"JetBrains Mono",ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:none}
.semantic-canvas-pane .atlas-edit-toggle[aria-expanded="true"]{border-color:#ee9614;background:#fff4df;color:#211d18}
.semantic-canvas-pane[data-canvas-mode="true"]{overflow:visible}
.atlas-canvas-workspace{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
.semantic-canvas-pane[data-canvas-mode="true"] .atlas-canvas-workspace{grid-template-columns:148px minmax(0,1fr)}
.atlas-canvas-palette{position:sticky;top:74px;left:0;z-index:12;display:flex;flex-direction:column;align-self:start;align-items:stretch;gap:10px;min-width:0;max-height:calc(100vh - 84px);box-sizing:border-box;padding:13px 10px;overflow-y:auto;border-right:1px solid rgba(122,74,8,.12);background:#fffaf0}
.atlas-canvas-palette[hidden]{display:none}
.atlas-canvas-palette>span{padding:2px 3px;color:#6f6251;font:700 10px/1.35 var(--mono,"JetBrains Mono",ui-monospace,monospace);letter-spacing:.1em;text-transform:uppercase}
.atlas-canvas-library{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0}
.atlas-canvas-palette button{display:flex;align-items:center;gap:7px;width:100%;min-height:31px;padding:4px 8px 4px 4px;border:1px solid rgba(122,74,8,.18);border-radius:9px;color:#211d18;background:#fff;cursor:grab;text-align:left}
.atlas-canvas-palette button:hover,.atlas-canvas-palette button:focus-visible{border-color:rgba(238,150,20,.7);background:#fff9ed}
.atlas-canvas-palette button:disabled{cursor:not-allowed;opacity:.38}
.atlas-canvas-palette button[aria-pressed="true"]{border-color:#ee9614;background:#fff1d8}
.atlas-canvas-palette button i{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;color:#7a4a08;background:#fff1d8;font:700 9px/1 var(--mono,"JetBrains Mono",ui-monospace,monospace);font-style:normal}
.atlas-canvas-palette button[data-atlas-canvas-add="ball"] i{color:#fff;background:radial-gradient(circle at 35% 25%,#ffe5ad,#ee9614 60%,#a95710);box-shadow:0 3px 8px rgba(122,74,8,.14)}
.atlas-canvas-palette button[data-atlas-canvas-add]{touch-action:none}
.atlas-canvas-palette button[data-atlas-canvas-connect]{cursor:pointer}
.atlas-canvas-palette .atlas-canvas-undo{margin-top:auto;cursor:pointer}
.atlas-canvas-palette button b{font:650 10px/1 var(--sans,"Manrope",system-ui,sans-serif)}
.atlas-canvas-edge-inspector{display:grid;gap:6px;padding:8px 0;border-block:1px solid rgba(122,74,8,.12)}
.atlas-canvas-edge-inspector[hidden]{display:none}
.atlas-canvas-edge-inspector>strong{color:#6f6251;font:700 8px/1.3 var(--mono,"JetBrains Mono",ui-monospace,monospace);letter-spacing:.09em;text-transform:uppercase}
.atlas-canvas-edge-inspector [data-atlas-canvas-edge-list]{display:grid;gap:4px}
.atlas-canvas-edge-inspector [data-atlas-canvas-edge-list] button{min-height:32px;cursor:pointer;font:650 8px/1.35 var(--mono,"JetBrains Mono",ui-monospace,monospace)}
.atlas-canvas-edge-inspector [data-atlas-canvas-edge-list] button[aria-current="true"]{border-color:#ee9614;background:#fff1d8}
.atlas-canvas-edge-inspector [data-atlas-canvas-edge-detail]{display:grid;gap:5px;color:#6f6251;font:600 8px/1.45 var(--mono,"JetBrains Mono",ui-monospace,monospace)}
.atlas-canvas-edge-inspector [data-atlas-canvas-edge-actions]{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.atlas-canvas-edge-inspector [data-atlas-canvas-edge-actions] button{min-height:32px;justify-content:center;padding:5px;cursor:pointer}
.atlas-canvas-palette output{min-height:30px;margin-top:auto;padding:4px 3px;color:#985f0b;font:700 8px/1.4 var(--mono,"JetBrains Mono",ui-monospace,monospace)}
.atlas-canvas-palette output[data-state="error"]{color:#a33b2a}
#atlas-canvas-workspace>#semantic-stage{min-width:0}
#semantic-stage[data-canvas-mode="true"]{background-color:#fbfaf6;background-image:radial-gradient(circle,rgba(122,74,8,.12) .75px,transparent .8px);background-size:20px 20px}
#semantic-stage[data-canvas-drag="true"]{box-shadow:inset 0 0 0 3px rgba(238,150,20,.38)}
#semantic-stage .atlas-canvas-scope-drop-zone{display:none}
#semantic-stage[data-canvas-mode="true"] .atlas-canvas-scope-drop-zone{position:relative;z-index:112;display:flex;align-items:center;justify-content:center;min-height:32px;box-sizing:border-box;margin:7px 12px;padding:4px 9px;border:1px dashed rgba(122,74,8,.22);border-radius:9px;color:#8a7a63;background:rgba(255,253,248,.72);font:700 7px/1.35 var(--mono,"JetBrains Mono",ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;pointer-events:auto;transition:border-color .16s ease,background-color .16s ease}
#semantic-stage[data-canvas-mode="true"] .atlas-canvas-scope-drop-zone[data-atlas-canvas-scope-kind="program"]{width:min(520px,calc(100% - 28px));margin-inline:auto}
#semantic-stage[data-canvas-mode="true"] .vinci-control-lane>.atlas-canvas-scope-drop-zone{width:140px;min-width:140px;margin-inline:50%;translate:-50% 0}
#semantic-stage[data-canvas-mode="true"][data-canvas-drag="true"] .atlas-canvas-scope-drop-zone{border-color:rgba(238,150,20,.52);color:#7a4a08;background:#fff8e9}
#semantic-stage[data-canvas-mode="true"] .atlas-canvas-scope-drop-zone[data-atlas-canvas-scope-drop-active]{border-style:solid;border-color:#ee9614;outline:4px solid rgba(238,150,20,.16);background:#fff0d3;color:#211d18}
#semantic-stage .atlas-l2-program-node[data-atlas-canvas-layout]{translate:var(--atlas-canvas-layout-x,0px) var(--atlas-canvas-layout-y,0px)}
#semantic-stage .atlas-canvas-node-move-handle{display:none}
#semantic-stage[data-canvas-mode="true"] .atlas-canvas-node-move-handle{position:absolute;right:42px;top:12px;z-index:125;display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid rgba(122,74,8,.24);border-radius:50%;background:#fffdf8;color:#7a4a08;cursor:grab;touch-action:none;pointer-events:auto;font:700 10px/1 var(--mono,"JetBrains Mono",ui-monospace,monospace)}
#semantic-stage[data-canvas-mode="true"] .atlas-canvas-node-move-handle[data-dragging]{cursor:grabbing;border-color:#ee9614;box-shadow:0 0 0 5px rgba(238,150,20,.16)}
#semantic-stage .atlas-canvas-persisted-edges{position:absolute;inset:0;z-index:105;width:100%;height:100%;overflow:visible;pointer-events:none}
#semantic-stage .atlas-canvas-persisted-edges[hidden]{display:none}
#semantic-stage .atlas-canvas-persisted-edge{fill:none;stroke:#8b5b18;stroke-width:2;stroke-linecap:round;pointer-events:stroke;cursor:pointer;vector-effect:non-scaling-stroke}
#semantic-stage .atlas-canvas-persisted-edge[data-selected="true"]{stroke:#ee9614;stroke-width:3.5}
#semantic-stage .atlas-canvas-port-handle{display:none}
#semantic-stage[data-canvas-mode="true"] .atlas-canvas-port-handle{all:unset;position:absolute;left:50%;top:50%;z-index:120;display:block;width:32px;height:32px;box-sizing:border-box;border-radius:50%;transform:translate(-50%,-50%);cursor:crosshair;touch-action:none;pointer-events:auto;opacity:1}
#semantic-stage[data-canvas-mode="true"] .atlas-canvas-port-handle::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;box-sizing:border-box;border:2px solid #a96c12;border-radius:50%;background:#fffdf8;box-shadow:0 0 0 3px rgba(255,253,248,.88);transform:translate(-50%,-50%)}
#semantic-stage[data-canvas-mode="true"] .atlas-canvas-port-handle--entry::before{border-style:dashed;background:#fff}
#semantic-stage[data-canvas-mode="true"] .atlas-l2-program-node:hover .atlas-canvas-port-handle,
#semantic-stage[data-canvas-mode="true"] .atlas-canvas-port-handle:focus-visible,
#semantic-stage[data-canvas-connect="true"] .atlas-canvas-port-handle{opacity:1}
#semantic-stage[data-canvas-mode="true"] .atlas-canvas-port-handle:focus-visible{outline:2px solid #211d18;outline-offset:2px}
#semantic-stage .vinci-function-parameter-seat:focus-visible{outline:2px solid #211d18!important;outline-offset:3px;box-shadow:0 0 0 6px rgba(238,150,20,.18)!important}
#semantic-stage[data-canvas-mode="true"] .atlas-canvas-port-handle--return{cursor:grab}
#semantic-stage[data-canvas-mode="true"] .atlas-canvas-port-handle--outcome{top:100%;cursor:grab}
#semantic-stage[data-canvas-mode="true"] .vinci-function-return-port>
  .atlas-canvas-port-handle--return{top:4px}
#semantic-stage[data-canvas-mode="true"] .atlas-canvas-port-handle[data-atlas-canvas-port-dragging]{cursor:grabbing;opacity:1}
#semantic-stage[data-canvas-mode="true"] .atlas-canvas-port-handle[data-atlas-canvas-port-eligible="true"]::before{width:13px;height:13px;border-color:#d98008;box-shadow:0 0 0 6px rgba(238,150,20,.14)}
#semantic-stage[data-canvas-mode="true"] .atlas-canvas-port-handle[data-atlas-canvas-port-eligible="false"]{cursor:not-allowed;opacity:.3}
#semantic-stage[data-canvas-mode="true"] .atlas-canvas-port-handle[data-atlas-canvas-port-eligible="false"]::before{border-color:#a74b36;background:linear-gradient(45deg,transparent 43%,#a74b36 44%,#a74b36 56%,transparent 57%)}
#semantic-stage[data-canvas-mode="true"] .atlas-canvas-port-handle[data-atlas-canvas-port-drop-target]::before,
#semantic-stage[data-canvas-mode="true"] .atlas-canvas-port-handle[data-atlas-canvas-port-selected="target"]::before{width:15px;height:15px;box-shadow:0 0 0 8px rgba(238,150,20,.2)}
#semantic-stage[data-canvas-mode="true"] .atlas-canvas-port-handle[data-atlas-canvas-port-selected="source"]::before{background:#ee9614;border-color:#9b5e09;box-shadow:0 0 0 7px rgba(238,150,20,.18)}
#semantic-stage[data-canvas-mode="true"]
  .atlas-canvas-port-handle[data-atlas-canvas-port-pending-hidden]{
  opacity:0!important;visibility:hidden;pointer-events:none
}
.atlas-canvas-connection-preview{position:fixed;inset:0;z-index:999;width:100vw;height:100vh;overflow:visible;pointer-events:none}
.atlas-canvas-connection-preview[hidden]{display:none}
.atlas-canvas-connection-preview [data-atlas-canvas-connection-preview-path]{fill:none;stroke:#756b5c;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:5 5}
.atlas-canvas-connection-preview[data-state="valid"] [data-atlas-canvas-connection-preview-path],
.atlas-canvas-connection-preview[data-state="pending"] [data-atlas-canvas-connection-preview-path]{stroke:#8b5b18;stroke-width:1.8}
.atlas-canvas-connection-preview[data-state="invalid"] [data-atlas-canvas-connection-preview-path]{stroke:#a74b36}
.atlas-canvas-connection-preview [data-atlas-canvas-connection-preview-label] rect{fill:#fffdf8;stroke:#c7b38e;stroke-width:1}
.atlas-canvas-connection-preview [data-atlas-canvas-connection-preview-label] text{fill:#6f4a16;font:700 8px/1 var(--mono,"JetBrains Mono",ui-monospace,monospace);letter-spacing:.08em}
#semantic-stage [data-atlas-canvas-new="true"]{animation:atlas-canvas-new 1.5s ease both}
@keyframes atlas-canvas-new{
  0%,100%{box-shadow:var(--atlas-canvas-original-shadow,0 18px 42px rgba(90,52,12,.08))}
  25%,70%{border-color:#ee9614;box-shadow:0 0 0 7px rgba(238,150,20,.16),0 24px 52px rgba(90,52,12,.14)}
}
html[data-vinci-embed="program"] .atlas-canvas-palette{top:10px;max-height:calc(100vh - 20px)}
@media(prefers-reduced-motion:reduce){
  #semantic-stage [data-atlas-canvas-new="true"]{animation:none;outline:4px solid rgba(238,150,20,.25);outline-offset:3px}
  #semantic-stage[data-canvas-mode="true"] .atlas-canvas-scope-drop-zone{transition:none}
}
@media(pointer:coarse){
  #semantic-stage[data-canvas-mode="true"] .atlas-canvas-port-handle{width:44px;height:44px;opacity:1}
  #semantic-stage[data-canvas-mode="true"] .atlas-canvas-node-move-handle{width:44px;height:44px}
  .atlas-l2-program-toolbar-host>.atlas-l2-program-controls .atlas-l2-program-control,
  .atlas-l2-program-more>summary,
  .semantic-canvas-pane .atlas-edit-toggle{min-height:44px;box-sizing:border-box}
  .atlas-l2-program-more>summary{display:flex;align-items:center;padding-inline:8px}
  .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}
}
@media(max-width:720px){
  .semantic-canvas-pane[data-canvas-mode="true"] .atlas-canvas-workspace{grid-template-columns:116px minmax(0,1fr);overflow:visible}
  .semantic-canvas-pane[data-canvas-mode="true"]>header{min-width:0}
  #atlas-canvas-workspace>#semantic-stage{min-width:0;overflow-x:auto;overscroll-behavior-inline:contain}
  #semantic-stage[data-canvas-mode="true"][data-vinci-function-presentation="canonical"]
    >.semantic-visual-program[data-atlas-l2-program-canvas="shared"][data-canonical-function-surface="true"]{min-width:0}
  .atlas-canvas-palette button{padding-right:5px}
  .atlas-canvas-palette button b{font-size:9px}
}
/* Utilities stay available, but one disclosure owns them instead of three
   permanent rows above the program. */
.atlas-l2-program-more{margin:0 10px 7px;border:0;background:transparent}
.atlas-l2-program-more>summary{width:max-content;padding:5px 2px;color:#6f6251;cursor:pointer;list-style:none;font:700 10px/1 var(--mono,"JetBrains Mono",ui-monospace,monospace);letter-spacing:.09em;text-transform:uppercase}
.atlas-l2-program-more>summary::-webkit-details-marker{display:none}
.atlas-l2-program-more>summary::before{content:'＋';display:inline-block;margin-right:6px;color:#b38139}
.atlas-l2-program-more[open]>summary::before{content:'−'}
.atlas-l2-program-more-content{display:grid;gap:7px;padding:8px 10px 11px;border:1px solid rgba(122,74,8,.12);border-radius:12px;background:rgba(255,253,248,.86)}
.atlas-l2-program-more .atlas-l2-program-evidence,
.atlas-l2-program-more .atlas-l2-program-source-editor,
.atlas-l2-program-more .atlas-l2-program-connection-builder{display:block;width:100%;margin:0;padding:0}
.atlas-l2-program-connection-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);flex:1 1 100%;gap:7px;width:100%;margin-top:2px}

/* A port drop opens a contextual inspector without pushing either endpoint
   away from the wire the user just drew. The same exact source-backed builder
   remains authoritative; only its Canvas-mode presentation becomes a tray. */
.semantic-canvas-pane[data-canvas-mode="true"]
  .atlas-l2-program-more[data-atlas-canvas-connection-tray]{
  position:relative;height:var(--atlas-canvas-tray-reserved-height,auto);overflow:visible
}
.semantic-canvas-pane[data-canvas-mode="true"]
  [data-atlas-l2-program-toolbar-host]:has(
    .atlas-l2-program-more[data-atlas-canvas-connection-tray]
  ){
  z-index:240;min-height:var(--atlas-canvas-toolbar-reserved-height,auto)
}
#semantic-stage[data-canvas-mode="true"]:has(
  .atlas-l2-program-more[data-atlas-canvas-connection-tray]
){
  z-index:20
}
.semantic-canvas-pane[data-canvas-mode="true"]
  .atlas-l2-program-more[data-atlas-canvas-connection-tray]>summary{
  display:block;visibility:hidden;pointer-events:none
}
.semantic-canvas-pane[data-canvas-mode="true"]
  .atlas-l2-program-more[data-atlas-canvas-connection-tray]>.atlas-l2-program-more-content{
  position:fixed;left:var(--atlas-canvas-tray-left,14px);right:auto;top:auto;bottom:14px;
  z-index:998;display:block;box-sizing:border-box;
  width:var(--atlas-canvas-tray-width,min(390px,calc(100vw - 28px)));
  max-height:var(--atlas-canvas-tray-max-height,min(50vh,460px));padding:10px;
  overflow:auto;overscroll-behavior:contain;pointer-events:auto;
  border:1px solid rgba(122,74,8,.22);border-radius:16px;
  background:rgba(255,253,248,.98);box-shadow:0 22px 64px rgba(45,32,15,.2)
}
.semantic-canvas-pane[data-canvas-mode="true"]
  .atlas-l2-program-more[data-atlas-canvas-connection-tray][data-atlas-canvas-tray-edge="top"]
    >.atlas-l2-program-more-content{
  top:82px;bottom:auto
}
.semantic-canvas-pane[data-canvas-mode="true"]
  .atlas-l2-program-more[data-atlas-canvas-connection-tray]
    >.atlas-l2-program-more-content>:not(.atlas-l2-program-connection-builder){display:none!important}
.semantic-canvas-pane[data-canvas-mode="true"]
  .atlas-l2-program-more[data-atlas-canvas-connection-tray]
    .atlas-l2-program-connection-builder{
  display:block;width:100%;max-height:none;margin:0;padding:0;overflow:visible;box-shadow:none
}
.semantic-canvas-pane[data-canvas-mode="true"]
  .atlas-l2-program-more[data-atlas-canvas-connection-tray]
    .atlas-l2-program-control{
  min-height:32px
}
.semantic-canvas-pane[data-canvas-mode="true"]
  .atlas-l2-program-more[data-atlas-canvas-connection-tray]
    .atlas-l2-program-connection-actions{
  position:sticky;bottom:0;z-index:3;padding:8px 0 2px;
  background:linear-gradient(transparent 0,rgba(255,253,248,.98) 8px)
}
@media(pointer:coarse){
  .atlas-canvas-palette button,
  .semantic-canvas-pane[data-canvas-mode="true"]
    .atlas-l2-program-more[data-atlas-canvas-connection-tray]
      .atlas-l2-program-control{
    min-height:44px
  }
}
@media(max-width:720px){
  .semantic-canvas-pane[data-canvas-mode="true"]
    .atlas-l2-program-more[data-atlas-canvas-connection-tray]>.atlas-l2-program-more-content{
    left:var(--atlas-canvas-tray-left,12px);right:auto;
    width:var(--atlas-canvas-tray-width,calc(100vw - 24px));
    max-width:calc(100vw - var(--atlas-canvas-tray-left,12px) - 12px);
    max-height:var(--atlas-canvas-tray-max-height,calc(100dvh - 96px))
  }
}

#semantic-canvas-subtitle{display:block;overflow:hidden;max-width:100%;color:#6f6251;font-size:10px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
#semantic-canvas-title{font-size:9px;letter-spacing:.08em}

@media(max-width:480px){
  .semantic-heading>div{width:100%;min-width:0;grid-template-columns:minmax(0,1fr)}
  .semantic-heading>div>.eyebrow{grid-column:1;grid-row:1}
  .semantic-heading .semantic-outcome-badge{grid-column:1;grid-row:2;max-width:100%;justify-self:start}
  .semantic-heading h2{grid-column:1;grid-row:3;min-width:0}
}

/* Each compact Function owns a real entry and exit boundary. Keep a clear
   transport lane between consecutive shells so the shared Ball/value pill can
   travel between ports without sitting on both cards at once. */
.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;
}

.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-visual-order="0"] {
  margin-top: 0 !important;
  top: 0;
  margin-bottom: 0;
}

/* Canonical one-shell L2 face. Function cards are direct children of the
   renderer-owned Program Place; the surface is a sibling used only for controls.
   Scope this reference grammar to that real relationship so compact and
   expanded presentation continue to share one Function identity. */
.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].semantic-cover.vfc-function-cover[data-mode="configure"] {
  --vfc-cover-config-width:232px;
  box-sizing:border-box;
  grid-template-columns:minmax(0,1fr);
  width:min(232px,100%);
  min-height:0;
  padding:12px;
  border:1px solid #d9d0bf;
  border-radius:16px;
  background:#fffdf8;
  box-shadow:0 0 0 4px #fff4d8,0 18px 42px rgba(62,47,25,.13);
  transition:width .12s ease,min-height .12s ease,border-color .1s ease,
    box-shadow .1s ease;
}

/* Long source-authored setting values must truncate inside the Function's
   actual content box. Without an explicit shrinkable grid track the first
   field's intrinsic pill width can widen the entire canonical program and
   create a hidden horizontal canvas pan. */
.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover
    :is(.cover-identity,.cover-config,.cover-fields,.cover-field,
      .cover-field-pill,.vinci-value-pill) {
  min-width:0;
}

/* Runtime truth still opens before a Ball enters, but the compact Atlas view
   must not spend a quarter-second reflowing every card on every motion beat. */
.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover
    .vfc-cover-config {
  transition:max-height .12s ease,margin .12s ease,opacity .1s ease,
    transform .12s ease,filter .12s ease,visibility 0s linear 0s;
}

.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover
    .vfc-runtime-truth {
  transition:min-height .12s ease,max-height .12s ease,margin .12s ease,
    opacity .1s ease,transform .12s ease;
}

.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover[data-executing="true"]
    .vfc-cover-config,
.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover[data-runtime-engaged="true"]
    .vfc-cover-config {
  transition:max-height .12s ease,margin .12s ease,opacity .1s ease,
    transform .12s ease,filter .12s ease,visibility 0s linear .12s;
}

.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover
    .cover-identity {
  position:relative;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  margin-bottom:18px;
}

.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover
    .cover-ornament {
  display:none;
}

.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover
    .cover-identity-copy {
  display:grid;
  align-items:start;
  min-width:0;
  gap:6px;
}

.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover
    .vfc-cover-eyebrow {
  flex:none;
  color:#746d61;
  font:500 10px/1 var(--mono,"IBM Plex Mono",ui-monospace,monospace);
  letter-spacing:.13em;
}

.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover h3 {
  min-width:0;
  overflow:hidden;
  color:#1b1915;
  font:400 20px/1.15 Georgia,"Times New Roman",serif;
  letter-spacing:0;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover[data-runtime-state="idle"]
    .cover-truth {
  display:none;
}

.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover
    .expand-vinci-button,
.atlas-l2-owner-control-topology .vcf-if-cover .vcf-expand {
  box-sizing:border-box;
  width:auto;
  min-width:28px;
  min-height:26px;
  padding:4px 8px;
  border:1px solid rgba(122,74,8,.14);
  background:rgba(255,253,248,.88);
  color:#746d61;
  font-size:0;
}

.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover
    .expand-vinci-button::after,
.atlas-l2-owner-control-topology .vcf-if-cover .vcf-expand::after {
  content:"Inspect";
  font:650 12px/1 var(--mono,"IBM Plex Mono",ui-monospace,monospace);
}

.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover
    .expand-vinci-button:hover,
.atlas-l2-owner-control-topology .vcf-if-cover .vcf-expand:hover {
  border-color:rgba(122,74,8,.32);
  background:#fff8e8;
  color:#3b3126;
}

.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover
    .cover-config {
  margin-top:0;
}

.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover
    .cover-fields {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:9px;
}

.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover
    :is(.cover-field-dropdown,.cover-field-pill) {
  width:auto;
  max-width:100%;
}

.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover
    .cover-field-pill>.vinci-value-pill {
  width:auto;
  max-width:100%;
  min-height:0;
  padding:9px 30px 9px 12px;
  border-color:transparent;
  border-radius:999px;
  background:#fffdf8;
  box-shadow:0 5px 16px rgba(58,46,28,.12);
  font-size:12px;
}

.atlas-l2-program-layout-host
  > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover
    .cover-field-pill>.vinci-value-pill [data-vinci-value-pill-name] {
  color:#746d61;
  font-weight:400;
}

/* The owner's IF is compact control anatomy inside its Function face, not a
   fourth L2 card. Keep the exact IF ports and disclosure action while removing
   the nested-card weight and the old full-width playbook spacing. */
.atlas-l2-owner-control-topology .vcf-if-cover.vcf-if-cover {
  display:grid;
  align-content:start;
  box-sizing:border-box;
  width:100%;
  min-height:0;
  padding:13px 12px 22px;
  border:1px solid rgba(122,74,8,.2);
  border-radius:14px;
  background:rgba(255,253,248,.8);
  box-shadow:none;
}

.atlas-l2-owner-control-topology .vcf-if-cover .vcf-control-head {
  position:relative;
  gap:8px;
  padding:0;
  margin:0 0 10px;
}

.atlas-l2-owner-control-topology .vcf-if-cover .vcf-control-head>div:first-child {
  display:flex;
  flex:1 1 auto;
  min-width:0;
  align-items:baseline;
  gap:8px;
}

.atlas-l2-owner-control-topology .vcf-if-cover .vcf-control-head>div:first-child::before {
  display:none;
}

.atlas-l2-owner-control-topology .vcf-if-cover .vcf-control-head small {
  flex:none;
  color:#746d61;
  font:500 7px/1 var(--mono,"IBM Plex Mono",ui-monospace,monospace);
  letter-spacing:.11em;
}

.atlas-l2-owner-control-topology .vcf-if-cover .vcf-control-head strong {
  min-width:0;
  overflow:hidden;
  color:#1b1915;
  font:400 16px/1.1 Georgia,"Times New Roman",serif;
  letter-spacing:0;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.atlas-l2-owner-control-topology .vcf-if-cover .vcf-control-head>div:last-child {
  flex:none;
}

.atlas-l2-owner-control-topology .vcf-if-cover .vcf-control-head>div:last-child>span {
  display:none;
}

.atlas-l2-owner-control-topology .vcf-if-cover .vcf-condition {
  justify-self:start;
  width:100%;
  max-width:100%;
  min-height:42px;
  margin:0;
  padding:7px 9px;
  border:1px solid rgba(238,150,20,.36);
  border-radius:999px;
  background:#fffdf8;
  box-shadow:0 3px 10px rgba(58,46,28,.08);
}

.atlas-l2-owner-control-topology .vcf-if-cover .vcf-condition-source {
  flex:1 1 auto;
  min-width:0;
}

.atlas-l2-owner-control-topology .vcf-if-cover .vcf-condition-source small {
  flex:none;
  font-size:5.5px;
}

.atlas-l2-owner-control-topology .vcf-if-cover .vcf-condition-source code {
  min-width:0;
  overflow:visible;
  font-size:8px;
  line-height:1.35;
  overflow-wrap:anywhere;
  text-overflow:clip;
  white-space:normal;
}

.atlas-l2-owner-control-topology .vcf-if-cover .vcf-condition-evaluation {
  flex:none;
  min-width:0;
  padding:5px 7px;
  font-size:5.5px;
}

@media(max-width:520px){
  .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: 64px;
  }

  .atlas-l2-program-layout-host
    > .atlas-l2-program-node[data-atlas-l2-program-visual-order="0"] {
    margin-top: 0 !important;
  }

  .atlas-l2-program-layout-host
    > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].semantic-cover.vfc-function-cover[data-mode="configure"] {
    padding:17px 16px 20px;
    border-radius:20px;
  }

  .atlas-l2-program-layout-host
    > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover h3 {
    font-size:20px;
  }

  .atlas-l2-program-layout-host
    > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover
      .cover-identity-copy {
    gap:9px;
  }

  .atlas-l2-program-layout-host
    > .atlas-l2-program-node[data-atlas-l2-program-role="executable"].vfc-function-cover
      .expand-vinci-button,
  .atlas-l2-owner-control-topology .vcf-if-cover .vcf-expand {
    width:28px;
    min-width:28px;
  }

  .atlas-l2-owner-control-topology .vcf-if-cover.vcf-if-cover {
    padding:12px 10px 21px;
  }

  .atlas-l2-owner-control-topology .vcf-if-cover .vcf-control-head strong {
    font-size:15px;
  }
}

/* ============================================================================
   2026-09-02 · Fable simplification pass
   One vocabulary — Pill, Ball, Rail, Board, Frame, Gate — one transport bar,
   and Unknown is "?" inside a pill. Captions that only repeat "not run" fold;
   everything they described stays in the DOM.
   ============================================================================ */

/* 1 · One transport bar. Where a loop/switch/mutation transport exists the
   PLAY | STRUCTURE switch is redundant: Reset is the structure. */
.atlas-canvas-workspace:has(>.semantic-canonical-loop-controls)>.semantic-primary-view-switch,
#semantic-stage:has(.semantic-canonical-loop-controls)>.semantic-primary-view-switch,
#semantic-stage[data-canonical-switch="true"]>.semantic-primary-view-switch,
#semantic-stage:has([aria-label="Switch source rehearsal controls"])>.semantic-primary-view-switch{display:none!important}

/* 2 · A Function frame at rest is a room, not a hollow two-column box. */
.vinci-program-function{min-height:150px;padding-bottom:20px}
/* an empty definitions grid reserves nothing */
.vinci-program-scope>.vinci-program-definitions:empty{display:none!important}
.vinci-program-function-body{min-height:56px}
.vinci-program-function-body::before{display:none}
/* 2026-09-08. Armand's accepted note reads "the empty dashed LOCAL SCOPE shelf
   and the frame's dashed centre line are gone at rest (the shelf reappears only
   when Play seats a binding)", and the reference Atlas hides it: on the
   step-fork fixture at rest the reference shelf is display:none while this one
   drew a 414x56 dashed empty box.
   Taking it out of layout was tried twice and is wrong here. Unlike the
   reference, this Function frame ALIGNS ITS PORTS on that box: `display:none`
   scattered the straight-Messi port spine by 1133px, and it also removed the
   shelf `function-if-step-fork` reads at rest. So the box stays and stops
   DRAWING instead — at rest the reader sees what the reference shows them,
   nothing, while the frame keeps the space its ports are hung on. The moment
   Play seats a binding the state leaves `ready` and the shelf paints again. */
.vinci-program-function[data-function-loop-count="0"] .vinci-function-playback-scope[data-state="ready"]:not(:has(.vinci-function-playback-scope-seat>*)):not(:has(.vinci-function-playback-scope-bindings>*)){
  border-color:transparent!important;background:transparent!important;box-shadow:none!important
}
.vinci-program-function[data-function-loop-count="0"] .vinci-function-playback-scope[data-state="ready"]:not(:has(.vinci-function-playback-scope-seat>*)):not(:has(.vinci-function-playback-scope-bindings>*))>.vinci-function-playback-scope-title{
  visibility:hidden!important
}
/* Local Scope is part of the Function's anatomy before an invocation fills
   it. Empty does not mean absent. Collapse is owned by the Function cover. */
/* The Return pill shows its expression. A reference was excluded here so the
   dotted bay could receive a flying Ball during Play — but that hid `return
   player` on every static lesson, which is the value the lesson exists to
   show. Show it always; the Play states below still open the bay. */
.vinci-function-return-port>.vinci-function-return-output:has(>[data-vinci-value-pill-value]){
  grid-template-columns:max-content max-content;column-gap:5px;min-height:34px;padding:4px 12px 4px 11px;font-size:11px
}
.vinci-function-return-port>.vinci-function-return-output:has(>[data-vinci-value-pill-value])>[data-vinci-value-pill-value]{
  position:static;width:auto;max-width:200px;translate:none;transform:none;visibility:visible;opacity:1;
  overflow:hidden;text-overflow:ellipsis;border-bottom:0;font:750 11px/1.2 var(--mono)
}
.vinci-function-return-port>.vinci-function-return-output:has(>[data-vinci-value-pill-value])>.vinci-function-return-result-bay{display:none}
/* …except while a canonical Play is running, when the bay receives the Ball. */
.semantic-visual-program[data-canonical-function-play="true"] .vinci-function-return-port>.vinci-function-return-output>.vinci-function-return-result-bay,
.semantic-visual-program[data-canonical-loop-play="true"] .vinci-function-return-port>.vinci-function-return-output>.vinci-function-return-result-bay{display:grid}

/* 3 · Captions that repeat what the header and "?" already say. */
.semantic-property-value-provenance,
.semantic-receiver-ball-evidence,
.vinci-expression-binding-role,
.semantic-map-board-row-badge,
[data-quiet-step="true"][data-quiet-label]::after{display:none!important}
[data-quiet-step="true"][data-quiet-label]{margin-bottom:0!important}

/* 4 · A folded construct card keeps its binding pill visible and unchanged;
   only the card chrome around the pill folds. */
.vinci-static-definition[data-quiet-construct-folded="true"]{
  width:max-content!important;max-width:100%;gap:0!important;padding:0!important;border:0!important;
  background:transparent!important;box-shadow:none!important
}
.vinci-static-definition[data-quiet-construct-folded="true"]>.vinci-static-definition-header>:not(.vinci-static-definition-binding),
.vinci-static-definition[data-quiet-construct-folded="true"]>.vinci-static-definition-body,
.vinci-static-definition[data-quiet-construct-folded="true"]>.vinci-advanced-definition-flow{display:none!important}
.vinci-static-definition[data-quiet-construct-folded="true"] .vinci-static-definition-binding{margin:0!important}
/* the same fold for an operation card that carries its binding pill */
.vinci-program-operation[data-quiet-construct-folded="true"]{
  width:max-content!important;max-width:100%;padding:0!important;border:0!important;
  background:transparent!important;box-shadow:none!important
}
.vinci-program-operation[data-quiet-construct-folded="true"]>.vinci-expression-row,
.vinci-program-operation[data-quiet-construct-folded="true"] .vinci-operation-result-arrow{display:none!important}
.vinci-program-operation[data-quiet-construct-folded="true"]>.vinci-operation-result-binding{padding:0!important;margin:0!important}
/* memory rails: the pills and the "?" already carry the storage truth */
.vinci-memory-truth{display:none!important}
/* accessor: the hover explanation must not widen the canvas */
.semantic-accessor-value-pill .vmark-fact:not(:hover):not(:focus-within)>[data-reveal="hover"]{display:none!important}

/* 5 · Shape consistency. */
/* Symbol is one ordinary primitive pill. */
#semantic-stage[data-concept-id="symbol"] .vinci-symbol-card{
  width:max-content!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important
}
#semantic-stage[data-concept-id="symbol"] .vinci-symbol-card>.vinci-static-definition-header> :not(.vinci-static-definition-binding):not([data-vinci-set-field-device]),
#semantic-stage[data-concept-id="symbol"] .vinci-symbol-card>.vinci-static-definition-body{display:none!important}
#semantic-stage[data-concept-id="symbol"] .vinci-symbol-reference-tether{display:none!important}
#semantic-stage[data-concept-id="symbol"] .vinci-symbol-card .vinci-static-definition-binding{
  min-height:27px!important;padding:6px 12px!important;border:1px solid rgba(238,150,20,.48)!important;border-radius:999px!important;
  background:linear-gradient(180deg,#fff,#fff8eb)!important;box-shadow:0 6px 15px rgba(122,74,8,.1)!important
}
/* A private field wears the primitive pill, sign kept. */
.vinci-class-member[data-member-kind="field"]{
  display:inline-flex;grid-template-columns:none;align-items:center;gap:5px;padding:7px 13px;
  border:1px solid rgba(238,150,20,.48);border-radius:999px;background:linear-gradient(180deg,#fff,#fff8eb);
  box-shadow:0 6px 15px rgba(122,74,8,.1)
}
.vinci-class-member[data-member-kind="field"]>b{font:700 11px/1 var(--mono);color:var(--ink)}
.vinci-class-member[data-member-kind="field"]>b::after{content:":"}
.vinci-class-member[data-member-kind="field"]>small{font:750 11px/1 var(--mono);color:var(--gold-deep)}
/* The loop ring already names the loop; no label over the rail title. */
[data-atlas-loop-ring-rail] .vinci-loop-rail-border-label{display:none!important}
/* Typed array: the binding pill already names the type. */
#semantic-stage[data-concept-id="typed-array"] .vinci-memory-definition-header>b,
#semantic-stage[data-concept-id="typed-array"] .vinci-memory-definition-header>small{display:none!important}
/* Await: the value pill wraps inside its step instead of spilling out. */
.vinci-function-authored-operations .vinci-result-binding-pill{max-width:100%;box-sizing:border-box}
.vinci-function-authored-operations .vinci-result-binding-pill>.vinci-binding-pill-value{white-space:normal;overflow-wrap:anywhere;text-align:left}
/* Recursion: the CALL chip clears the parameter seat. */
#semantic-stage[data-concept-id="recursion"] .vinci-function-call-routes{top:-64px}
/* Accessor: the get mark already says getter; the return chip folds out of
   sight but keeps a measurable point so the getter rehearsal still lands. */
.semantic-accessor-value-pill .vinci-accessor-return{
  position:absolute!important;left:50%!important;bottom:0!important;width:1px!important;height:1px!important;
  padding:0!important;border:0!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important
}
/* Event loop: the queues carry both jobs; the empty arrow frames fold. */
#semantic-stage[data-concept-id="event-loop"] .vinci-program-function[data-translator-rule-id="arrow-function"]{display:none!important}

/* 6 · Function canonical: the parameter sits at the entry (above the body)
   as `reps: 3`, editable; the call is one compact chip above the socket. */
#semantic-stage[data-case-id="canonical:function"] .vinci-function-entry>.vinci-function-parameter-dock{
  top:22px;bottom:auto;transform:translateX(-50%)
}
#semantic-stage[data-case-id="canonical:function"] .vinci-program-function-body{margin-top:30px}
#semantic-stage[data-case-id="canonical:function"] .vinci-call-operation[data-function-parameter-inside-call="true"]{
  display:inline-flex;width:max-content;min-width:0;min-height:0;padding:7px 12px;gap:7px
}
#semantic-stage[data-case-id="canonical:function"] .vinci-call-operation[data-function-parameter-inside-call="true"]>.vinci-function-call-arguments{
  display:inline-flex;gap:6px
}
/* the call chip sits wholly above the socket whatever its height */
#semantic-stage[data-case-id="canonical:function"] .vinci-program-function>.vinci-function-call-routes{
  top:auto!important;bottom:calc(100% + 24px)!important;width:max-content!important;align-items:center!important
}
#semantic-stage[data-case-id="canonical:function"] .vinci-program-function>.vinci-function-call-routes::after{height:24px!important}
#semantic-stage[data-case-id="canonical:function"] .vinci-program-function>.vinci-function-call-routes>.vinci-call-operation{
  flex:0 0 auto!important;width:max-content!important;max-width:none!important;min-height:0!important;padding:7px 12px!important;
  display:inline-flex!important;grid-template-columns:none!important;align-items:center!important;gap:7px!important
}
#semantic-stage[data-case-id="canonical:function"] .vinci-program-function>.vinci-function-call-routes>.vinci-call-operation>small{
  position:static!important
}
/* the chip reads `call train(5)`; the argument value is in that text and the
   parameter seat below shows the authored default, so no second `5` pill */
#semantic-stage[data-case-id="canonical:function"] .vinci-program-function>.vinci-function-call-routes>.vinci-call-operation>.vinci-function-call-arguments{
  display:none!important
}
#semantic-stage[data-case-id="canonical:function"] .vinci-program-function>.vinci-function-call-routes>.vinci-call-operation>b{
  position:static!important;overflow:visible!important;max-width:none!important;font-size:11px!important
}
#semantic-stage[data-case-id="canonical:function"] .vinci-program-function>.vinci-function-call-routes>.vinci-call-operation>small{
  font-size:8px!important
}
#semantic-stage[data-case-id="canonical:function"] .vinci-program-function:has(>.vinci-function-call-routes){margin-top:64px!important}
#semantic-stage[data-case-id="canonical:function"] .vinci-function-argument-pill>.vinci-function-argument-value{font:750 11px/1 var(--mono)}
/* the seat reads `reps = 3` — the authored default, not a bound value */
#semantic-stage[data-case-id="canonical:function"] .vinci-program-function:not(.vfc-function-cover--canonical-face) .vinci-function-parameter-seat{display:inline-flex!important;align-items:center;gap:3px}
#semantic-stage[data-case-id="canonical:function"] .vinci-function-parameter-seat>.vinci-parameter-shape{
  display:inline!important;order:1;margin:0 1px;color:var(--ink-mute);font:700 11px/1 var(--mono)
}
#semantic-stage[data-case-id="canonical:function"] .vinci-function-parameter-seat>[data-vinci-value-pill-value]{order:2}
#semantic-stage[data-case-id="canonical:function"] .vinci-function-parameter-seat>[data-function-parameter-value="default"]{
  display:inline!important;color:var(--gold-deep);font-weight:750
}

/* 7 · Phone: the loop ring's test pill must clear the BODY / DONE labels. */
@media(max-width:600px){
  .vinci-loop-diagram .vinci-control-test-pill{font-size:8px;padding:2px 7px;translate:0 -13px}
}

/* Function canonical on a phone: chip, socket, seat, body, return inside the fold. */
@media(max-width:600px){
  #semantic-stage[data-case-id="canonical:function"] .vinci-program-function:has(>.vinci-function-call-routes){margin-top:48px!important}
  #semantic-stage[data-case-id="canonical:function"] .vinci-program-function>.vinci-function-call-routes{bottom:calc(100% + 16px)!important}
  #semantic-stage[data-case-id="canonical:function"] .vinci-program-function>.vinci-function-call-routes::after{height:16px!important}
  #semantic-stage[data-case-id="canonical:function"] .vinci-program-function{padding-top:36px!important;padding-bottom:26px!important}
  #semantic-stage[data-case-id="canonical:function"] .vinci-program-function-body{margin-top:20px!important}
}

/* 8 · Phone: the picture must arrive in the first viewport. The two pane
   headers stack their title, subtitle and button at phone width (78px on the
   canvas pane alone), pushing the 370px Ball 70px below an 812px fold. Keep
   the Ball Mapper-exact at 370px and compress the chrome above it instead. */
@media(max-width:600px){
  .semantic-pane>header{min-height:32px!important;padding:2px 12px!important;row-gap:0!important}
  .semantic-canvas-pane>header>span,.semantic-source-pane>header>span{display:none!important}
  .semantic-canvas-pane>header>b,.semantic-source-pane>header>b{font-size:8px!important}
  .semantic-canvas-pane>header .atlas-edit-toggle,
  .semantic-source-pane>header .atlas-edit-toggle{min-height:24px!important;padding:0 9px!important;font-size:7px!important}
}

/* 9 · Phone: a nested block room never outgrows its parent room, and the
   plain-block purpose chip wraps instead of pushing the room sideways. */
@media(max-width:600px){
  .vinci-program-block-scopes>.vinci-program-block-scope{max-width:100%!important;box-sizing:border-box}
  [data-plain-block-purpose]{width:auto;max-width:100%;white-space:normal}
}

/* 10 · Phone: the two module worlds and their live-binding tether fit one
   310px canvas side by side; the binding pills wrap inside their rooms. */
@media(max-width:600px){
  #semantic-stage[data-concept-id="module"][data-case-id="canonical:module"]
    .vinci-program-top-operations[data-curriculum-module-relationship="true"]{
    grid-template-columns:minmax(0,1fr) minmax(48px,60px) minmax(0,1fr);gap:6px;padding:22px 4px
  }
  #semantic-stage[data-concept-id="module"][data-case-id="canonical:module"] [data-curriculum-module-world]{
    min-width:0;padding:12px 8px;min-height:130px
  }
  #semantic-stage[data-concept-id="module"][data-case-id="canonical:module"] [data-curriculum-module-world] .vinci-authored-operation-header>b{font-size:10px}
  #semantic-stage[data-concept-id="module"][data-case-id="canonical:module"] .semantic-module-scope-room{min-width:0;padding:8px 6px}
  #semantic-stage[data-concept-id="module"][data-case-id="canonical:module"] .semantic-module-scope-pill,
  #semantic-stage[data-concept-id="module"][data-case-id="canonical:module"] [data-module-scope-binding]{
    max-width:100%;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;text-align:center
  }
  #semantic-stage[data-concept-id="module"][data-case-id="canonical:module"] .semantic-module-scope-label{font-size:5.5px}
  .vinci-curriculum-module-tether{font-size:7px;gap:4px}
}

/* 11 · Loop canon on the two routes that asked for it (2026-09-02).
   The ring is the same device Loop draws around its Array; here it encircles
   the pill that stands for the iterated stream. The queue rails reuse the
   mini-rail vocabulary the collection lessons already speak. */
/* the ring needs its own room: on Loop it encircles the rail well below the
   device title, so give the for-await pill the same clearance instead of
   letting the ring cut through the card's heading */
[data-async-loop-ring-host]{position:relative;margin:16px 0 10px}
/* when the host IS the rail track, the ring hugs it without adding margin */
.vinci-rail-track[data-async-loop-ring-host],
.vinci-program-rail[data-async-loop-ring-host]{margin:0}
/* the ring's label sits above the rail, so the canvas must not clip it */
#semantic-stage:has([data-async-loop-ring-host].vinci-rail-track) .vinci-mark-preview,
#semantic-stage:has([data-async-loop-ring-host].vinci-program-rail) .vinci-mark-preview{padding-top:20px}
[data-async-loop-ring]{position:absolute;inset:-10px -12px;z-index:6;pointer-events:none}
[data-async-loop-ring]>.vinci-loop-rail-border-label{top:-9px}
#semantic-stage[data-concept-id="async-iterator"] .vinci-loop-diagram{padding-top:6px}
[data-event-loop-queue-folded="true"]{display:none!important}
.semantic-mini-rail[data-event-loop-queue-rail]{margin-top:4px}

/* the stream rail the for-await ring encircles (array canon) */
[data-async-stream-folded="true"]{display:none!important}
.semantic-mini-rail[data-async-stream-rail]{margin:0}

/* ring lanes for a lesson with no loop statement (Array.filter visits each
   member, so the ring carries Loop's own BODY / DONE) */
.vinci-ring-lane-stack{position:absolute;right:-6px;top:50%;transform:translate(100%,-50%);
  display:grid;gap:3px;pointer-events:none}
/* The canon's lane typography is scoped to the control diagram these lanes sit
   outside of, so it is restated here at the exact values measured on
   completion/canonical:completion: 6.5px / 650 JetBrains Mono, #5c554a. */
.vinci-ring-lane-stack .vinci-control-lane>.vinci-control-lane-label{
  white-space:nowrap;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  font-size:6.5px;font-weight:650;color:#5c554a;letter-spacing:.06em}
.vinci-ring-lane-stack .vinci-control-lane{display:block;line-height:1.5}

/* ============================================================================
   Suspend / resume rehearsal (2026-09-03) — "need plays where relevant".
   Generator, Await and Async iteration now play. The director only marks
   state; all lighting is here, in the same accent the Loop ring already uses
   (rgba(238,150,20,.82)), so the three read as one grammar with Loop/Branch.
   Nothing here rewrites a value: a stopped frame is dimmed and ringed, never
   relabelled, and every `?` stays exactly as the translator wrote it.
   ========================================================================= */
[data-suspend-phase] .vinci-program-operation,
[data-suspend-phase] section.vinci-program-function{
  transition:opacity .2s ease,box-shadow .2s ease,border-color .2s ease
}
/* NO dimming of the inactive steps, deliberately. An earlier version of this
   file faded them "as Branch does", but `.vinci-authored-operation` carries
   `opacity:1!important` alongside `display:grid!important` and
   `color:…!important` — a defensive cluster that keeps authored source fully
   legible at all times. The rule never applied (measured: computed opacity
   stayed 1), and it should not: authored code is never faded out. The ring on
   the active step is what marks the beat. */
/* The active mark MUST out-rank the operation-card styling. The first version
   of this rule was a bare `[data-suspend-active]` at specificity 0,1,0, and it
   lost every time to selectors like
   `.semantic-visual-program .vinci-program-operation.vinci-authored-operation
    .vinci-value-operation[data-semantic-focus]` (0,5,0) — measured: three of
   four beats on array-methods changed ZERO pixels, and every operation-node
   beat on the other six routes was equally invisible. Only the Function-frame
   beats ever lit. `!important` is the honest fix here: this mark is playback
   state and must win over resting decoration wherever it lands. */
/* Repeated attribute + ancestor to reach specificity 0,3,0: several route
   decorators carry their own `!important` box-shadow at 0,2,0 (the event-loop
   queue cards, for one), and among !important rules specificity still decides.
   Measured after this change: every beat on all seven routes lights. */
[data-suspend-phase] [data-suspend-active][data-suspend-active]{
  box-shadow:0 0 0 2px rgba(238,150,20,.82)!important;
  border-radius:12px;opacity:1!important
}
/* the frame itself says whether it is running or stopped */
section.vinci-program-function[data-suspend-frame-state="running"]{
  box-shadow:0 0 0 2px rgba(238,150,20,.5)
}
/* a beat whose words are conditional gets a dashed ring, never a solid one */
section.vinci-program-function[data-suspend-frame-state="conditional"]{
  box-shadow:0 0 0 2px rgba(238,150,20,.34);
  outline:1px dashed rgba(238,150,20,.55);outline-offset:2px
}
section.vinci-program-function[data-suspend-frame-state="stopped"]{
  box-shadow:0 0 0 2px rgba(238,150,20,.82);
  background-image:repeating-linear-gradient(135deg,rgba(238,150,20,.05) 0 6px,transparent 6px 12px)
}
[data-canonical-suspend-controls]{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* The status sits ABOVE the canvas, so a caption that wraps to a second line
   pushes the whole picture down — measured at +10px between beats, which made
   the jump the most visible event in the rehearsal. Reserve two lines' height
   always, so stepping never moves the canvas. */
[data-canonical-suspend-status]{
  font:650 7px/1.4 var(--mono);letter-spacing:.04em;color:#5c554a;margin-left:6px;
  display:block;flex:1 1 240px;min-height:2.8em;align-content:center
}
@media (max-width:600px){
  [data-canonical-suspend-status]{flex:1 1 100%;margin:4px 0 0;min-height:4.2em}
}

/* Fill the existing embed viewport through the Canvas workspace wrapper. */
html[data-vinci-embed="program"] #atlas-canvas-workspace {height:100%;min-height:100%}
html[data-vinci-embed="program"] #semantic-stage {height:100%!important;max-height:none!important}

/* Quiet reading of authored async/error operations. The shared value carriers
   retain their state, editing and material; these rules own arrangement/captions. */
:is([data-await-call-grammar="true"],[data-promises-await-grammar="true"],[data-throw-if-grammar="true"],[data-catch-finally-if-grammar="true"])
 :is([data-async-step],[data-promise-step],[data-throw-step],[data-cf-step])
 >.vinci-authored-operation-header>b,
[data-throw-if-grammar="true"] [data-throw-step="error"] .vinci-static-definition-title{
 font:600 11px/1.4 var(--sans)!important;letter-spacing:0;text-transform:none;
 white-space:normal;overflow:visible;text-overflow:clip;color:#56544f
}
:is([data-await-call-grammar="true"],[data-promises-await-grammar="true"],[data-throw-if-grammar="true"])
 :is([data-async-step],[data-promise-step],[data-throw-step])::after{
 left:0;right:0;transform:none;white-space:normal;text-align:center;
 font:400 9px/1.4 var(--sans);letter-spacing:0;color:#85817a
}






/* Own-method Calls retain the real script binding room. Place its declarations
   side by side so neither owner Ball appears to feed the parameter below it. */
#semantic-stage>.semantic-visual-program[data-method-call-layout="true"]
  >.vinci-program-place>.vinci-program-scope[data-scope-kind="program"]>.vinci-program-definitions{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:24px;
}
/* Entry is a destination, not a decorative line from whichever Object happens
   to sit above it. The shared director moves the exact argument to the socket. */
#semantic-stage>.semantic-visual-program[data-method-call-layout="true"]
  .vinci-function-entry[data-function-call-entry-handoff="true"]::before{
  display:none!important;
}

#semantic-stage>.semantic-visual-program[data-method-call-layout="true"]
  >.vinci-program-place>.vinci-program-scope[data-scope-kind="program"]>.vinci-program-definitions>.vinci-ball-seat{
  width:auto;min-width:72px;flex:0 1 auto;
}

#semantic-stage>.semantic-visual-program[data-method-call-layout="true"]
  .vinci-program-scope[data-scope-kind="program"] .vinci-ball-home-anchor{top:16px;transform:none}

/* The compact method example has two declarations; larger programs retain
   the full available width so their existing assemblies are not squeezed. */
#semantic-stage>.semantic-visual-program[data-method-call-layout="true"]
  >.vinci-program-place>.vinci-program-scope[data-scope-kind="program"]{width:min(100%,420px)}
/* A source carrier rests in its scope, without the old above-room offset. */
#semantic-stage>.semantic-visual-program[data-program-scope-presentation="declared"]
  .vinci-program-scope[data-scope-kind="program"] .vinci-ball-home-anchor{top:16px;transform:none}

/* Playback may lift a carrier into the motion layer, but its source scope
   remains present. Lesson-specific presentation must not erase that room. */
#semantic-stage>.semantic-visual-program[data-program-scope-presentation="declared"]
  >.vinci-program-place>.vinci-program-scope[data-scope-kind="program"]{
  display:grid!important;position:relative;min-height:94px;
  padding:31px 12px 9px!important;border:1px solid rgba(21,17,13,.12)!important;
  border-radius:14px;background:rgba(255,255,255,.77);
}

/* Source protocol disclosures use the shared expression-parts control. */
.vinci-authored-protocol{display:grid;gap:0;width:100%;padding:8px 0 2px}
.vinci-protocol-phase{border-top:1px solid rgba(21,17,13,.07);padding:9px 2px;color:var(--ink)}
.vinci-protocol-phase>summary{cursor:pointer;font:500 11px/1.4 var(--sans);color:var(--ink-soft)}
.vinci-protocol-phase>.vinci-expression-part{display:block;margin:8px 0 2px;padding:0;border:0;background:none;white-space:normal;overflow-wrap:anywhere;font:400 10px/1.6 var(--mono)}

/* The returned-arrow reading lives on its exact Call, below the call name.
   One native disclosure shows all authored steps and the runtime boundary. */
.vinci-call-operation:has(> .vinci-call-protocol){flex-wrap:wrap!important;white-space:normal!important;border-radius:14px!important}
.vinci-call-operation[role="group"]:has(> .vinci-call-protocol){cursor:default!important}
.vinci-call-operation>.vinci-call-protocol{
  flex:0 0 100%;grid-column:1/-1;box-sizing:border-box;width:100%;min-width:0;
  margin-top:4px;padding-top:6px;border-top:1px solid rgba(122,74,8,.17);
  color:var(--ink-soft);font:500 10px/1.4 var(--sans);text-align:left;white-space:normal;
}
.vinci-call-protocol>summary{cursor:pointer;color:var(--gold-deep);font:650 10px/1.4 var(--sans)}
.vinci-call-protocol-steps{display:grid;gap:5px;min-width:0;margin:8px 0 0;padding:0;list-style:none}
.vinci-call-protocol-steps>li{display:grid;gap:2px;min-width:0;padding-top:5px;border-top:1px solid rgba(21,17,13,.07)}
.vinci-call-protocol-steps b{color:var(--ink);font:650 10px/1.35 var(--sans)}
.vinci-call-protocol-steps code{display:block;min-width:0;overflow-wrap:anywhere;white-space:pre-wrap;font:400 10px/1.45 var(--mono)}
.vinci-call-protocol-boundary{margin:8px 0 0;color:var(--ink-mute);font:450 10px/1.4 var(--sans)}
.vinci-call-operation>.vinci-call-target-disclosure{
  flex:0 0 100%;grid-column:1/-1;justify-self:start;margin-top:4px;padding:3px 7px;
  border:1px solid rgba(122,74,8,.23);border-radius:7px;color:var(--gold-deep);
  background:#fff8ea;font:600 10px/1.3 var(--sans);cursor:pointer;
}

/* Steps and blocks — 2026-09-12. A block row (an IF / loop / switch inside
   an opened navigator function) is a card; the translator's focus ring was
   drawing its box around the header line inside the card. It rings the
   card. See "Steps and blocks" at the foot of vinci-program-primitives.css. */
.semantic-visual-program .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]>.vinci-function-row-mark>.vinci-program-operation[data-semantic-focus]{outline:none}
.semantic-visual-program .vinci-program-function[data-function-scope-navigator="true"][data-scope-reader="written-order"][data-scope-view="open"]
  .vinci-function-written-line[data-function-fold]:has(>.vinci-function-row-mark>.vinci-program-operation[data-semantic-focus]){outline:1px solid rgba(238,150,20,.25);outline-offset:3px}