/* Scoped adaptation of design/workflow/studio.css tokens, 2026-11-12. */
@font-face{font-family:Roboto;src:url('design-system/Roboto-full.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{--demo-font:Roboto,Arial,sans-serif;--demo-ease:cubic-bezier(.22,1,.36,1);--studio-duration:.3s;--studio-accent:#c9ded3;--studio-line:#ffffff20;--studio-pulse:#eeeeee;--studio-warm:#e8b39b;--studio-lilac:#cbb8f2}
html[data-theme="dark"]{--demo-bg:#0d0d0d;--demo-panel:#171819;--demo-text:#eee;--demo-border:#ffffff20;--demo-accent:#a8aaac;--demo-focus:#d2e6de;--bg:#0d0d0d;--text-primary:#eee;--text-secondary:#a8aaac;--text-muted:#a8aaac;--text-icon:#eee;--surface-2:#202020;--surface-4:#292a2b;--surface-5:#252627;--border-1:#626262;--border:#626262}
html[data-theme="light"]{--studio-line:#1a1a1a24;--studio-pulse:#525252;--studio-accent:#525252}
body,#canvas,.demo-header,.demo-footer{transition:background-color var(--studio-duration) var(--demo-ease),color var(--studio-duration) var(--demo-ease),border-color var(--studio-duration) var(--demo-ease)}
.demo-header{padding:22px 28px;border-bottom:1px solid var(--studio-line);background:var(--demo-bg)}.demo-header h1{font-size:32px;font-weight:500;letter-spacing:-1.6px;line-height:1;margin-bottom:8px}.title-dot{color:var(--studio-accent)}.demo-header p{color:var(--demo-accent);font-size:12px}.demo-actions{gap:6px}.demo-actions button,.demo-zoom button{border-radius:999px;background:transparent;border-color:var(--studio-line);font-size:12px;padding:10px 14px}.demo-footer{background:var(--demo-bg);border-color:var(--studio-line);padding:16px 28px}.demo-footer #help{color:var(--demo-accent);font-size:12px}.theme-switch{position:relative;display:flex;gap:0;border:1px solid var(--demo-border);padding:3px;border-radius:999px;isolation:isolate}.theme-switch button{position:relative;z-index:1;border:0;background:transparent;min-width:66px;font-size:12px;padding:9px 13px}.theme-switch .motion-capsule{position:absolute;z-index:0;border-radius:999px;background:var(--demo-panel);border:1px solid var(--demo-border);pointer-events:none}.theme-switch button.selected{color:var(--demo-text)}.theme-switch button:not(.selected){color:var(--demo-accent)}
html[data-theme="dark"] [data-node] [data-workflow-type-accent]{background:var(--surface-4);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--border-1)}html[data-theme="dark"] [data-node="score"] [data-workflow-type-accent],html[data-theme="dark"] [data-node="route"] [data-workflow-type-accent]{color:var(--studio-warm)}html[data-theme="dark"] [data-node="slack"] [data-workflow-type-accent],html[data-theme="dark"] [data-node="tables"] [data-workflow-type-accent]{color:var(--studio-lilac)}
.extracted-node .workflow-drag-handle,.extracted-node.selected .workflow-drag-handle{filter:none;transition:none}.extracted-node.selected{outline:none;outline-offset:3px;border-radius:16px}.extracted-edge{stroke:var(--demo-border);stroke-width:1.5}.pulse-head{fill:var(--studio-pulse)}.pulse-tail{fill:var(--studio-pulse);opacity:.2}.pulse-echo{fill:none;stroke:var(--studio-pulse);stroke-width:1;opacity:.45}
@media(hover:hover){.extracted-node:hover .workflow-drag-handle{filter:none}.demo-actions button:hover,.demo-zoom button:hover{background:var(--demo-panel)}}
@media(max-width:700px){.demo-header{padding:16px}.demo-header h1{font-size:28px}.demo-actions{gap:6px}.demo-actions button{padding:9px 12px}.demo-footer{padding:12px 16px}.demo-footer #help{font-size:11px}.theme-switch button{min-width:60px}}
@media(prefers-reduced-motion:reduce){:root{--studio-duration:0s}.pulse-layer{display:none}.extracted-node .workflow-drag-handle{transition:none}}
.live-border-mount{position:absolute;inset:0;z-index:0;pointer-events:none}.extracted-node:not(.selected) [data-workflow-action-bar-swell],.extracted-node:not(.selected) [data-workflow-action-bar-bridge]{visibility:visible}.extracted-node .workflow-drag-handle{filter:none;transition:none}