/* Only the explicit video corrections; original r2 geometry/type/materials stay in their files. */
.demo-footer{border:0;align-items:center;grid-template-columns:1fr auto}.demo-footer #help{font-size:11px;line-height:1.45;max-width:48ch}.demo-footer #status{position:absolute;bottom:100%;left:28px;min-height:0;pointer-events:none}.demo-footer #status:empty{display:none}.demo-zoom{align-self:center}.process-nav{gap:16px}.process-nav .shape-legend{padding:0;margin-left:auto;gap:12px;background:transparent}.shape-legend i{width:10px;height:10px}.shape-legend .diamond{width:8px;height:8px}.shape-legend .capsule{width:16px}.shape-legend span{font-size:11px;gap:5px}.prototype-note{display:none}
.semantic-node .step-number{opacity:.3}.semantic-node .step-type{display:inline-flex;align-items:center;gap:5px}.role-logo{object-fit:contain}html[data-theme="dark"] .role-logo{filter:invert(1)}
.semantic-node .account-toolbar{opacity:0;pointer-events:none;transition:opacity .15s var(--demo-ease)}.semantic-node [data-action-menu-ready] .account-toolbar{opacity:1;pointer-events:auto}.semantic-node .toolbar-wrap{position:absolute;inset:0;transform:none!important;pointer-events:none;z-index:40}html[data-variant="ours"] .semantic-node [data-workflow-action-bar-swell],html[data-variant="ours"] .semantic-node.pentagon-card [data-workflow-action-bar-swell]{position:absolute;left:var(--repair-menu-x)!important;top:var(--repair-menu-y)!important;right:auto!important;transform:translate(-50%,-50%) rotate(var(--repair-menu-angle,0deg))!important;padding:0;height:24px;pointer-events:auto}.semantic-node .account-toolbar button{transform:rotate(var(--repair-icon-angle,0deg))}.semantic-node.selected .account-toolbar button{color:var(--demo-text)}@media(hover:hover){.semantic-node .account-toolbar button:hover{background:var(--surface-4)}}
.semantic-node.shape-circle .live-border-mount,.semantic-node.shape-diamond .live-border-mount,.semantic-node.shape-capsule .live-border-mount{display:block}.semantic-node.shape-circle .workflow-drag-handle,.semantic-node.shape-diamond .workflow-drag-handle,.semantic-node.shape-capsule .workflow-drag-handle{border:0;background:transparent!important}.semantic-node.shape-diamond .workflow-drag-handle:before{display:none}.semantic-node .workflow-drag-handle{margin-inline:auto}.semantic-node.shape-circle .account-card,.semantic-node.shape-diamond .account-card{height:100%;display:flex;flex-direction:column;justify-content:center}.semantic-node.route-muted{opacity:1}.semantic-node.route-muted .card-body{opacity:.58}.semantic-node.route-active .workflow-drag-handle{box-shadow:none}
.repair-arrow{fill:none;stroke:var(--demo-border);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.extracted-edge[data-kind="data"]{stroke:var(--demo-border)}
.semantic-node[data-collapsed="true"] .account-card{min-height:0!important;padding:20px 24px!important}.semantic-node.shape-circle[data-collapsed="true"] .account-card{padding:26px!important}.semantic-node.shape-diamond[data-collapsed="true"] .account-card{padding:48px!important}.semantic-node.pentagon-card[data-collapsed="true"] .account-card{height:100%;padding:50px!important}.semantic-node[data-collapsed="true"] .account-card h2{margin-bottom:0}.semantic-node[data-collapsed="true"] .card-heading{margin-bottom:8px}.semantic-node .account-card[style*="--motion-padding"]{padding:var(--motion-padding)!important}.semantic-node .account-card[style*="--motion-title-gap"] h2{margin-bottom:var(--motion-title-gap)!important}.semantic-node .account-card[style*="--motion-heading-gap"] .card-heading{margin-bottom:var(--motion-heading-gap)!important}
.rule-link{display:block;margin:0 auto 3px;padding:0;border:0;border-bottom:1px dotted var(--demo-accent);background:transparent;color:var(--demo-text);font:inherit;cursor:pointer}.rule-dialog{max-width:440px;width:calc(100% - 48px);box-sizing:border-box;background:var(--demo-panel);color:var(--demo-text);border:1px solid var(--demo-border);border-radius:16px;padding:30px;font:14px/1.6 var(--demo-font)}.rule-dialog::backdrop{background:var(--demo-border)}.rule-dialog h2{font-size:22px;margin:0 30px 16px 0}.dialog-close{position:absolute;right:14px;top:14px;width:30px;height:30px;border:0;background:transparent;color:var(--demo-text);display:flex;align-items:center;justify-content:center}
@media(max-width:1000px){.process-nav .shape-legend{margin-left:0}.demo-footer{grid-template-columns:1fr auto}}
@media(max-width:700px){.demo-footer{grid-template-columns:1fr}.process-nav .shape-legend{width:100%}}
@media(prefers-reduced-motion:reduce){.semantic-node .account-toolbar{transition-duration:0s}}

:root{--repair-selected-icon:#fff}.semantic-node.selected .account-toolbar button{color:var(--repair-selected-icon)}
html[data-variant="ours"] .semantic-node .account-card[style*="--motion-padding"]{padding:var(--motion-padding)!important}
.semantic-node.shape-capsule .workflow-drag-handle,.semantic-node.shape-circle .workflow-drag-handle{padding:1px}
/* 12 November, second recording. Toolbar and annotations on the canvas. */
.demo-header .process-nav { padding:0; border:0; background:transparent; margin-right:auto }
body > .shape-legend { position:absolute; top:var(--header-height); right:0; z-index:10; pointer-events:none; background:transparent; border:0; padding:14px 28px; gap:12px }
body > .demo-footer { position:absolute; inset:auto 0 0; background:transparent; pointer-events:none; border:0 }
.demo-footer .demo-zoom { pointer-events:auto }
.demo-footer .demo-zoom button,.demo-footer .demo-zoom output { background:var(--demo-bg) }
.view-switch { display:flex; border:1px solid var(--demo-border); border-radius:99px; padding:3px }
.demo-actions .view-switch button { display:grid; place-items:center; padding:6px 9px; border:1px solid transparent }
.demo-actions .view-switch button[aria-pressed=true] { background:var(--demo-panel); border-color:var(--demo-border) }
.role-lanes { pointer-events:none }
.role-lane { position:absolute; left:0; width:3270px; box-sizing:border-box; border:1.5px dashed var(--demo-accent); border-radius:10px }
.role-lane span { position:absolute; top:12px; left:22px; font:500 20px var(--demo-font); color:var(--demo-accent) }
.branch-badge rect { fill:var(--demo-bg); stroke:var(--demo-border) }
html[data-variant="ours"] .semantic-node.selected .account-toolbar button { color:var(--repair-selected-icon) }
@media(hover:hover) { html[data-variant="ours"] .semantic-node.selected .account-toolbar button:hover { background:#484848 } }
html[data-variant="ours"] .semantic-node:is(.shape-card,.shape-human)[data-collapsed=true] .account-card { padding:24px!important }
.semantic-node:is(.shape-card,.shape-human)[data-collapsed=true] .card-heading { margin-bottom:10px }
@media(max-width:700px) { .demo-header .process-nav nav { width:auto } body > .shape-legend { padding:6px 12px; justify-content:flex-end; flex-wrap:wrap } }

.demo-actions { margin-left:auto }
@media(min-width:1250px) and (max-width:1650px) { .demo-header {gap:10px;padding-inline:20px} .demo-header .process-nav {gap:8px} .demo-header .process-nav a {padding-inline:9px} .demo-header .process-nav select {max-width:195px} .demo-header .demo-actions button {padding-inline:9px} }
:root { --menu-selected-fill:#373737 }
/* Focus follows the visible silhouette of the node. */
html[data-variant="ours"] .semantic-node:focus { outline:none }
.semantic-node:focus-visible .live-border-mount { --border-1:var(--text-secondary) }
@media (hover:hover) {
  .semantic-node:hover .live-border-mount { --border-1:var(--text-secondary) }
}
.demo-header h1 { margin-bottom:0 }
/* Lane titles retain their contrast; only the dashed stroke is subdued. */
.role-lane { border-color:color-mix(in srgb,var(--demo-accent) 10%,transparent) }
html[data-variant="ours"] .semantic-node .account-toolbar button { color:var(--repair-selected-icon) }
html[data-variant="ours"] .semantic-node .account-toolbar svg { stroke:currentColor }
.node-inspector { position:fixed; z-index:2050; top:var(--header-height,0px); right:0; bottom:0; width:min(350px,100%); box-sizing:border-box; overflow:auto; background:var(--demo-bg); color:var(--demo-text); border-left:1px solid var(--studio-line); padding:24px; font:14px/1.5 var(--demo-font) }
.node-inspector[hidden] { display:none }
.node-inspector header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:20px }
.node-inspector h2 { margin:4px 0 0; font-size:22px; line-height:1.18 }
.node-inspector small { color:var(--demo-accent); font-size:12px }
.node-inspector header button { flex:none; width:32px; height:32px; border:1px solid var(--demo-border); border-radius:50%; color:inherit; background:var(--demo-panel); font-size:20px; cursor:pointer }
.inspector-content p { margin:0 0 14px }
.inspector-content h3 { margin:24px 0 6px; font-size:14px }
.inspector-content details { border-bottom:1px solid var(--studio-line); padding:8px 0 }
.inspector-content summary,.inspector-rule { cursor:pointer }
.inspector-content details>div { padding:8px 0 }
.inspector-rule { display:block; border:0; padding:3px 0; background:transparent; color:inherit; font:inherit; text-decoration:underline }
.inspector-content .card-actions,.inspector-content [data-result] { margin:8px 0 }
@media(max-width:650px){ .node-inspector { width:min(320px,90vw); padding:16px } }
@media(min-width:900px) {
  body:has(.node-inspector:not([hidden])) .demo-footer,
  body:has(.node-inspector:not([hidden])) > .shape-legend { right:350px }
}
@media(hover:hover) {
  html[data-variant="ours"] .semantic-node .account-toolbar button:hover { background:#484848 }
}