@layer components{.wf-shell{z-index:70;background:var(--elevated);box-shadow:var(--shadow-lg);animation:wf-shell-in var(--dur-slow) var(--ease-expo);border-radius:22px;flex-direction:column;display:flex;position:fixed;inset:8px;overflow:hidden}.wf-shell[data-ghost]{animation:wf-shell-out var(--dur-fast) var(--ease-exit) forwards;pointer-events:none}@keyframes wf-shell-in{0%{opacity:0;transform:translateY(10px)scale(.985)}}@keyframes wf-shell-out{to{opacity:0;transform:translateY(6px)scale(.99)}}.wf-topbar{border-bottom:1px solid var(--line);flex-shrink:0;align-items:center;gap:10px;min-height:60px;padding:10px 14px;display:flex}.wf-canvas{background-color:var(--panel);background-image:radial-gradient(var(--line-strong) 1px, transparent 1px);background-size:22px 22px;flex:1;min-width:0;position:relative;overflow-y:auto}.wf-column{flex-direction:column;align-items:stretch;width:min(600px,100%);margin:0 auto;padding:36px 16px 120px;display:flex}.wf-node{background:var(--elevated);width:100%;box-shadow:var(--shadow-sm);text-align:start;transition:box-shadow .15s var(--ease-standard), transform .15s var(--ease-standard);border-radius:16px;align-items:flex-start;gap:12px;padding:14px 14px 14px 16px;display:flex;position:relative}.wf-node:hover{box-shadow:0 0 0 1px var(--line-strong), var(--shadow-sm)}.wf-node[data-selected=true]{box-shadow:0 0 0 1.5px var(--accent), var(--shadow-md)}.wf-node[data-issue=true]:not([data-selected=true]){box-shadow:0 0 0 1px color-mix(in oklab, var(--warn) 55%, transparent), var(--shadow-sm)}.wf-node-actions{top:10px;background:var(--elevated);box-shadow:var(--shadow-sm);opacity:0;transition:opacity .12s var(--ease-standard);border-radius:9999px;gap:2px;padding:2px;display:flex;position:absolute;inset-inline-end:10px}.wf-node:hover .wf-node-actions,.wf-node:focus-within .wf-node-actions,.wf-node[data-selected=true] .wf-node-actions{opacity:1}.wf-ico{background:var(--subtle);width:34px;height:34px;color:var(--fg-2);box-shadow:var(--card-ring);border-radius:11px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.wf-ico[data-kind=trigger]{background:var(--ink);color:var(--ink-fg);box-shadow:none}.wf-num{letter-spacing:.02em;text-transform:uppercase;color:var(--fg-subtle);font-variant-numeric:tabular-nums;font-size:11px;font-weight:600}.wf-link{justify-content:center;height:30px;display:flex;position:relative}.wf-link:before{content:"";background:var(--line-strong);width:1px;position:absolute;top:0;bottom:0;left:50%}.wf-plus{z-index:1;background:var(--elevated);width:22px;height:22px;color:var(--fg-muted);box-shadow:var(--shadow-sm);opacity:0;transition:opacity .12s var(--ease-standard), color .12s var(--ease-standard);border-radius:9999px;justify-content:center;align-self:center;align-items:center;display:inline-flex;position:relative}.wf-link:hover .wf-plus,.wf-plus:focus-visible{opacity:1}.wf-plus:hover{color:var(--fg)}.wf-add{background:var(--elevated);height:38px;color:var(--fg);box-shadow:var(--shadow-sm);transition:box-shadow .15s var(--ease-standard);border-radius:9999px;align-self:center;align-items:center;gap:8px;padding:0 16px;font-size:14px;font-weight:500;display:inline-flex}.wf-add:hover{box-shadow:0 0 0 1px var(--line-strong), var(--shadow-sm)}.wf-add[data-active=true]{box-shadow:0 0 0 1.5px var(--accent), var(--shadow-sm)}.wf-end{color:var(--fg-subtle);align-self:center;margin-top:10px;font-size:12px}.wf-lanes{border-inline-start:1px dashed var(--line-strong);flex-direction:column;gap:10px;margin:0 0 0 16px;padding:10px 0 2px 18px;display:flex}.wf-lane-head{background:var(--elevated);max-width:100%;color:var(--fg-2);box-shadow:var(--shadow-sm);border-radius:9999px;align-self:flex-start;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:500;display:inline-flex}.wf-lane-head[data-selected=true]{box-shadow:0 0 0 1.5px var(--accent), var(--shadow-sm)}.wf-side{border-inline-start:1px solid var(--line);background:var(--elevated);width:440px;animation:m-fade-in var(--dur-fast) var(--ease-standard);flex-direction:column;flex-shrink:0;display:flex}.wf-side-slot{width:440px;animation:m-slot-in var(--dur-slow) var(--ease-fluid);flex-shrink:0;display:flex;overflow:clip}.wf-side-slot[data-state=closed]{animation:m-slot-out var(--dur-base) var(--ease-fluid) forwards}.wf-side-slot[data-state=closed]>.wf-side{animation:m-fade-out var(--dur-base) var(--ease-exit) forwards}.wf-side-head{border-bottom:1px solid var(--line);align-items:flex-start;gap:10px;padding:18px 18px 14px;display:flex}.wf-side-body{flex-direction:column;flex:1;gap:18px;padding:18px;display:flex;overflow-y:auto}.wf-label{color:var(--fg);font-size:13px;font-weight:500}.wf-hint{color:var(--fg-muted);font-size:12px;line-height:17px}.wf-box{background:var(--panel);box-shadow:var(--card-ring);border-radius:14px;flex-direction:column;gap:10px;padding:12px;display:flex}.wf-text{background:var(--canvas);width:100%;min-height:44px;color:var(--fg);white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:inset 0 0 0 1px var(--line-strong);transition:box-shadow .15s var(--ease-standard);border-radius:12px;outline:none;padding:10px 12px;font-size:14px;line-height:24px}.wf-text[data-multiline=true]{min-height:92px}.wf-text:focus{box-shadow:inset 0 0 0 1.5px var(--ink)}.wf-text:empty:before{content:attr(data-placeholder);color:var(--fg-subtle);pointer-events:none}.wf-chip{background:var(--accent-soft);max-width:100%;color:var(--fg);vertical-align:baseline;white-space:nowrap;box-shadow:inset 0 0 0 .5px color-mix(in oklab, var(--accent) 40%, transparent);-webkit-user-select:all;user-select:all;cursor:default;border-radius:9999px;align-items:center;gap:4px;margin:0 1px;padding:0 8px;font-size:12.5px;font-weight:500;line-height:20px;display:inline-flex}.wf-chip[data-broken=true]{background:var(--danger-soft);color:var(--danger);box-shadow:none}.wf-var-btn{height:26px;color:var(--fg-muted);box-shadow:inset 0 0 0 1px var(--line-strong);transition:color .12s var(--ease-standard), background-color .12s var(--ease-standard);border-radius:9999px;align-items:center;gap:5px;padding:0 10px;font-size:12px;display:inline-flex}.wf-var-btn:hover,.wf-var-btn[data-state=open]{color:var(--fg);background:var(--hover)}.wf-pick{text-align:start;width:100%;transition:background-color .12s var(--ease-standard);border-radius:12px;align-items:center;gap:10px;padding:9px 10px;display:flex}.wf-pick:hover,.wf-pick[data-active=true]{background:var(--hover)}.wf-option{background:var(--elevated);text-align:start;box-shadow:var(--shadow-sm);transition:box-shadow .15s var(--ease-standard);border-radius:16px;align-items:flex-start;gap:12px;padding:14px;display:flex}.wf-option:hover{box-shadow:0 0 0 1px var(--line-strong), var(--shadow-sm)}.wf-option[aria-pressed=true]{box-shadow:0 0 0 1.5px var(--accent), var(--shadow-sm)}.wf-token{background:var(--subtle);height:28px;box-shadow:var(--card-ring);border-radius:9999px;align-items:center;gap:6px;padding:0 6px 0 10px;font-size:13px;display:inline-flex}.wf-seg{flex-wrap:wrap;gap:4px;display:inline-flex}.wf-seg>button{min-width:40px;height:30px;color:var(--fg-muted);box-shadow:inset 0 0 0 1px var(--line-strong);transition:background-color .12s var(--ease-standard), color .12s var(--ease-standard);border-radius:9999px;padding:0 11px;font-size:13px}.wf-seg>button[aria-pressed=true]{background:var(--ink);color:var(--ink-fg);box-shadow:none}.wf-pill{white-space:nowrap;background:var(--subtle);height:22px;color:var(--fg-muted);border-radius:9999px;align-items:center;gap:6px;padding:0 9px;font-size:11.5px;font-weight:500;display:inline-flex}.wf-pill:before{content:"";opacity:.85;background:currentColor;border-radius:9999px;width:6px;height:6px}.wf-pill[data-tone=ok]{background:color-mix(in oklab, var(--presence) 14%, transparent);color:var(--presence)}.wf-pill[data-tone=warn]{background:var(--warn-soft);color:var(--warn)}.wf-pill[data-tone=danger]{background:var(--danger-soft);color:var(--danger)}.wf-pill[data-tone=live]{background:var(--accent-soft);color:var(--fg)}.wf-tile{background:var(--subtle);box-shadow:var(--card-ring);border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;line-height:1;display:flex}.wf-card{background:var(--panel);max-width:440px;box-shadow:var(--card-ring);border-radius:16px;align-items:center;gap:12px;margin-top:8px;padding:12px 12px 12px 14px;display:flex}.wf-issue{color:var(--warn);align-items:flex-start;gap:6px;font-size:12px;line-height:17px;display:flex}.wf-log{flex-direction:column;gap:0;display:flex}.wf-log>li{gap:10px;padding:0 0 12px;display:flex;position:relative}.wf-log>li:not(:last-child):after{content:"";top:20px;bottom:0;background:var(--line-strong);width:1px;position:absolute;inset-inline-start:8.5px}.wf-dot{z-index:1;background:var(--elevated);width:18px;height:18px;box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:9999px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.wf-output{background:var(--subtle);max-height:120px;font-family:var(--font-mono);color:var(--fg-muted);white-space:pre-wrap;overflow-wrap:anywhere;border-radius:9px;margin-top:4px;padding:6px 8px;font-size:11.5px;line-height:16px;overflow:auto}@media (max-width:860px){.wf-side{z-index:5;border-inline-start:0;width:100%;position:absolute;inset:0}.wf-side-slot{display:contents}.wf-side-slot>.wf-side{animation:m-panel-in var(--dur-slow) var(--ease-expo)}.wf-side-slot[data-state=closed]>.wf-side{animation:m-panel-out var(--dur-base) var(--ease-exit) forwards}}@media (prefers-reduced-motion:reduce){.wf-shell,.wf-side,.wf-side-slot>.wf-side{animation-name:m-fade-in!important;animation-duration:var(--dur-fast)!important}.wf-shell[data-ghost],.wf-side-slot[data-state=closed]>.wf-side{animation-name:m-fade-out!important;animation-duration:.12s!important}.wf-side-slot{animation:none!important}.wf-side-slot[data-state=closed]{width:0}}@media (max-width:640px),(hover:none){.wf-node-actions{display:none}}@media (max-width:640px){.wf-shell{border-radius:0;inset:0}}}
