/* The canonical article instruments, opened into a studio stage.
   Graph topology, measured edges, controls and factual labels remain the core's. */
.studio-flow-scene {
  --studio-scene-ease: cubic-bezier(.18,.75,.25,1);
  --font-sans: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display: var(--font-sans);
  position: relative;
  isolation: isolate;
  min-width: 0;
  width: 100%;
  color: var(--fg);
}
.studio-flow-scene .ar-flow-figure { margin: clamp(44px,7vw,96px) 0; }
.studio-flow-scene .ar-flow { border: 0; border-radius: 0; background: none; box-shadow: none; }
.studio-flow-scene .ar-flow-head { padding: 0 0 clamp(28px,4vw,50px); }
.studio-flow-scene .ar-flow-topline { margin-bottom: 26px; }
.studio-flow-scene .ar-flow-title {
  max-width: 19ch;
  font-size: clamp(2.1rem,4.6vw,4.25rem);
  font-weight: 760;
  line-height: 1.01;
  letter-spacing: -.05em;
  margin-bottom: 22px;
}
.studio-flow-scene .ar-flow-intro { max-width: 65ch; font-size: clamp(.94rem,1.2vw,1.07rem); line-height: 1.75; }
.studio-flow-scene .ar-flow-eyebrow { font-size: 10px; letter-spacing: .13em; }
.studio-flow-scene .ar-flow-field {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  rotate: none;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
/* One static registration plane; the real graph supplies visual depth. */
.studio-flow-scene .ar-flow-field::before { display: none; }
.studio-flow-scene .ar-flow-field::after {
  inset: 8px 0;
  opacity: .65;
  background: linear-gradient(var(--green),var(--green)) left top/36px 1px no-repeat,
    linear-gradient(var(--green),var(--green)) left top/1px 36px no-repeat,
    linear-gradient(var(--blue),var(--blue)) right bottom/36px 1px no-repeat,
    linear-gradient(var(--blue),var(--blue)) right bottom/1px 36px no-repeat;
}
.studio-flow-scene .ar-flow-map { padding-block: clamp(35px,4vw,60px); }
.studio-flow-scene .ar-flow-node { transition: border-color 400ms,background 400ms,box-shadow 400ms,opacity 400ms; }
.studio-flow-scene .ar-flow-node.is-active {
  box-shadow: inset 2px 0 color-mix(in srgb,var(--node-accent) 85%,transparent),0 10px 32px color-mix(in srgb,var(--node-accent) 9%,transparent);
}
.studio-flow-scene .ar-flow-node.is-related { border-color: color-mix(in srgb,var(--node-accent) 52%,var(--line)); }
.studio-flow-scene .ar-flow-node.is-selected { outline: 2px solid var(--node-accent); outline-offset: 4px; }
.studio-flow-scene .ar-flow-node .ar-node-title { position: relative; }
.studio-flow-scene .ar-flow-node.is-active .ar-node-title { color: var(--node-accent); }
.studio-flow-scene .ar-flow-node.is-active .ar-node-icon { filter: drop-shadow(0 0 9px color-mix(in srgb,var(--node-accent) 40%,transparent)); }
.studio-flow-scene .ar-node-indicator { transition: opacity 400ms,box-shadow 400ms; }
.studio-flow-scene .ar-node-port { transition: background 400ms,box-shadow 400ms; }
/* Spatial graph satellites stay open. Only the central project and functional pipeline nodes contain content. */
.studio-flow-scene .ar-flow[data-layout="graph"] .ar-flow-node { border-radius: 0; box-shadow: none; background: transparent; }
.studio-flow-scene .ar-flow[data-layout="graph"] [data-node="project"] { border-radius: 50%; }
.studio-flow-scene .ar-flow[data-layout="graph"] .ar-flow-node.is-active .ar-node-title { background: var(--bg); }
.studio-flow-scene .ar-flow[data-layout="graph"] .ar-flow-node.is-related .ar-node-title { color: var(--fg); }
.studio-flow-scene .ar-flow-orbit { opacity: .8; }
.studio-flow-scene .ar-flow-orbit b { border-style: solid; border-color: color-mix(in srgb,var(--gold) 24%,transparent); }
.studio-flow-scene .ar-map-meta { padding-top: 20px; font-size: 9px; }
.studio-flow-scene .ar-map-legend { padding-top: 12px; padding-bottom: 22px; }
.studio-flow-scene .ar-flow.is-ready .ar-flow-controlbar { padding-top: 28px; gap: 16px; border-top: 1px solid var(--line); }
.studio-flow-scene .ar-flow-current { font-size: clamp(1.2rem,2vw,1.6rem); }
.studio-flow-scene .ar-flow-explanation { max-width: 77ch; font-size: 15px; line-height: 1.75; }
.studio-flow-scene .ar-flow-step-track { gap: 8px; }
.studio-flow-scene .ar-flow-step-track button > span { height: 2px; }
.studio-flow-scene .ar-flow-step-track button[aria-current="step"] > span { height: 3px; }
.studio-flow-scene .ar-flow-transcript { margin-top: 12px; }
.studio-flow-scene .ar-flow-figure > figcaption { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 15px; margin-top: 22px; color: var(--muted); font: .72rem/1.7 var(--font-sans); }
.studio-flow-scene .sb-figure-num { color: var(--green); font: 600 .64rem/1.8 var(--font-mono); white-space: nowrap; }

/* The map plane stays upright; motion belongs to its nodes and connections. */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .studio-flow-scene .ar-flow-node.is-active .ar-node-icon::before { animation: studio-icon-signal 2400ms ease-in-out infinite; animation-play-state: paused; }
  .studio-flow-scene.is-scene-running .ar-flow-node.is-active .ar-node-icon::before { animation-play-state: running; }
  .studio-flow-scene .ar-flow-orbit b { animation: studio-orbit-trace 28s linear infinite; animation-play-state: paused; }
  .studio-flow-scene.is-scene-running .ar-flow-orbit b { animation-play-state: running; }
  .studio-flow-scene .ar-flow-node.is-active .ar-node-port { animation: studio-port-signal 2400ms ease-in-out infinite; animation-play-state: paused; }
  .studio-flow-scene.is-scene-running .ar-flow-node.is-active .ar-node-port { animation-play-state: running; }
}
@keyframes studio-icon-signal {
  0%,100% { filter: brightness(1); }
  45% { filter: brightness(1.45) drop-shadow(0 0 3px currentColor); }
}
@keyframes studio-orbit-trace { to { rotate: 360deg; } }
@keyframes studio-port-signal {
  0%,100% { box-shadow: 0 0 0 0 transparent; }
  45% { box-shadow: 0 0 0 5px color-mix(in srgb,var(--node-accent) 12%,transparent); }
}

/* The core dialogs receive sb-page from the scoped enhancement to retain the exact node layouts. */
.studio-native-flow-page :is(.ar-flow-modal,.ar-node-dialog) {
  --font-sans: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display: var(--font-sans);
  font-family: var(--font-sans);
  letter-spacing: 0;
}
.studio-native-flow-page :is(.ar-flow-modal[open],.ar-node-dialog[open]) { animation: studio-instrument-open 550ms var(--studio-scene-ease,cubic-bezier(.18,.75,.25,1)) both; }
.studio-native-flow-page .ar-flow-modal { border-radius: 3px; }
.studio-native-flow-page .ar-node-dialog { border-radius: 3px; }
.studio-native-flow-page :is(.ar-node-dialog-head button,.ar-flow-modal-bar button) { font-family: var(--font-mono); }
.studio-native-flow-page .ar-flow-modal .ar-flow-field { transform: none; }
@keyframes studio-instrument-open {
  from { opacity: .5; clip-path: inset(8% 0 0); translate: 0 26px; }
  to { opacity: 1; clip-path: inset(0); translate: 0 0; }
}

/* Warm light mode keeps the article's proven label/semantic colour contrast. */
:root[data-theme-mode="light"] .studio-flow-scene .ar-flow-field {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
:root[data-theme-mode="light"] .studio-flow-scene .ar-flow[data-layout="graph"] .ar-flow-node:not([data-node="project"]) { background: transparent; box-shadow: none; }
:root[data-theme-mode="light"] .studio-flow-scene .ar-flow[data-layout="graph"] .ar-node-title { background: var(--bg); }

@media (max-width: 820px) {
  .studio-flow-scene .ar-flow-figure { margin-block: 38px 48px; }
  .studio-flow-scene .ar-flow-title { font-size: clamp(1.95rem,5.5vw,3rem); max-width: 21ch; }
  .studio-flow-scene .ar-flow-head { padding-bottom: 28px; }
  .studio-flow-scene .ar-flow-map { padding-block: 32px; }
  .studio-flow-scene .ar-flow-field::after { background-size: 20px 1px,1px 20px,20px 1px,1px 20px; }
  .studio-flow-scene .ar-flow-explanation { font-size: 14px; }
}
@media (max-width: 560px) {
  .studio-flow-scene .ar-flow-title { font-size: clamp(1.8rem,7.7vw,2.5rem); letter-spacing: -.045em; }
  .studio-flow-scene .ar-flow-intro { font-size: 13px; }
  .studio-flow-scene .ar-flow-map { padding-block: 25px; }
  .studio-flow-scene .ar-flow-topline { gap: 10px; }
  .studio-flow-scene .ar-flow-figure > figcaption { gap: 10px; font-size: .67rem; }
  .studio-flow-scene .ar-map-meta { padding-top: 17px; }
  .studio-flow-scene .ar-flow.is-ready .ar-flow-controlbar { padding-top: 22px; gap: 12px; }
  .studio-flow-scene .ar-flow-current { font-size: 18px; }
  .studio-flow-scene .ar-flow-explanation { font-size: 13px; }
  .studio-native-flow-page .ar-flow-modal { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-flow-scene :is(.ar-flow-field,.ar-flow-field::before,.ar-flow-orbit) { transform: none; }
  .studio-flow-scene *, .studio-flow-scene *::before, .studio-flow-scene *::after { animation: none !important; transition: none !important; }
  .studio-native-flow-page :is(.ar-flow-modal[open],.ar-node-dialog[open]) { animation: none; }
}
@media print {
  .studio-flow-scene .ar-flow-field, .studio-flow-scene .ar-flow-field::before { transform: none !important; }
  .studio-flow-scene *, .studio-flow-scene *::before, .studio-flow-scene *::after { animation: none !important; transition: none !important; }
  .studio-native-flow-page :is(.ar-flow-modal,.ar-node-dialog) { display: none !important; }
}

/* One instrument: the native route is its context, with a temporary node lens. */
.studio-system-map {
  --instrument-accent:var(--public-scene-accent,var(--scene-accent,var(--green)));
  --instrument-grid:color-mix(in srgb,var(--instrument-accent),transparent 94%);
}
.studio-system-map .ar-flow-field {
  border-top:1px solid var(--line);
  border-bottom:0;
  background:linear-gradient(var(--instrument-grid) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,var(--instrument-grid) 1px,transparent 1px) 0 0/48px 48px;
}
.studio-system-map .ar-map-meta {align-items:center;min-height:48px;padding:16px 18px;font-size:9px;letter-spacing:.12em;}
.studio-system-map .ar-map-meta > span:first-child {color:var(--instrument-accent);}
.studio-system-map .ar-flow-field::after {
  inset:0;opacity:.8;
  background:linear-gradient(var(--green),var(--green)) left top/36px 1px no-repeat,
    linear-gradient(var(--green),var(--green)) left top/1px 36px no-repeat;
}
.studio-system-map .ar-flow-map {isolation:isolate;}
.studio-system-map .ar-map-legend {padding-inline:18px;}
.studio-system-map.ar-flow.is-ready .ar-flow-controlbar {
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:start;gap:12px 24px;margin:0;padding:20px 18px 10px;
  border-top:1px solid var(--line);
}
.studio-system-map .ar-flow-guide-meta {grid-column:1/-1;grid-row:1;}
.studio-system-map .ar-flow-guide-head {display:contents;}
.studio-system-map .ar-flow-current {grid-column:1;grid-row:2;}
.studio-system-map .ar-flow-explanation {grid-column:1;grid-row:3;}
.studio-system-map.ar-flow:not(.is-explaining) .ar-flow-explanation {min-height:3.4em;}
.studio-system-map .ar-flow-steppers {grid-column:2;grid-row:2/4;align-self:center;}
.studio-system-map .ar-flow-step-track {grid-column:1/-1;grid-row:4;}
.studio-system-map .ar-flow-transcript {position:relative;margin-top:0;padding-inline:18px;border-bottom:1px solid var(--line);}
.studio-system-map .ar-flow-transcript::after {
  content:"";position:absolute;right:0;bottom:0;width:36px;height:36px;pointer-events:none;
  background:linear-gradient(var(--blue),var(--blue)) right bottom/36px 1px no-repeat,
    linear-gradient(var(--blue),var(--blue)) right bottom/1px 36px no-repeat;
}
/* Native nodes are the direct detail action; the generic guide row repeats it. */
.studio-system-map .ar-flow-guide-links {display:none;}
.studio-system-map .ar-flow-node {transition:opacity 260ms ease,border-color 260ms ease,background-color 260ms ease,box-shadow 260ms ease;}
.studio-system-map .ar-flow-node::after,
.studio-system-map[data-layout="graph"] .ar-flow-node::after {
  content:"";display:block;position:absolute;inset:-5px;pointer-events:none;opacity:0;
  background:linear-gradient(var(--instrument-accent),var(--instrument-accent)) left top/10px 1px no-repeat,
    linear-gradient(var(--instrument-accent),var(--instrument-accent)) left top/1px 10px no-repeat,
    linear-gradient(var(--instrument-accent),var(--instrument-accent)) right bottom/10px 1px no-repeat,
    linear-gradient(var(--instrument-accent),var(--instrument-accent)) right bottom/1px 10px no-repeat;
  transition:opacity 220ms ease;
}
.studio-system-map .ar-flow-node:is(.is-map-target,.is-selected)::after {opacity:1;}
.studio-system-map .ar-flow-node.is-map-target {outline:1px solid var(--instrument-accent);outline-offset:5px;}
.studio-system-map .ar-flow-node.is-map-target .ar-node-title {color:var(--instrument-accent);}
.studio-system-map .ar-flow-node.is-map-connected .ar-node-title {color:var(--fg);}
.studio-system-map.is-map-previewing .ar-flow-node.is-map-muted {opacity:1;}
.studio-system-map.is-map-previewing .ar-flow-node.is-map-muted .ar-node-title {color:var(--muted);}
.studio-system-map.is-map-previewing .ar-flow-node.is-map-muted .ar-node-icon {opacity:.5;}
.studio-system-map .ar-wire {transition:opacity 220ms ease,color 220ms ease;}
.studio-system-map .ar-wire :is(.ar-wire-segment,.ar-wire-arrow,.ar-wire-joint) {transition:opacity 220ms ease;}
.studio-system-map.is-map-previewing .ar-wire.is-map-connection {color:var(--instrument-accent);opacity:1;}
.studio-system-map.is-map-previewing .ar-wire.is-map-connection .ar-wire-segment {box-shadow:0 0 7px color-mix(in srgb,var(--instrument-accent),transparent 68%);}
.studio-system-map.is-map-previewing .ar-wire.is-map-connection .ar-wire-label {opacity:1;color:var(--instrument-accent);}
.studio-system-map.is-map-previewing .ar-wire.is-map-muted {opacity:1;}
.studio-system-map.is-map-previewing .ar-wire.is-map-muted :is(.ar-wire-segment,.ar-wire-arrow,.ar-wire-joint) {opacity:.16;}
.studio-system-map.is-map-previewing .ar-wire.is-map-muted .ar-wire-dot {opacity:0;}
.studio-system-map.is-map-previewing .ar-wire.is-map-muted .ar-wire-label {color:var(--muted);}
.studio-system-map .ar-flow-orbit b {border-style:dotted;}
.system-map-readout {
  display:grid;grid-column:1;grid-row:2/4;align-self:start;align-content:start;gap:12px;
  min-width:0;pointer-events:none;z-index:1;color:var(--fg);text-align:left;
}
.system-map-readout[hidden] {display:none;}
.system-map-readout strong {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 clamp(1.2rem,2vw,1.6rem)/1.25 var(--font-display);letter-spacing:-.025em;}
.system-map-readout p {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;color:var(--muted);font:400 15px/1.7 var(--font-sans);}
/* Opacity preserves native route text and geometry without labelling a node as that route. */
.studio-system-map.is-map-previewing :is(.ar-flow-position,.ar-flow-current,.ar-flow-explanation) {opacity:0;}
.studio-native-flow-page .ar-node-dialog {border:1px solid var(--line-strong);border-radius:0;box-shadow:0 0 0 6px color-mix(in srgb,var(--bg),transparent 25%),0 24px 80px var(--shadow);}
.studio-native-flow-page .ar-node-dialog-head {border-bottom-color:var(--line-strong);}
@media(max-width:820px) {
  .system-map-readout p {font-size:14px;}
}
@media(max-width:560px) {
  .studio-system-map .ar-map-meta {padding-inline:10px;letter-spacing:.05em;font-size:8px;}
  .studio-system-map .ar-map-legend {padding-inline:10px;}
  .studio-system-map.ar-flow.is-ready .ar-flow-controlbar {grid-template-columns:minmax(0,1fr);padding:18px 10px 8px;}
  .studio-system-map .ar-flow-steppers {grid-column:1;grid-row:4;justify-self:start;}
  .studio-system-map .ar-flow-step-track {grid-row:5;}
  .studio-system-map .ar-flow-transcript {padding-inline:10px;}
  .system-map-readout strong {font-size:18px;}
  .system-map-readout p {font-size:13px;}
}
@media(prefers-reduced-motion:reduce) {
  .studio-system-map .ar-flow-node,.studio-system-map .ar-flow-node::after,.studio-system-map .ar-wire,.studio-system-map .ar-wire :is(.ar-wire-segment,.ar-wire-arrow,.ar-wire-joint) {transition:none;}
}
@media print {
  .studio-system-map .ar-flow-field {background:none;border:0;}
  .system-map-readout,.studio-system-map .ar-flow-node::after,.studio-system-map .ar-flow-transcript::after {display:none;}
  .studio-system-map.is-map-previewing .ar-flow-node.is-map-muted,.studio-system-map.is-map-previewing .ar-wire.is-map-muted {opacity:1;}
}

:root[data-theme-mode="light"] .studio-system-map {--instrument-accent:color-mix(in srgb,var(--public-scene-accent,var(--scene-accent,var(--green))),#000 58%);}
.studio-system-map .ar-flow-node.is-map-target:focus-visible {outline:2px solid var(--instrument-accent);outline-offset:5px;}