@property --gradient-angle{syntax: "<angle>"; inherits: true; initial-value: 0deg;}.agent-workflow{width:100%;height:100vh;background:#0f0f1c;background-image:radial-gradient(circle at 25% 25%,#1a1a2e 0%,transparent 50%),radial-gradient(circle at 75% 75%,#16213e 0%,transparent 50%);position:relative;overflow:hidden}.workflow-canvas{width:100%;height:100%;position:relative;padding:50px}.workflow-node{position:relative;width:160px;min-height:80px;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;z-index:10}.workflow-node:hover{transform:translate(-50%,-50%) scale(1.05)}.gradient-border-overlay{position:absolute;inset:-3px;border-radius:12px;background:conic-gradient(from var(--gradient-angle),#40ffaa,#4079ff,#40ffaa,#4079ff,#40ffaa);z-index:-1;opacity:0;transition:opacity .3s ease}.gradient-border-overlay:before{content:"";position:absolute;inset:3px;background:#2a2a3e;border-radius:9px;z-index:1}.node-content{position:relative;background:#2a2a3e;border:1px solid #374151;border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:12px;min-height:80px;z-index:2;transition:all .3s ease}.node-icon{font-size:24px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#40ffaa1a;border-radius:8px;transition:all .3s ease}.node-info{flex:1;min-width:0}.node-title{font-size:14px;font-weight:600;color:#fff;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.node-subtitle{font-size:11px;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.node-connector{position:relative}.connector-dot{width:8px;height:8px;background:#6b7280;border-radius:50%;transition:all .3s ease}.status-indicator{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:#1f2937;border:2px solid #374151;display:flex;align-items:center;justify-content:center;z-index:3;transition:all .3s ease}.status-dot{width:8px;height:8px;border-radius:50%;background:#6b7280;transition:all .3s ease}.connection-lines{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}.workflow-node.idle .gradient-border-overlay{opacity:0}.workflow-node.idle .connector-dot,.workflow-node.idle .status-dot{background:#6b7280}.workflow-node.active .gradient-border-overlay{opacity:.6;animation:rotate-gradient 4s linear infinite}.workflow-node.active .node-content{border-color:#40ffaa;box-shadow:0 0 20px #40ffaa4d}.workflow-node.active .node-icon{background:#40ffaa33;color:#40ffaa}.workflow-node.active .connector-dot{background:#40ffaa;box-shadow:0 0 10px #40ffaa80}.workflow-node.active .status-indicator{border-color:#40ffaa;background:#1f2937}.workflow-node.active .status-dot{background:#40ffaa;animation:pulse-green 2s infinite}.workflow-node.executing .gradient-border-overlay{opacity:1;animation:rotate-gradient 2s linear infinite}.workflow-node.executing .node-content{border-color:#4079ff;box-shadow:0 0 30px #4079ff66;transform:scale(1.02)}.workflow-node.executing .node-icon{background:#4079ff33;color:#4079ff;animation:pulse-scale 1.5s infinite}.workflow-node.executing .connector-dot{background:#4079ff;box-shadow:0 0 15px #4079ff99;animation:pulse-blue 1s infinite}.workflow-node.executing .status-indicator{border-color:#4079ff;background:#1e3a8a}.workflow-node.executing .status-dot{background:#4079ff;animation:spin 1s linear infinite}.workflow-node.data-flow .gradient-border-overlay{opacity:.8;animation:rotate-gradient 1.5s linear infinite}.workflow-node.data-flow .node-content{border-color:#a855f7;box-shadow:0 0 25px #a855f766}.workflow-node.data-flow .node-icon{background:#a855f733;color:#a855f7}.workflow-node.data-flow .connector-dot{background:#a855f7;box-shadow:0 0 12px #a855f780;animation:pulse-purple .8s infinite}.workflow-node.data-flow .status-indicator{border-color:#a855f7;background:#581c87}.workflow-node.data-flow .status-dot{background:#a855f7;animation:data-flow-pulse 1s infinite}@keyframes rotate-gradient{to{--gradient-angle: 360deg}}@keyframes pulse-green{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}}@keyframes pulse-blue{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.3)}}@keyframes pulse-purple{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}}@keyframes pulse-scale{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes data-flow-pulse{0%,to{opacity:1;transform:scale(1);box-shadow:0 0 5px #a855f780}50%{opacity:.6;transform:scale(1.4);box-shadow:0 0 15px #a855f7cc}}.control-panel{position:absolute;bottom:30px;left:50%;transform:translate(-50%);background:#2a2a3ef2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #374151;border-radius:12px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:20}.execute-btn{background:linear-gradient(135deg,#40ffaa,#4079ff);color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:140px}.execute-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #40ffaa4d}.execute-btn:disabled{opacity:.6;cursor:not-allowed;animation:pulse-button 2s infinite}@keyframes pulse-button{0%,to{box-shadow:0 0 #4079ff66}50%{box-shadow:0 0 0 10px #4079ff00}}.status-info{font-size:12px;text-align:center}.execution-status{color:#4079ff;font-weight:500;margin-bottom:4px}.dataflow-status{color:#a855f7;font-weight:500}@media(max-width:768px){.workflow-node{width:140px;min-height:70px}.node-content{padding:10px 12px;gap:8px}.node-icon{font-size:20px;width:28px;height:28px}.node-title{font-size:12px}.node-subtitle{font-size:10px}}.profile-card-wrap{perspective:1000px;--pointer-x: 50%;--pointer-y: 50%;--rotateX: 0deg;--rotateY: 0deg;--card-opacity: .6;--inner-gradient: linear-gradient(145deg, rgba(20, 20, 40, .8) 0%, rgba(40, 20, 60, .6) 100%);--behind-gradient: radial-gradient(farthest-side circle at var(--pointer-x) var(--pointer-y), hsla(266, 100%, 60%, var(--card-opacity)) 4%, hsla(266, 50%, 50%, calc(var(--card-opacity)*.75)) 10%, hsla(266, 25%, 40%, calc(var(--card-opacity)*.5)) 50%, hsla(266, 0%, 30%, 0) 100%), radial-gradient(35% 52% at 55% 20%, rgba(0, 100, 150, .3) 0%, rgba(0, 50, 100, .1) 100%), radial-gradient(100% 100% at 50% 50%, rgba(0, 100, 200, .2) 1%, rgba(0, 50, 150, .1) 76%), conic-gradient(from 124deg at 50% 50%, rgba(150, 50, 200, .4) 0%, rgba(0, 100, 200, .3) 40%, rgba(0, 100, 200, .3) 60%, rgba(150, 50, 200, .4) 100%)}.profile-card{position:relative;width:450px;height:580px;border-radius:16px;background-image:var(--behind-gradient);transform:translateZ(.1px) rotateX(var(--rotateX)) rotateY(var(--rotateY));transition:transform .6s ease;overflow:hidden}.profile-card-avatar{position:absolute;top:0;left:50%;transform:translate(-50%);width:100%;height:100%;object-fit:cover;border-radius:16px;z-index:1}.profile-card-name{position:absolute;top:20px;left:50%;transform:translate(-50%);margin:0;font-size:2.5rem;color:#fff;text-align:center;z-index:2;text-shadow:0 2px 10px rgba(0,0,0,.8);font-weight:700;white-space:nowrap}.profile-card-title{position:absolute;bottom:80px;left:50%;transform:translate(-50%);margin:0;font-size:1.4rem;color:#fff;text-align:center;z-index:2;text-shadow:0 2px 8px rgba(0,0,0,.8);font-weight:600}.profile-card-info{position:absolute;bottom:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px 15px;background:var(--inner-gradient);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-bottom-left-radius:16px;border-bottom-right-radius:16px;z-index:3}.profile-card-avatar-mini{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid #ffffff88}.profile-card-handle{font-weight:600;color:#fff}.profile-card-status{font-size:.85rem;color:#98eabf}.profile-card-contact-btn{background:transparent;border:1px solid #ffffffaa;color:#fff;padding:6px 12px;border-radius:20px;font-size:.9rem;cursor:pointer}.profile-card-contact-btn:hover{background:#fff3}.orbiting-skills-wrapper{position:relative;width:450px;height:450px;display:flex;align-items:center;justify-content:center;margin:0 auto}.orbit-background{position:absolute;inset:0;opacity:.1;background-image:radial-gradient(circle at 25% 25%,#374151 0%,transparent 50%),radial-gradient(circle at 75% 75%,#4B5563 0%,transparent 50%);pointer-events:none;border-radius:50%}.orbit-center{position:relative;width:80px;height:80px;background:linear-gradient(135deg,#374151,#1f2937);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:10;box-shadow:0 20px 40px #0006}.orbit-center:before{content:"";position:absolute;inset:-10px;border-radius:50%;background:#06b6d44d;animation:pulseGlow 2s ease-in-out infinite}.orbit-center:after{content:"";position:absolute;inset:-15px;border-radius:50%;background:#9333ea33;animation:pulseGlow 2s ease-in-out infinite;animation-delay:1s}.orbit-path{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}.orbit-path-inner{position:absolute;inset:0;border-radius:50%;animation:pulseOrbit 4s ease-in-out infinite}.orbit-path-cyan .orbit-path-inner{background:radial-gradient(circle,transparent 30%,rgba(6,182,212,.15) 70%,rgba(6,182,212,.3) 100%);box-shadow:0 0 40px #06b6d44d,inset 0 0 40px #06b6d433,0 0 60px #06b6d426;border:1px solid rgba(6,182,212,.25)}.orbit-path-purple .orbit-path-inner{background:radial-gradient(circle,transparent 30%,rgba(147,51,234,.15) 70%,rgba(147,51,234,.3) 100%);box-shadow:0 0 40px #9333ea4d,inset 0 0 40px #9333ea33,0 0 60px #9333ea26;border:1px solid rgba(147,51,234,.25)}.orbit-icon{position:absolute;top:50%;left:50%;background:#0f172af2;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:8px;transition:all .3s ease;cursor:pointer;box-shadow:0 4px 6px #0000004d,0 0 20px #64646433;border:2px solid rgba(255,255,255,.1);z-index:10}.orbit-icon:hover{transform:scale(1.35)!important;z-index:20!important;background:#0f172a;box-shadow:0 12px 24px #00000080,0 0 50px var(--icon-glow-color, rgba(100, 255, 255, .8)),0 0 80px var(--icon-glow-color, rgba(100, 255, 255, .4)),inset 0 0 20px var(--icon-glow-color, rgba(255, 255, 255, .15));border:3px solid var(--icon-glow-color, rgba(255, 255, 255, .8))}.orbit-icon:hover svg{filter:brightness(1.3) saturate(1.5)}.orbit-icon svg{width:100%;height:100%;display:block}.orbit-icon-label{position:absolute;bottom:-36px;left:50%;transform:translate(-50%);padding:6px 12px;background:linear-gradient(135deg,#111827fa,#1e293bfa);border-radius:6px;font-size:.8rem;font-weight:600;color:#fff;white-space:nowrap;pointer-events:none;opacity:0;transition:all .3s ease;z-index:30;box-shadow:0 4px 12px #00000080,0 0 20px #6464ff4d;border:1px solid rgba(255,255,255,.2)}.orbit-icon:hover .orbit-icon-label{opacity:1;transform:translate(-50%) translateY(-4px);background:linear-gradient(135deg,#111827,#1e293b);box-shadow:0 6px 16px #0009,0 0 30px var(--icon-glow-color, rgba(100, 255, 255, .7)),0 0 50px var(--icon-glow-color, rgba(100, 255, 255, .3));border:2px solid var(--icon-glow-color, rgba(255, 255, 255, .6))}@keyframes pulseGlow{0%,to{opacity:.4}50%{opacity:.6}}@keyframes pulseOrbit{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.7;transform:scale(1.02);filter:brightness(1.2)}}@media(max-width:768px){.orbiting-skills-wrapper{width:calc(100vw - 40px);height:calc(100vw - 40px);max-width:450px;max-height:450px}.orbit-icon{padding:6px}.orbit-icon-label{font-size:.7rem;bottom:-28px}.orbit-center{width:60px;height:60px}.orbit-center svg{width:28px;height:28px}}@media(max-width:480px){.orbiting-skills-wrapper{width:calc(100vw - 20px);height:calc(100vw - 20px);max-width:350px;max-height:350px}.orbit-center{width:50px;height:50px}.orbit-center svg{width:24px;height:24px}.orbit-icon{padding:4px}.orbit-icon-label{font-size:.65rem;bottom:-24px;padding:3px 6px}}.orbiting-skills-wrapper,.orbit-icon,.orbit-path-inner{will-change:transform}.orbit-icon,.orbit-icon-label{user-select:none;-webkit-user-select:none;-moz-user-select:none}