/* Workin'Flows — shared workflow-canvas (node graph) v2. Single-source silnik = /js/wf-canvas.js. */
/* Per-strona: inline `:root{--scene:url(/img/scenes/X.webp);--scrim-angle:Ndeg}` + `window.WFC` config. */
:root{--carbon:#0B0A09;--cool:#E7EAEC;--koral:#FF4D1F;--yellow:#FFC400;--soft:rgba(231,234,236,.56);--line:rgba(231,234,236,.13);--scrim-angle:100deg}
*{margin:0;box-sizing:border-box}html,body{height:100%}
body{background:#0B0A09;color:var(--cool);font-family:'Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-top:0}
.stage{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:66px 24px 30px;overflow:hidden}
.stage::before{content:"";position:absolute;inset:0;z-index:0;background:var(--scene) center/cover no-repeat}
.stage::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(var(--scrim-angle),rgba(11,10,9,.93) 0%,rgba(11,10,9,.82) 42%,rgba(11,10,9,.66) 72%,rgba(11,10,9,.5) 100%),radial-gradient(rgba(231,234,236,.05) 1px,transparent 1px) 0 0/30px 30px}
.canvas{position:relative;z-index:1;width:1240px;max-width:100%;flex:0 0 auto}
.glow{position:absolute;z-index:0;width:620px;height:480px;pointer-events:none;background:radial-gradient(closest-side,rgba(255,77,31,.13),transparent 72%);filter:blur(8px)}
.wires{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible}
.wires path{fill:none;stroke:var(--line);stroke-width:1.6;transition:stroke .3s}
.wires path.live{stroke:url(#wg);stroke-width:2}
.jct{fill:#0B0A09;stroke:var(--line);stroke-width:1.5}.pkt{fill:var(--koral);filter:drop-shadow(0 0 7px rgba(255,77,31,1))}
.nd{position:absolute;z-index:2;width:212px;background:linear-gradient(180deg,#13100D,#0E0C0A);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;transition:transform .28s cubic-bezier(.25,.1,.25,1),border-color .28s,box-shadow .28s}
.nd:hover{border-color:rgba(255,77,31,.5);box-shadow:0 16px 44px -24px rgba(255,77,31,.5)}
.nd.hot{border-color:rgba(255,77,31,.72);box-shadow:0 0 0 1px rgba(255,77,31,.45),0 14px 40px -24px rgba(255,77,31,.6)}
.nd.drag{cursor:grabbing;transition:none;z-index:20;box-shadow:0 22px 56px -22px rgba(255,77,31,.6),0 0 0 1px rgba(255,77,31,.55)}
.nh{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--line);background:rgba(231,234,236,.018)}
.nh .lbl{font-family:'Chakra Petch',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.nd.hot .nh .lbl{color:var(--koral)}.grip{display:flex;gap:2px}.grip i{width:2px;height:2px;border-radius:50%;background:rgba(231,234,236,.3)}
.led{width:6px;height:6px;border-radius:50%;background:rgba(231,234,236,.2);transition:.25s;margin-left:8px}
.nd.hot .led{background:var(--koral);box-shadow:0 0 9px 1px rgba(255,77,31,.9)}
.nb{padding:11px 13px 12px;display:flex;align-items:flex-start;gap:11px}
.ic{font-family:'Chakra Petch',monospace;font-weight:600;font-size:15px;color:var(--koral);line-height:1;flex:0 0 auto;margin-top:1px;width:22px}
.ntx{min-width:0}.nt{font-family:'Archivo';font-weight:700;font-size:13.5px;line-height:1.18;margin-bottom:3px;text-wrap:balance}
.ns{font-size:11px;color:var(--soft);line-height:1.35;text-wrap:balance}
.nd.entry{width:452px;background:linear-gradient(155deg,#1a130d,#0E0C0A 72%);border-color:rgba(255,77,31,.3)}
.entry .nb{padding:24px 28px 26px;display:block}
.entry .kick{font-family:'Chakra Petch',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--koral);display:flex;align-items:center;gap:11px;margin-bottom:14px}
.entry .kick::before{content:"";width:28px;height:2px;background:linear-gradient(90deg,var(--koral),var(--yellow))}
.entry h1{font-family:'Unbounded',system-ui,sans-serif;font-weight:700;font-size:30px;line-height:1.12;letter-spacing:-.02em;margin-bottom:13px;text-wrap:balance}
.entry h1 em{font-style:normal;background:linear-gradient(118deg,var(--koral),var(--yellow));-webkit-background-clip:text;background-clip:text;color:transparent}
.entry .lede{color:var(--soft);font-size:13px;line-height:1.5;margin-bottom:19px;text-wrap:balance}
.entry .cta{display:inline-flex;align-items:center;gap:7px;font-family:'Archivo';font-weight:600;font-size:13.5px;background:linear-gradient(135deg,var(--koral),var(--yellow));color:#0B0A09;padding:11px 20px;border-radius:7px;text-decoration:none;cursor:pointer}
.entry .ent-flex{display:flex;gap:18px;align-items:flex-start}
.entry .ent-ph{width:132px;height:132px;flex:0 0 auto;object-fit:cover;border-radius:8px;border:1px solid rgba(255,77,31,.35)}
.entry .ent-tx{min-width:0}
.hud{position:absolute;z-index:3;left:2px;bottom:6px;display:flex;align-items:center;gap:8px;font-family:'Chakra Petch',monospace;font-size:10.5px;letter-spacing:.12em;color:var(--soft);text-transform:uppercase}
.hud .d{width:6px;height:6px;border-radius:50%;background:var(--koral);box-shadow:0 0 9px rgba(255,77,31,.9);animation:bl 1.7s infinite}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.32}}
.hint{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:99;font-family:'Chakra Petch',monospace;font-size:10.5px;letter-spacing:.12em;color:var(--soft);text-transform:uppercase;background:rgba(11,10,9,.7);padding:6px 14px;border:1px solid var(--line);border-radius:20px}.hint b{color:var(--koral)}
@media(prefers-reduced-motion:reduce){.nd,.wires path{transition:none}.hud .d{animation:none}}
@media(max-width:900px){
  .stage{min-height:auto;display:block;padding:78px 18px 70px}
  .stage::before{background-position:center top}
  .canvas{width:100%;max-width:520px;margin:0 auto;height:auto!important;display:flex;flex-direction:column;gap:14px}
  .canvas>.nd{position:static!important;width:100%!important;left:auto!important;top:auto!important;height:auto!important;cursor:default}
  .wires,.glow,.hud,.hint{display:none}.entry .nb{display:block}.entry h1{font-size:clamp(20px,7.2vw,34px);overflow-wrap:break-word}.entry .ent-ph{width:96px;height:96px;margin-bottom:14px}
}