.flow-shell{overflow:hidden;background-color:#101214;background-image:radial-gradient(#303438 1px,transparent 1px);background-size:18px 18px}.flow-meta{margin:-1.2rem -1.2rem 0;padding:1rem 1.2rem;background:#17191b;border-bottom:1px solid #303438}.run{border-radius:5px;background:#ff6d5a;color:#fff;box-shadow:0 2px 8px #0005;min-width:128px;transition:background .2s,transform .2s}.run:hover{background:#ff826f;transform:translateY(-1px)}.run:disabled{cursor:wait;opacity:.85;transform:none}.spinner{display:inline-block;width:10px;height:10px;border:2px solid #fff6;border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.flow{display:flex;align-items:center;gap:42px;overflow-x:auto;padding:42px 24px 52px;margin:0 -1.2rem;scroll-snap-type:x proximity;overscroll-behavior-inline:contain}.n8n-node{flex:0 0 178px;min-height:82px;display:grid;grid-template-columns:48px 1fr;align-items:stretch;padding:0!important;border:1px solid #454a4f!important;border-radius:6px;background:#25282b!important;box-shadow:0 3px 12px #0007;scroll-snap-align:center;transform:none!important;position:relative;transition:border-color .2s,box-shadow .2s,transform .2s}.n8n-node:not(:last-child)::after{content:'➜';position:absolute;left:calc(100% + 8px);top:50%;width:27px;color:#6a7075;font-size:20px;line-height:1;transform:translateY(-50%);text-shadow:-8px 0 0 #3d4246}.n8n-node.done:not(:last-child)::after{color:#65c98d;text-shadow:-8px 0 0 #65c98d}.node-icon{display:flex;align-items:center;justify-content:center;border-radius:5px 0 0 5px;font:700 1.25rem var(--mono);color:#fff;background:#6c737a}.node-copy{padding:.72rem .7rem;min-width:0}.node-title{font-size:.74rem;font-weight:700;gap:.35rem}.node-index{font-size:.56rem;color:#8d949a}.n8n-node small{margin-top:.35rem;font-size:.6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#9ba1a6}.port{position:absolute;top:50%;width:10px;height:10px;border:2px solid #a7adb2;border-radius:50%;background:#101214;transform:translateY(-50%);z-index:2}.input-port{left:-6px}.output-port{right:-6px}
.n8n-node.trigger .node-icon{background:#ff6d5a}.n8n-node.script .node-icon{background:#7b61ff}.n8n-node.voice .node-icon{background:#3b82f6}.n8n-node.avatar .node-icon{background:#ec4899}.n8n-node.visual .node-icon{background:#f59e0b}.n8n-node.motion .node-icon{background:#8b5cf6}.n8n-node.edit .node-icon{background:#14b8a6}.n8n-node.output .node-icon{background:#22a567}.n8n-node.active{border-color:#ff6d5a!important;box-shadow:0 0 0 2px #ff6d5a55,0 5px 20px #0008;transform:translateY(-2px)!important}.n8n-node.active .port{border-color:#ff6d5a}.n8n-node.active small{color:#ff9a8d}.n8n-node.done{border-color:#4e8f69!important}.n8n-node.done .port{border-color:#65c98d}.n8n-node.done small{color:#72d39a}.final-output{background:#17191b;margin:0 -1.2rem -1.2rem;padding:1.2rem;border-top-color:#34383c}.final-output video{max-width:390px;margin:0 auto;border:1px solid #3b4044;border-radius:8px}
@media(max-width:699px){.flow-meta{margin:-1rem -1rem 0;padding:1rem}.flow{display:grid;overflow:visible;gap:38px;padding:30px 14px;margin:0}.n8n-node{width:100%;min-width:0;min-height:76px;grid-template-columns:54px 1fr;scroll-snap-align:none}.n8n-node:not(:last-child)::after{content:'↓';left:50%;top:calc(100% + 8px);width:auto;transform:translateX(-50%);text-shadow:0 -8px 0 #3d4246}.n8n-node.done:not(:last-child)::after{text-shadow:0 -8px 0 #65c98d}.port{left:50%;top:auto;transform:translateX(-50%)}.input-port{top:-6px}.output-port{right:auto;bottom:-6px}.final-output{margin:0 -1rem -1rem;padding:1rem}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}.n8n-node,.run{transition:none}}