39 lines
322 KiB
HTML
39 lines
322 KiB
HTML
<!DOCTYPE html><html lang="en" style="--bg-color: #202020; --fg-color: #fff; --comfy-textarea-font-size: 10px; --comfy-tree-explorer-item-padding: 2px; --color-datatype-IMAGE: #64B5F6; --color-datatype-MASK: #81C784; --color-datatype-MODEL: #B39DDB; --color-datatype-CONDITIONING: #FFA931; --color-datatype-LATENT: #FF9CF9; --color-datatype-CLIP: #FFD500; --color-datatype-VAE: #FF6E6E; --color-datatype-CLIP_VISION: #A8DADC; --color-datatype-CLIP_VISION_OUTPUT: #ad7452; --color-datatype-STYLE_MODEL: #C2FFAE; --color-datatype-CONTROL_NET: #6EE7B7; --color-datatype-SAMPLER: #ECB4B4; --color-datatype-SIGMAS: #CDFFCD; --color-datatype-GUIDER: #66FFFF; --color-datatype-NOISE: #B0B0B0; --comfy-menu-bg: #171718; --comfy-menu-secondary-bg: #303030; --comfy-input-bg: #222; --input-text: #ddd; --descrip-text: #999; --drag-text: #ccc; --error-text: #ff4444; --border-color: #4e4e4e; --tr-even-bg-color: #222; --tr-odd-bg-color: #353535; --content-bg: #4e4e4e; --content-fg: #fff; --content-hover-bg: #222; --content-hover-fg: #fff; --bar-shadow: rgba(16, 16, 16, 0.5) 0 0 0.5rem; --contrast-mix-color: var(--palette-contrast-mix-color); --interface-stroke: var(--palette-interface-stroke); --interface-panel-surface: var(--palette-interface-panel-surface); --interface-panel-box-shadow: var(--palette-interface-panel-box-shadow); --interface-panel-drop-shadow: var(--palette-interface-panel-drop-shadow); --interface-panel-hover-surface: var(--palette-interface-panel-hover-surface); --interface-panel-selected-surface: var(--palette-interface-panel-selected-surface); --interface-button-hover-surface: var(--palette-interface-button-hover-surface);"><head><style type="text/css" data-primevue-style-id="layer-order">@layer theme,base,primevue</style><link rel="stylesheet" href="user.css"><link rel="stylesheet" href="api/userdata/user.css"><meta charset="UTF-8"><title> *Unsaved Workflow - ComfyUI</title><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><link rel="stylesheet" href="materialdesignicons.min.css"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><style>@media (prefers-color-scheme:dark){:root{--bg-color:#202020;--fg-color:#ffffff}}body,html{width:100%;height:100%;margin:0}body{display:grid;background-color:var(--bg-color);background-image:var(--bg-img);background-position:center;background-size:cover;background-repeat:no-repeat}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}</style><style>#splash-loader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;contain:strict}#splash-loader svg{width:min(200px,50vw);height:auto;transform:translateZ(0)}#splash-loader .wave-group{animation:splash-rise 4s ease-in-out infinite alternate;will-change:transform;transform:translateZ(0)}#splash-loader .wave-path{animation:splash-wave 1.2s linear infinite;will-change:transform;transform:translateZ(0)}@keyframes splash-rise{from{transform:translateY(280px)}to{transform:translateY(-80px)}}@keyframes splash-wave{from{transform:translateX(0)}to{transform:translateX(-880px)}}@media (prefers-reduced-motion:reduce){#splash-loader .wave-group,#splash-loader .wave-path{animation:none}#splash-loader .wave-group{transform:translateY(-80px)}}</style><link rel="manifest" href="./assets/manifest-B9UzixYD.json"><script type="module" crossorigin="" src="./assets/index-BIsdffwl.js"></script><link rel="modulepreload" crossorigin="" href="./assets/rolldown-runtime-DIIn1E2Q.js"><link rel="modulepreload" crossorigin="" href="./assets/vendor-vue-core-DO0afONr.js"><link rel="modulepreload" crossorigin="" href="./assets/vendor-primevue-BDZ_jj__.js"><link rel="modulepreload" crossorigin="" href="./assets/_plugin-vue_export-helper-Wc9cjhKh.js"><link rel="modulepreload" crossorigin="" href="./assets/vendor-firebase-D7u00oy9.js"><link rel="modulepreload" crossorigin="" href="./assets/vendor-other-CiPV8GBG.js"><link rel="modulepreload" crossorigin="" href="./assets/vendor-reka-ui-B53kLmAc.js"><link rel="modulepreload" crossorigin="" href="./assets/vendor-i18n-JbyM4Qz7.js"><link rel="modulepreload" crossorigin="" href="./assets/vendor-sentry-DFQqneKv.js"><link rel="modulepreload" crossorigin="" href="./assets/vendor-vueuse-DUMtJaL2.js"><link rel="modulepreload" crossorigin="" href="./assets/vendor-axios-B2OLCPxZ.js"><link rel="modulepreload" crossorigin="" href="./assets/vendor-markdown-Da9QPS2x.js"><link rel="modulepreload" crossorigin="" href="./assets/vendor-zod-AyupqgYk.js"><link rel="modulepreload" crossorigin="" href="./assets/formatUtil-CeKPWstn.js"><link rel="modulepreload" crossorigin="" href="./assets/src-NuWuoO1R.js"><link rel="modulepreload" crossorigin="" href="./assets/Loader-Bkgmd-vZ.js"><link rel="modulepreload" crossorigin="" href="./assets/Button-Ca3rDegY.js"><link rel="modulepreload" crossorigin="" href="./assets/Popover-CXKWNrM3.js"><link rel="modulepreload" crossorigin="" href="./assets/SelectValue-DvVNo6Es.js"><link rel="modulepreload" crossorigin="" href="./assets/i18n-BPPV3W0R.js"><link rel="modulepreload" crossorigin="" href="./assets/widget-BH5tDli6.js"><link rel="modulepreload" crossorigin="" href="./assets/types-rqIwLQyw.js"><link rel="modulepreload" crossorigin="" href="./assets/colorUtil-Bsa2N3Sq.js"><link rel="modulepreload" crossorigin="" href="./assets/api-Ceom9P6Y.js"><link rel="modulepreload" crossorigin="" href="./assets/extensionStore-BxdrYmaW.js"><link rel="modulepreload" crossorigin="" href="./assets/useErrorHandling-BamxsrPC.js"><link rel="modulepreload" crossorigin="" href="./assets/envUtil-n2T2wbvo.js"><link rel="modulepreload" crossorigin="" href="./assets/useExternalLink-GYKDzpae.js"><link rel="modulepreload" crossorigin="" href="./assets/useFeatureFlags-CFcYvBoa.js"><link rel="modulepreload" crossorigin="" href="./assets/VideoPlayOverlay-HaJSLuhi.js"><link rel="modulepreload" crossorigin="" href="./assets/assetMetadataUtils-xfixkyW2.js"><link rel="modulepreload" crossorigin="" href="./assets/telemetry-B-mZAUOK.js"><link rel="modulepreload" crossorigin="" href="./assets/dialogStore-G2juoay4.js"><link rel="modulepreload" crossorigin="" href="./assets/electronDownloadStore-BbLO8rIp.js"><link rel="modulepreload" crossorigin="" href="./assets/userStore-BCXY-3Dp.js"><link rel="modulepreload" crossorigin="" href="./assets/widgetTypes-B3taJqHN.js"><link rel="modulepreload" crossorigin="" href="./assets/markdownRendererUtil-_EbNpPBW.js"><link rel="modulepreload" crossorigin="" href="./assets/dialogService-Da794jdp.js"><link rel="modulepreload" crossorigin="" href="./assets/refreshRemoteConfig-CbiAms0W.js"><link rel="modulepreload" crossorigin="" href="./assets/bootstrapStore-CpRs-96u.js"><link rel="stylesheet" crossorigin="" href="./assets/vendor-other-CaaUC6Qe.css"><link rel="stylesheet" crossorigin="" href="./assets/dialogService-CRVO3AcS.css"><link rel="stylesheet" crossorigin="" href="./assets/index-DLkq2aPf.css"><style>
|
||
.draggable-item {
|
||
position: relative;
|
||
will-change: transform;
|
||
user-select: none;
|
||
}
|
||
.draggable-item.is-idle {
|
||
transition: 0.25s ease transform;
|
||
}
|
||
.draggable-item.is-draggable {
|
||
z-index: 10;
|
||
}
|
||
</style><style type="text/css" data-primevue-style-id="primitive-variables">@layer primevue{:root{--p-border-radius-none:0;--p-border-radius-xs:2px;--p-border-radius-sm:4px;--p-border-radius-md:6px;--p-border-radius-lg:8px;--p-border-radius-xl:12px;--p-emerald-50:#ecfdf5;--p-emerald-100:#d1fae5;--p-emerald-200:#a7f3d0;--p-emerald-300:#6ee7b7;--p-emerald-400:#34d399;--p-emerald-500:#10b981;--p-emerald-600:#059669;--p-emerald-700:#047857;--p-emerald-800:#065f46;--p-emerald-900:#064e3b;--p-emerald-950:#022c22;--p-green-50:#f0fdf4;--p-green-100:#dcfce7;--p-green-200:#bbf7d0;--p-green-300:#86efac;--p-green-400:#4ade80;--p-green-500:#22c55e;--p-green-600:#16a34a;--p-green-700:#15803d;--p-green-800:#166534;--p-green-900:#14532d;--p-green-950:#052e16;--p-lime-50:#f7fee7;--p-lime-100:#ecfccb;--p-lime-200:#d9f99d;--p-lime-300:#bef264;--p-lime-400:#a3e635;--p-lime-500:#84cc16;--p-lime-600:#65a30d;--p-lime-700:#4d7c0f;--p-lime-800:#3f6212;--p-lime-900:#365314;--p-lime-950:#1a2e05;--p-red-50:#fef2f2;--p-red-100:#fee2e2;--p-red-200:#fecaca;--p-red-300:#fca5a5;--p-red-400:#f87171;--p-red-500:#ef4444;--p-red-600:#dc2626;--p-red-700:#b91c1c;--p-red-800:#991b1b;--p-red-900:#7f1d1d;--p-red-950:#450a0a;--p-orange-50:#fff7ed;--p-orange-100:#ffedd5;--p-orange-200:#fed7aa;--p-orange-300:#fdba74;--p-orange-400:#fb923c;--p-orange-500:#f97316;--p-orange-600:#ea580c;--p-orange-700:#c2410c;--p-orange-800:#9a3412;--p-orange-900:#7c2d12;--p-orange-950:#431407;--p-amber-50:#fffbeb;--p-amber-100:#fef3c7;--p-amber-200:#fde68a;--p-amber-300:#fcd34d;--p-amber-400:#fbbf24;--p-amber-500:#f59e0b;--p-amber-600:#d97706;--p-amber-700:#b45309;--p-amber-800:#92400e;--p-amber-900:#78350f;--p-amber-950:#451a03;--p-yellow-50:#fefce8;--p-yellow-100:#fef9c3;--p-yellow-200:#fef08a;--p-yellow-300:#fde047;--p-yellow-400:#facc15;--p-yellow-500:#eab308;--p-yellow-600:#ca8a04;--p-yellow-700:#a16207;--p-yellow-800:#854d0e;--p-yellow-900:#713f12;--p-yellow-950:#422006;--p-teal-50:#f0fdfa;--p-teal-100:#ccfbf1;--p-teal-200:#99f6e4;--p-teal-300:#5eead4;--p-teal-400:#2dd4bf;--p-teal-500:#14b8a6;--p-teal-600:#0d9488;--p-teal-700:#0f766e;--p-teal-800:#115e59;--p-teal-900:#134e4a;--p-teal-950:#042f2e;--p-cyan-50:#ecfeff;--p-cyan-100:#cffafe;--p-cyan-200:#a5f3fc;--p-cyan-300:#67e8f9;--p-cyan-400:#22d3ee;--p-cyan-500:#06b6d4;--p-cyan-600:#0891b2;--p-cyan-700:#0e7490;--p-cyan-800:#155e75;--p-cyan-900:#164e63;--p-cyan-950:#083344;--p-sky-50:#f0f9ff;--p-sky-100:#e0f2fe;--p-sky-200:#bae6fd;--p-sky-300:#7dd3fc;--p-sky-400:#38bdf8;--p-sky-500:#0ea5e9;--p-sky-600:#0284c7;--p-sky-700:#0369a1;--p-sky-800:#075985;--p-sky-900:#0c4a6e;--p-sky-950:#082f49;--p-blue-50:#eff6ff;--p-blue-100:#dbeafe;--p-blue-200:#bfdbfe;--p-blue-300:#93c5fd;--p-blue-400:#60a5fa;--p-blue-500:#3b82f6;--p-blue-600:#2563eb;--p-blue-700:#1d4ed8;--p-blue-800:#1e40af;--p-blue-900:#1e3a8a;--p-blue-950:#172554;--p-indigo-50:#eef2ff;--p-indigo-100:#e0e7ff;--p-indigo-200:#c7d2fe;--p-indigo-300:#a5b4fc;--p-indigo-400:#818cf8;--p-indigo-500:#6366f1;--p-indigo-600:#4f46e5;--p-indigo-700:#4338ca;--p-indigo-800:#3730a3;--p-indigo-900:#312e81;--p-indigo-950:#1e1b4b;--p-violet-50:#f5f3ff;--p-violet-100:#ede9fe;--p-violet-200:#ddd6fe;--p-violet-300:#c4b5fd;--p-violet-400:#a78bfa;--p-violet-500:#8b5cf6;--p-violet-600:#7c3aed;--p-violet-700:#6d28d9;--p-violet-800:#5b21b6;--p-violet-900:#4c1d95;--p-violet-950:#2e1065;--p-purple-50:#faf5ff;--p-purple-100:#f3e8ff;--p-purple-200:#e9d5ff;--p-purple-300:#d8b4fe;--p-purple-400:#c084fc;--p-purple-500:#a855f7;--p-purple-600:#9333ea;--p-purple-700:#7e22ce;--p-purple-800:#6b21a8;--p-purple-900:#581c87;--p-purple-950:#3b0764;--p-fuchsia-50:#fdf4ff;--p-fuchsia-100:#fae8ff;--p-fuchsia-200:#f5d0fe;--p-fuchsia-300:#f0abfc;--p-fuchsia-400:#e879f9;--p-fuchsia-500:#d946ef;--p-fuchsia-600:#c026d3;--p-fuchsia-700:#a21caf;--p-fuchsia-800:#86198f;--p-fuchsia-900:#701a75;--p-fuchsia-950:#4a044e;--p-pink-50:#fdf2f8;--p-pink-100:#fce7f3;--p-pink-200:#fbcfe8;--p-pink-300:#f9a8d4;--p-pink-400:#f472b6;--p-pink-500:#ec4899;--p-pink-600:#db2777;--p-pink-700:#be185d;--p-pink-800:#9d174d;--p-pink-900:#831843;--p-pink-950:#500724;--p-rose-50:#fff1f2;--p-rose-100:#ffe4e6;--p-rose-200:#fecdd3;--p-rose-300:#fda4af;--p-rose-400:#fb7185;--p-rose-500:#f43f5e;--p-rose-600:#e11d48;--p-rose-700:#be123c;--p-rose-800:#9f1239;--p-rose-900:#881337;--p-rose-950:#4c0519;--p-slate-50:#f8fafc;--p-slate-100:#f1f5f9;--p-slate-200:#e2e8f0;--p-slate-300:#cbd5e1;--p-slate-400:#94a3b8;--p-slate-500:#64748b;--p-slate-600:#475569;--p-slate-700:#334155;--p-slate-800:#1e293b;--p-slate-900:#0f172a;--p-slate-950:#020617;--p-gray-50:#f9fafb;--p-gray-100:#f3f4f6;--p-gray-200:#e5e7eb;--p-gray-300:#d1d5db;--p-gray-400:#9ca3af;--p-gray-500:#6b7280;--p-gray-600:#4b5563;--p-gray-700:#374151;--p-gray-800:#1f2937;--p-gray-900:#111827;--p-gray-950:#030712;--p-zinc-50:#fafafa;--p-zinc-100:#f4f4f5;--p-zinc-200:#e4e4e7;--p-zinc-300:#d4d4d8;--p-zinc-400:#a1a1aa;--p-zinc-500:#71717a;--p-zinc-600:#52525b;--p-zinc-700:#3f3f46;--p-zinc-800:#27272a;--p-zinc-900:#18181b;--p-zinc-950:#09090b;--p-neutral-50:#fafafa;--p-neutral-100:#f5f5f5;--p-neutral-200:#e5e5e5;--p-neutral-300:#d4d4d4;--p-neutral-400:#a3a3a3;--p-neutral-500:#737373;--p-neutral-600:#525252;--p-neutral-700:#404040;--p-neutral-800:#262626;--p-neutral-900:#171717;--p-neutral-950:#0a0a0a;--p-stone-50:#fafaf9;--p-stone-100:#f5f5f4;--p-stone-200:#e7e5e4;--p-stone-300:#d6d3d1;--p-stone-400:#a8a29e;--p-stone-500:#78716c;--p-stone-600:#57534e;--p-stone-700:#44403c;--p-stone-800:#292524;--p-stone-900:#1c1917;--p-stone-950:#0c0a09;}}</style><style type="text/css" data-primevue-style-id="semantic-variables">@layer primevue{:root{--p-transition-duration:0.2s;--p-focus-ring-width:1px;--p-focus-ring-style:solid;--p-focus-ring-color:var(--p-primary-color);--p-focus-ring-offset:2px;--p-focus-ring-shadow:none;--p-disabled-opacity:0.6;--p-icon-size:1rem;--p-anchor-gutter:2px;--p-primary-50:#eff6ff;--p-primary-100:#dbeafe;--p-primary-200:#bfdbfe;--p-primary-300:#93c5fd;--p-primary-400:#60a5fa;--p-primary-500:#3b82f6;--p-primary-600:#2563eb;--p-primary-700:#1d4ed8;--p-primary-800:#1e40af;--p-primary-900:#1e3a8a;--p-primary-950:#172554;--p-form-field-padding-x:0.75rem;--p-form-field-padding-y:0.5rem;--p-form-field-sm-font-size:0.875rem;--p-form-field-sm-padding-x:0.625rem;--p-form-field-sm-padding-y:0.375rem;--p-form-field-lg-font-size:1.125rem;--p-form-field-lg-padding-x:0.875rem;--p-form-field-lg-padding-y:0.625rem;--p-form-field-border-radius:var(--p-border-radius-md);--p-form-field-focus-ring-width:0;--p-form-field-focus-ring-style:none;--p-form-field-focus-ring-color:transparent;--p-form-field-focus-ring-offset:0;--p-form-field-focus-ring-shadow:none;--p-form-field-transition-duration:var(--p-transition-duration);--p-list-padding:0.25rem 0.25rem;--p-list-gap:2px;--p-list-header-padding:0.5rem 1rem 0.25rem 1rem;--p-list-option-padding:0.5rem 0.75rem;--p-list-option-border-radius:var(--p-border-radius-sm);--p-list-option-group-padding:0.5rem 0.75rem;--p-list-option-group-font-weight:600;--p-content-border-radius:var(--p-border-radius-md);--p-mask-transition-duration:0.15s;--p-navigation-list-padding:0.25rem 0.25rem;--p-navigation-list-gap:2px;--p-navigation-item-padding:0.5rem 0.75rem;--p-navigation-item-border-radius:var(--p-border-radius-sm);--p-navigation-item-gap:0.5rem;--p-navigation-submenu-label-padding:0.5rem 0.75rem;--p-navigation-submenu-label-font-weight:600;--p-navigation-submenu-icon-size:0.875rem;--p-overlay-select-border-radius:var(--p-border-radius-md);--p-overlay-select-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);--p-overlay-popover-border-radius:var(--p-border-radius-md);--p-overlay-popover-padding:0.75rem;--p-overlay-popover-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);--p-overlay-modal-border-radius:var(--p-border-radius-xl);--p-overlay-modal-padding:1.25rem;--p-overlay-modal-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.1);--p-overlay-navigation-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);--p-surface-0:#ffffff;--p-surface-50:var(--p-slate-50);--p-surface-100:var(--p-slate-100);--p-surface-200:var(--p-slate-200);--p-surface-300:var(--p-slate-300);--p-surface-400:var(--p-slate-400);--p-surface-500:var(--p-slate-500);--p-surface-600:var(--p-slate-600);--p-surface-700:var(--p-slate-700);--p-surface-800:var(--p-slate-800);--p-surface-900:var(--p-slate-900);--p-surface-950:var(--p-slate-950);--p-primary-color:var(--p-primary-500);--p-primary-contrast-color:#ffffff;--p-primary-hover-color:var(--p-primary-600);--p-primary-active-color:var(--p-primary-700);--p-highlight-background:var(--p-primary-50);--p-highlight-focus-background:var(--p-primary-100);--p-highlight-color:var(--p-primary-700);--p-highlight-focus-color:var(--p-primary-800);--p-mask-background:rgba(0,0,0,0.4);--p-mask-color:var(--p-surface-200);--p-form-field-background:var(--p-surface-0);--p-form-field-disabled-background:var(--p-surface-200);--p-form-field-filled-background:var(--p-surface-50);--p-form-field-filled-hover-background:var(--p-surface-50);--p-form-field-filled-focus-background:var(--p-surface-50);--p-form-field-border-color:var(--p-surface-300);--p-form-field-hover-border-color:var(--p-surface-400);--p-form-field-focus-border-color:var(--p-primary-color);--p-form-field-invalid-border-color:var(--p-red-400);--p-form-field-color:var(--p-surface-700);--p-form-field-disabled-color:var(--p-surface-500);--p-form-field-placeholder-color:var(--p-surface-500);--p-form-field-invalid-placeholder-color:var(--p-red-600);--p-form-field-float-label-color:var(--p-surface-500);--p-form-field-float-label-focus-color:var(--p-primary-600);--p-form-field-float-label-active-color:var(--p-surface-500);--p-form-field-float-label-invalid-color:var(--p-form-field-invalid-placeholder-color);--p-form-field-icon-color:var(--p-surface-400);--p-form-field-shadow:0 0 #0000,0 0 #0000,0 1px 2px 0 rgba(18,18,23,0.05);--p-text-color:var(--p-surface-700);--p-text-hover-color:var(--p-surface-800);--p-text-muted-color:var(--p-surface-500);--p-text-hover-muted-color:var(--p-surface-600);--p-content-background:var(--p-surface-0);--p-content-hover-background:var(--p-surface-100);--p-content-border-color:var(--p-surface-200);--p-content-color:var(--p-text-color);--p-content-hover-color:var(--p-text-hover-color);--p-overlay-select-background:var(--p-surface-0);--p-overlay-select-border-color:var(--p-surface-200);--p-overlay-select-color:var(--p-text-color);--p-overlay-popover-background:var(--p-surface-0);--p-overlay-popover-border-color:var(--p-surface-200);--p-overlay-popover-color:var(--p-text-color);--p-overlay-modal-background:var(--p-surface-0);--p-overlay-modal-border-color:var(--p-surface-200);--p-overlay-modal-color:var(--p-text-color);--p-list-option-focus-background:var(--p-surface-100);--p-list-option-selected-background:var(--p-highlight-background);--p-list-option-selected-focus-background:var(--p-highlight-focus-background);--p-list-option-color:var(--p-text-color);--p-list-option-focus-color:var(--p-text-hover-color);--p-list-option-selected-color:var(--p-highlight-color);--p-list-option-selected-focus-color:var(--p-highlight-focus-color);--p-list-option-icon-color:var(--p-surface-400);--p-list-option-icon-focus-color:var(--p-surface-500);--p-list-option-group-background:transparent;--p-list-option-group-color:var(--p-text-muted-color);--p-navigation-item-focus-background:var(--p-surface-100);--p-navigation-item-active-background:var(--p-surface-100);--p-navigation-item-color:var(--p-text-color);--p-navigation-item-focus-color:var(--p-text-hover-color);--p-navigation-item-active-color:var(--p-text-hover-color);--p-navigation-item-icon-color:var(--p-surface-400);--p-navigation-item-icon-focus-color:var(--p-surface-500);--p-navigation-item-icon-active-color:var(--p-surface-500);--p-navigation-submenu-label-background:transparent;--p-navigation-submenu-label-color:var(--p-text-muted-color);--p-navigation-submenu-icon-color:var(--p-surface-400);--p-navigation-submenu-icon-focus-color:var(--p-surface-500);--p-navigation-submenu-icon-active-color:var(--p-surface-500);}}@layer primevue{.dark-theme,:root:has(.dark-theme){--p-surface-0:#ffffff;--p-surface-50:var(--p-zinc-50);--p-surface-100:var(--p-zinc-100);--p-surface-200:var(--p-zinc-200);--p-surface-300:var(--p-zinc-300);--p-surface-400:var(--p-zinc-400);--p-surface-500:var(--p-zinc-500);--p-surface-600:var(--p-zinc-600);--p-surface-700:var(--p-zinc-700);--p-surface-800:var(--p-zinc-800);--p-surface-900:var(--p-zinc-900);--p-surface-950:var(--p-zinc-950);--p-primary-color:var(--p-primary-400);--p-primary-contrast-color:var(--p-surface-900);--p-primary-hover-color:var(--p-primary-300);--p-primary-active-color:var(--p-primary-200);--p-highlight-background:color-mix(in srgb,var(--p-primary-400),transparent 84%);--p-highlight-focus-background:color-mix(in srgb,var(--p-primary-400),transparent 76%);--p-highlight-color:rgba(255,255,255,.87);--p-highlight-focus-color:rgba(255,255,255,.87);--p-mask-background:rgba(0,0,0,0.6);--p-mask-color:var(--p-surface-200);--p-form-field-background:var(--p-surface-950);--p-form-field-disabled-background:var(--p-surface-700);--p-form-field-filled-background:var(--p-surface-800);--p-form-field-filled-hover-background:var(--p-surface-800);--p-form-field-filled-focus-background:var(--p-surface-800);--p-form-field-border-color:var(--p-surface-600);--p-form-field-hover-border-color:var(--p-surface-500);--p-form-field-focus-border-color:var(--p-primary-color);--p-form-field-invalid-border-color:var(--p-red-300);--p-form-field-color:var(--p-surface-0);--p-form-field-disabled-color:var(--p-surface-400);--p-form-field-placeholder-color:var(--p-surface-400);--p-form-field-invalid-placeholder-color:var(--p-red-400);--p-form-field-float-label-color:var(--p-surface-400);--p-form-field-float-label-focus-color:var(--p-primary-color);--p-form-field-float-label-active-color:var(--p-surface-400);--p-form-field-float-label-invalid-color:var(--p-form-field-invalid-placeholder-color);--p-form-field-icon-color:var(--p-surface-400);--p-form-field-shadow:0 0 #0000,0 0 #0000,0 1px 2px 0 rgba(18,18,23,0.05);--p-text-color:var(--p-surface-0);--p-text-hover-color:var(--p-surface-0);--p-text-muted-color:var(--p-surface-400);--p-text-hover-muted-color:var(--p-surface-300);--p-content-background:var(--p-surface-900);--p-content-hover-background:var(--p-surface-800);--p-content-border-color:var(--p-surface-700);--p-content-color:var(--p-text-color);--p-content-hover-color:var(--p-text-hover-color);--p-overlay-select-background:var(--p-surface-900);--p-overlay-select-border-color:var(--p-surface-700);--p-overlay-select-color:var(--p-text-color);--p-overlay-popover-background:var(--p-surface-900);--p-overlay-popover-border-color:var(--p-surface-700);--p-overlay-popover-color:var(--p-text-color);--p-overlay-modal-background:var(--p-surface-900);--p-overlay-modal-border-color:var(--p-surface-700);--p-overlay-modal-color:var(--p-text-color);--p-list-option-focus-background:var(--p-surface-800);--p-list-option-selected-background:var(--p-highlight-background);--p-list-option-selected-focus-background:var(--p-highlight-focus-background);--p-list-option-color:var(--p-text-color);--p-list-option-focus-color:var(--p-text-hover-color);--p-list-option-selected-color:var(--p-highlight-color);--p-list-option-selected-focus-color:var(--p-highlight-focus-color);--p-list-option-icon-color:var(--p-surface-500);--p-list-option-icon-focus-color:var(--p-surface-400);--p-list-option-group-background:transparent;--p-list-option-group-color:var(--p-text-muted-color);--p-navigation-item-focus-background:var(--p-surface-800);--p-navigation-item-active-background:var(--p-surface-800);--p-navigation-item-color:var(--p-text-color);--p-navigation-item-focus-color:var(--p-text-hover-color);--p-navigation-item-active-color:var(--p-text-hover-color);--p-navigation-item-icon-color:var(--p-surface-500);--p-navigation-item-icon-focus-color:var(--p-surface-400);--p-navigation-item-icon-active-color:var(--p-surface-400);--p-navigation-submenu-label-background:transparent;--p-navigation-submenu-label-color:var(--p-text-muted-color);--p-navigation-submenu-icon-color:var(--p-surface-500);--p-navigation-submenu-icon-focus-color:var(--p-surface-400);--p-navigation-submenu-icon-active-color:var(--p-surface-400);}}</style><style type="text/css" data-primevue-style-id="global-variables">@layer primevue{:root{color-scheme:light}}@layer primevue{.dark-theme,:root:has(.dark-theme){color-scheme:dark}}</style><style type="text/css" data-primevue-style-id="global-style">@layer primevue{*,::before,::after{box-sizing:border-box;}.p-connected-overlay{opacity:0;transform:scaleY(0.8);transition:transform 0.12s cubic-bezier(0,0,0.2,1),opacity 0.12s cubic-bezier(0,0,0.2,1);}.p-connected-overlay-visible{opacity:1;transform:scaleY(1);}.p-connected-overlay-hidden{opacity:0;transform:scaleY(1);transition:opacity 0.1s linear;}.p-connected-overlay-enter-from{opacity:0;transform:scaleY(0.8);}.p-connected-overlay-leave-to{opacity:0;}.p-connected-overlay-enter-active{transition:transform 0.12s cubic-bezier(0,0,0.2,1),opacity 0.12s cubic-bezier(0,0,0.2,1);}.p-connected-overlay-leave-active{transition:opacity 0.1s linear;}.p-toggleable-content-enter-from,.p-toggleable-content-leave-to{max-height:0;}.p-toggleable-content-enter-to,.p-toggleable-content-leave-from{max-height:1000px;}.p-toggleable-content-leave-active{overflow:hidden;transition:max-height 0.45s cubic-bezier(0,1,0,1);}.p-toggleable-content-enter-active{overflow:hidden;transition:max-height 1s ease-in-out;}.p-disabled,.p-disabled *{cursor:default;pointer-events:none;user-select:none;}.p-disabled,.p-component:disabled{opacity:var(--p-disabled-opacity);}.pi{font-size:var(--p-icon-size);}.p-icon{width:var(--p-icon-size);height:var(--p-icon-size);}.p-overlay-mask{background:var(--p-mask-background);color:var(--p-mask-color);position:fixed;top:0;left:0;width:100%;height:100%;}.p-overlay-mask-enter{animation:p-overlay-mask-enter-animation var(--p-mask-transition-duration) forwards;}.p-overlay-mask-leave{animation:p-overlay-mask-leave-animation var(--p-mask-transition-duration) forwards;}@keyframes p-overlay-mask-enter-animation{from{background:transparent;}to{background:var(--p-mask-background);}}@keyframes p-overlay-mask-leave-animation{from{background:var(--p-mask-background);}to{background:transparent;}}}</style><style type="text/css" data-primevue-style-id="base">.p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}.p-hidden-accessible input,.p-hidden-accessible select{transform:scale(0);}.p-overflow-hidden{overflow:hidden;padding-right:var(--p-scrollbar-width);}</style><style type="text/css" data-primevue-style-id="blockui-variables">@layer primevue{:root{--p-blockui-border-radius:var(--p-content-border-radius);}}</style><style type="text/css" data-primevue-style-id="blockui-style">@layer primevue{.p-blockui{position:relative;}.p-blockui-mask{border-radius:var(--p-blockui-border-radius);}.p-blockui-mask.p-overlay-mask{position:absolute;}.p-blockui-mask-document.p-overlay-mask{position:fixed;}}</style><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/i18n-BHzsGwZg.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/GraphView-Ck1foubW.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/vendor-three-ByVNcHWs.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/vendor-tiptap-Bk1lVUYZ.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/vendor-yjs-BsN9BCzH.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/ScrubableNumberInput-CRrR3VyE.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/UserAvatar-C9TQYmrC.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/curveUtils-DqM5IOrH.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/GlobalToast-DKPX-8a6.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/TopbarBadge-CkkEYpW4.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/Slider-D50kmiD4.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/FormSearchInput-C3k2HxOB.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/SubscribeButton-C36SpuID.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/SubscribeToRun-By4scAOX.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/keybindingService-Df242EnY.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/missingModelDownload-FfWi1dX6.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/config-DzpLFrtk.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/releaseStore-C7BEpMN6.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/workflowShareService-k-StOZWm.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/WorkspaceProfilePic-CE1J_Uz7.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/useWorkspaceSwitch-OQGNJFQ6.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/layout-CvM4cIQs.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/serverConfigStore-DFj6N_8Q.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/graphHasMissingNodes-SYR5ZU31.js"><link rel="stylesheet" crossorigin="" href="http://127.0.0.1:8000/assets/GraphView-AQmrczuY.css"><link rel="icon" href="/assets/images/favicon_progress_16x16/frame_9.png" type="image/ico"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/useTerminalTabs-PL6PHtZj.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/vendor-xterm-BXxGaW9o.js"><link rel="stylesheet" crossorigin="" href="http://127.0.0.1:8000/assets/vendor-xterm-kHJ-D0s7.css"><link rel="stylesheet" crossorigin="" href="http://127.0.0.1:8000/assets/useTerminalTabs-D7c-1Fr7.css"><style type="text/css" data-primevue-style-id="tooltip-directive-variables">@layer primevue{:root{--p-tooltip-max-width:12.5rem;--p-tooltip-gutter:0.25rem;--p-tooltip-shadow:var(--p-overlay-popover-shadow);--p-tooltip-padding:0.5rem 0.75rem;--p-tooltip-border-radius:var(--p-overlay-popover-border-radius);--p-tooltip-background:var(--p-surface-700);--p-tooltip-color:var(--p-surface-0);}}@layer primevue{.dark-theme,:root:has(.dark-theme){--p-tooltip-background:var(--p-surface-700);--p-tooltip-color:var(--p-surface-0);}}</style><style type="text/css" data-primevue-style-id="tooltip-directive-style">@layer primevue{.p-tooltip{position:absolute;display:none;max-width:var(--p-tooltip-max-width);}.p-tooltip-right,.p-tooltip-left{padding:0 var(--p-tooltip-gutter);}.p-tooltip-top,.p-tooltip-bottom{padding:var(--p-tooltip-gutter) 0;}.p-tooltip-text{white-space:pre-line;word-break:break-word;background:var(--p-tooltip-background);color:var(--p-tooltip-color);padding:var(--p-tooltip-padding);box-shadow:var(--p-tooltip-shadow);border-radius:var(--p-tooltip-border-radius);}.p-tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid;}.p-tooltip-right .p-tooltip-arrow{margin-top:calc(-1 * var(--p-tooltip-gutter));border-width:var(--p-tooltip-gutter) var(--p-tooltip-gutter) var(--p-tooltip-gutter) 0;border-right-color:var(--p-tooltip-background);}.p-tooltip-left .p-tooltip-arrow{margin-top:calc(-1 * var(--p-tooltip-gutter));border-width:var(--p-tooltip-gutter) 0 var(--p-tooltip-gutter) var(--p-tooltip-gutter);border-left-color:var(--p-tooltip-background);}.p-tooltip-top .p-tooltip-arrow{margin-left:calc(-1 * var(--p-tooltip-gutter));border-width:var(--p-tooltip-gutter) var(--p-tooltip-gutter) 0 var(--p-tooltip-gutter);border-top-color:var(--p-tooltip-background);border-bottom-color:var(--p-tooltip-background);}.p-tooltip-bottom .p-tooltip-arrow{margin-left:calc(-1 * var(--p-tooltip-gutter));border-width:0 var(--p-tooltip-gutter) var(--p-tooltip-gutter) var(--p-tooltip-gutter);border-top-color:var(--p-tooltip-background);border-bottom-color:var(--p-tooltip-background);}}</style><style type="text/css" data-primevue-style-id="dialog-variables">@layer primevue{:root{--p-dialog-background:var(--p-overlay-modal-background);--p-dialog-border-color:var(--p-overlay-modal-border-color);--p-dialog-color:var(--p-overlay-modal-color);--p-dialog-border-radius:var(--p-overlay-modal-border-radius);--p-dialog-shadow:var(--p-overlay-modal-shadow);--p-dialog-header-padding:var(--p-overlay-modal-padding);--p-dialog-header-gap:0.5rem;--p-dialog-title-font-size:1.25rem;--p-dialog-title-font-weight:600;--p-dialog-content-padding:0 var(--p-overlay-modal-padding) var(--p-overlay-modal-padding) var(--p-overlay-modal-padding);--p-dialog-footer-padding:0 var(--p-overlay-modal-padding) var(--p-overlay-modal-padding) var(--p-overlay-modal-padding);--p-dialog-footer-gap:0.5rem;}}</style><style type="text/css" data-primevue-style-id="dialog-style">@layer primevue{.p-dialog{max-height:90%;transform:scale(1);border-radius:var(--p-dialog-border-radius);box-shadow:var(--p-dialog-shadow);background:var(--p-dialog-background);border:1px solid var(--p-dialog-border-color);color:var(--p-dialog-color);}.p-dialog-content{overflow-y:auto;padding:var(--p-dialog-content-padding);}.p-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:var(--p-dialog-header-padding);}.p-dialog-title{font-weight:var(--p-dialog-title-font-weight);font-size:var(--p-dialog-title-font-size);}.p-dialog-footer{flex-shrink:0;padding:var(--p-dialog-footer-padding);display:flex;justify-content:flex-end;gap:var(--p-dialog-footer-gap);}.p-dialog-header-actions{display:flex;align-items:center;gap:var(--p-dialog-header-gap);}.p-dialog-enter-active{transition:all 150ms cubic-bezier(0,0,0.2,1);}.p-dialog-leave-active{transition:all 150ms cubic-bezier(0.4,0,0.2,1);}.p-dialog-enter-from,.p-dialog-leave-to{opacity:0;transform:scale(0.7);}.p-dialog-top .p-dialog,.p-dialog-bottom .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-topleft .p-dialog,.p-dialog-topright .p-dialog,.p-dialog-bottomleft .p-dialog,.p-dialog-bottomright .p-dialog{margin:0.75rem;transform:translate3d(0px,0px,0px);}.p-dialog-top .p-dialog-enter-active,.p-dialog-top .p-dialog-leave-active,.p-dialog-bottom .p-dialog-enter-active,.p-dialog-bottom .p-dialog-leave-active,.p-dialog-left .p-dialog-enter-active,.p-dialog-left .p-dialog-leave-active,.p-dialog-right .p-dialog-enter-active,.p-dialog-right .p-dialog-leave-active,.p-dialog-topleft .p-dialog-enter-active,.p-dialog-topleft .p-dialog-leave-active,.p-dialog-topright .p-dialog-enter-active,.p-dialog-topright .p-dialog-leave-active,.p-dialog-bottomleft .p-dialog-enter-active,.p-dialog-bottomleft .p-dialog-leave-active,.p-dialog-bottomright .p-dialog-enter-active,.p-dialog-bottomright .p-dialog-leave-active{transition:all 0.3s ease-out;}.p-dialog-top .p-dialog-enter-from,.p-dialog-top .p-dialog-leave-to{transform:translate3d(0px,-100%,0px);}.p-dialog-bottom .p-dialog-enter-from,.p-dialog-bottom .p-dialog-leave-to{transform:translate3d(0px,100%,0px);}.p-dialog-left .p-dialog-enter-from,.p-dialog-left .p-dialog-leave-to,.p-dialog-topleft .p-dialog-enter-from,.p-dialog-topleft .p-dialog-leave-to,.p-dialog-bottomleft .p-dialog-enter-from,.p-dialog-bottomleft .p-dialog-leave-to{transform:translate3d(-100%,0px,0px);}.p-dialog-right .p-dialog-enter-from,.p-dialog-right .p-dialog-leave-to,.p-dialog-topright .p-dialog-enter-from,.p-dialog-topright .p-dialog-leave-to,.p-dialog-bottomright .p-dialog-enter-from,.p-dialog-bottomright .p-dialog-leave-to{transform:translate3d(100%,0px,0px);}.p-dialog-left:dir(rtl) .p-dialog-enter-from,.p-dialog-left:dir(rtl) .p-dialog-leave-to,.p-dialog-topleft:dir(rtl) .p-dialog-enter-from,.p-dialog-topleft:dir(rtl) .p-dialog-leave-to,.p-dialog-bottomleft:dir(rtl) .p-dialog-enter-from,.p-dialog-bottomleft:dir(rtl) .p-dialog-leave-to{transform:translate3d(100%,0px,0px);}.p-dialog-right:dir(rtl) .p-dialog-enter-from,.p-dialog-right:dir(rtl) .p-dialog-leave-to,.p-dialog-topright:dir(rtl) .p-dialog-enter-from,.p-dialog-topright:dir(rtl) .p-dialog-leave-to,.p-dialog-bottomright:dir(rtl) .p-dialog-enter-from,.p-dialog-bottomright:dir(rtl) .p-dialog-leave-to{transform:translate3d(-100%,0px,0px);}.p-dialog-maximized{width:100vw!important;height:100vh!important;top:0px!important;left:0px!important;max-height:100%;height:100%;border-radius:0;}.p-dialog-maximized .p-dialog-content{flex-grow:1;}}</style><style type="text/css" data-primevue-style-id="toast-variables">@layer primevue{:root{--p-toast-width:25rem;--p-toast-border-radius:var(--p-content-border-radius);--p-toast-border-width:1px;--p-toast-transition-duration:var(--p-transition-duration);--p-toast-icon-size:1.125rem;--p-toast-content-padding:var(--p-overlay-popover-padding);--p-toast-content-gap:0.5rem;--p-toast-text-gap:0.5rem;--p-toast-summary-font-weight:500;--p-toast-summary-font-size:1rem;--p-toast-detail-font-weight:500;--p-toast-detail-font-size:0.875rem;--p-toast-close-button-width:1.75rem;--p-toast-close-button-height:1.75rem;--p-toast-close-button-border-radius:50%;--p-toast-close-button-focus-ring-width:var(--p-focus-ring-width);--p-toast-close-button-focus-ring-style:var(--p-focus-ring-style);--p-toast-close-button-focus-ring-offset:var(--p-focus-ring-offset);--p-toast-close-icon-size:1rem;--p-toast-blur:1.5px;--p-toast-info-background:color-mix(in srgb,var(--p-blue-50),transparent 5%);--p-toast-info-border-color:var(--p-blue-200);--p-toast-info-color:var(--p-blue-600);--p-toast-info-detail-color:var(--p-surface-700);--p-toast-info-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-blue-500),transparent 96%);--p-toast-info-close-button-hover-background:var(--p-blue-100);--p-toast-info-close-button-focus-ring-color:var(--p-blue-600);--p-toast-info-close-button-focus-ring-shadow:none;--p-toast-success-background:color-mix(in srgb,var(--p-green-50),transparent 5%);--p-toast-success-border-color:var(--p-green-200);--p-toast-success-color:var(--p-green-600);--p-toast-success-detail-color:var(--p-surface-700);--p-toast-success-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-green-500),transparent 96%);--p-toast-success-close-button-hover-background:var(--p-green-100);--p-toast-success-close-button-focus-ring-color:var(--p-green-600);--p-toast-success-close-button-focus-ring-shadow:none;--p-toast-warn-background:color-mix(in srgb,var(--p-yellow-50),transparent 5%);--p-toast-warn-border-color:var(--p-yellow-200);--p-toast-warn-color:var(--p-yellow-600);--p-toast-warn-detail-color:var(--p-surface-700);--p-toast-warn-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-yellow-500),transparent 96%);--p-toast-warn-close-button-hover-background:var(--p-yellow-100);--p-toast-warn-close-button-focus-ring-color:var(--p-yellow-600);--p-toast-warn-close-button-focus-ring-shadow:none;--p-toast-error-background:color-mix(in srgb,var(--p-red-50),transparent 5%);--p-toast-error-border-color:var(--p-red-200);--p-toast-error-color:var(--p-red-600);--p-toast-error-detail-color:var(--p-surface-700);--p-toast-error-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-red-500),transparent 96%);--p-toast-error-close-button-hover-background:var(--p-red-100);--p-toast-error-close-button-focus-ring-color:var(--p-red-600);--p-toast-error-close-button-focus-ring-shadow:none;--p-toast-secondary-background:var(--p-surface-100);--p-toast-secondary-border-color:var(--p-surface-200);--p-toast-secondary-color:var(--p-surface-600);--p-toast-secondary-detail-color:var(--p-surface-700);--p-toast-secondary-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-surface-500),transparent 96%);--p-toast-secondary-close-button-hover-background:var(--p-surface-200);--p-toast-secondary-close-button-focus-ring-color:var(--p-surface-600);--p-toast-secondary-close-button-focus-ring-shadow:none;--p-toast-contrast-background:var(--p-surface-900);--p-toast-contrast-border-color:var(--p-surface-950);--p-toast-contrast-color:var(--p-surface-50);--p-toast-contrast-detail-color:var(--p-surface-0);--p-toast-contrast-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-surface-950),transparent 96%);--p-toast-contrast-close-button-hover-background:var(--p-surface-800);--p-toast-contrast-close-button-focus-ring-color:var(--p-surface-50);--p-toast-contrast-close-button-focus-ring-shadow:none;}}@layer primevue{.dark-theme,:root:has(.dark-theme){--p-toast-blur:10px;--p-toast-info-background:color-mix(in srgb,var(--p-blue-500),transparent 84%);--p-toast-info-border-color:color-mix(in srgb,var(--p-blue-700),transparent 64%);--p-toast-info-color:var(--p-blue-500);--p-toast-info-detail-color:var(--p-surface-0);--p-toast-info-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-blue-500),transparent 96%);--p-toast-info-close-button-hover-background:rgba(255,255,255,0.05);--p-toast-info-close-button-focus-ring-color:var(--p-blue-500);--p-toast-info-close-button-focus-ring-shadow:none;--p-toast-success-background:color-mix(in srgb,var(--p-green-500),transparent 84%);--p-toast-success-border-color:color-mix(in srgb,var(--p-green-700),transparent 64%);--p-toast-success-color:var(--p-green-500);--p-toast-success-detail-color:var(--p-surface-0);--p-toast-success-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-green-500),transparent 96%);--p-toast-success-close-button-hover-background:rgba(255,255,255,0.05);--p-toast-success-close-button-focus-ring-color:var(--p-green-500);--p-toast-success-close-button-focus-ring-shadow:none;--p-toast-warn-background:color-mix(in srgb,var(--p-yellow-500),transparent 84%);--p-toast-warn-border-color:color-mix(in srgb,var(--p-yellow-700),transparent 64%);--p-toast-warn-color:var(--p-yellow-500);--p-toast-warn-detail-color:var(--p-surface-0);--p-toast-warn-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-yellow-500),transparent 96%);--p-toast-warn-close-button-hover-background:rgba(255,255,255,0.05);--p-toast-warn-close-button-focus-ring-color:var(--p-yellow-500);--p-toast-warn-close-button-focus-ring-shadow:none;--p-toast-error-background:color-mix(in srgb,var(--p-red-500),transparent 84%);--p-toast-error-border-color:color-mix(in srgb,var(--p-red-700),transparent 64%);--p-toast-error-color:var(--p-red-500);--p-toast-error-detail-color:var(--p-surface-0);--p-toast-error-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-red-500),transparent 96%);--p-toast-error-close-button-hover-background:rgba(255,255,255,0.05);--p-toast-error-close-button-focus-ring-color:var(--p-red-500);--p-toast-error-close-button-focus-ring-shadow:none;--p-toast-secondary-background:var(--p-surface-800);--p-toast-secondary-border-color:var(--p-surface-700);--p-toast-secondary-color:var(--p-surface-300);--p-toast-secondary-detail-color:var(--p-surface-0);--p-toast-secondary-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-surface-500),transparent 96%);--p-toast-secondary-close-button-hover-background:var(--p-surface-700);--p-toast-secondary-close-button-focus-ring-color:var(--p-surface-300);--p-toast-secondary-close-button-focus-ring-shadow:none;--p-toast-contrast-background:var(--p-surface-0);--p-toast-contrast-border-color:var(--p-surface-100);--p-toast-contrast-color:var(--p-surface-950);--p-toast-contrast-detail-color:var(--p-surface-950);--p-toast-contrast-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-surface-950),transparent 96%);--p-toast-contrast-close-button-hover-background:var(--p-surface-100);--p-toast-contrast-close-button-focus-ring-color:var(--p-surface-950);--p-toast-contrast-close-button-focus-ring-shadow:none;}}</style><style type="text/css" data-primevue-style-id="toast-style">@layer primevue{.p-toast{width:var(--p-toast-width);white-space:pre-line;word-break:break-word;}.p-toast-message{margin:0 0 1rem 0;}.p-toast-message-icon{flex-shrink:0;font-size:var(--p-toast-icon-size);width:var(--p-toast-icon-size);height:var(--p-toast-icon-size);}.p-toast-message-content{display:flex;align-items:flex-start;padding:var(--p-toast-content-padding);gap:var(--p-toast-content-gap);}.p-toast-message-text{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--p-toast-text-gap);}.p-toast-summary{font-weight:var(--p-toast-summary-font-weight);font-size:var(--p-toast-summary-font-size);}.p-toast-detail{font-weight:var(--p-toast-detail-font-weight);font-size:var(--p-toast-detail-font-size);}.p-toast-close-button{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;cursor:pointer;background:transparent;transition:background var(--p-toast-transition-duration),color var(--p-toast-transition-duration),outline-color var(--p-toast-transition-duration),box-shadow var(--p-toast-transition-duration);outline-color:transparent;color:inherit;width:var(--p-toast-close-button-width);height:var(--p-toast-close-button-height);border-radius:var(--p-toast-close-button-border-radius);margin:-25% 0 0 0;right:-25%;padding:0;border:none;user-select:none;}.p-toast-close-button:dir(rtl){margin:-25% 0 0 auto;left:-25%;right:auto;}.p-toast-message-info,.p-toast-message-success,.p-toast-message-warn,.p-toast-message-error,.p-toast-message-secondary,.p-toast-message-contrast{border-width:var(--p-toast-border-width);border-style:solid;backdrop-filter:blur(var(--p-toast-blur));border-radius:var(--p-toast-border-radius);}.p-toast-close-icon{font-size:var(--p-toast-close-icon-size);width:var(--p-toast-close-icon-size);height:var(--p-toast-close-icon-size);}.p-toast-close-button:focus-visible{outline-width:var(--p-focus-ring-width);outline-style:var(--p-focus-ring-style);outline-offset:var(--p-focus-ring-offset);}.p-toast-message-info{background:var(--p-toast-info-background);border-color:var(--p-toast-info-border-color);color:var(--p-toast-info-color);box-shadow:var(--p-toast-info-shadow);}.p-toast-message-info .p-toast-detail{color:var(--p-toast-info-detail-color);}.p-toast-message-info .p-toast-close-button:focus-visible{outline-color:var(--p-toast-info-close-button-focus-ring-color);box-shadow:var(--p-toast-info-close-button-focus-ring-shadow);}.p-toast-message-info .p-toast-close-button:hover{background:var(--p-toast-info-close-button-hover-background);}.p-toast-message-success{background:var(--p-toast-success-background);border-color:var(--p-toast-success-border-color);color:var(--p-toast-success-color);box-shadow:var(--p-toast-success-shadow);}.p-toast-message-success .p-toast-detail{color:var(--p-toast-success-detail-color);}.p-toast-message-success .p-toast-close-button:focus-visible{outline-color:var(--p-toast-success-close-button-focus-ring-color);box-shadow:var(--p-toast-success-close-button-focus-ring-shadow);}.p-toast-message-success .p-toast-close-button:hover{background:var(--p-toast-success-close-button-hover-background);}.p-toast-message-warn{background:var(--p-toast-warn-background);border-color:var(--p-toast-warn-border-color);color:var(--p-toast-warn-color);box-shadow:var(--p-toast-warn-shadow);}.p-toast-message-warn .p-toast-detail{color:var(--p-toast-warn-detail-color);}.p-toast-message-warn .p-toast-close-button:focus-visible{outline-color:var(--p-toast-warn-close-button-focus-ring-color);box-shadow:var(--p-toast-warn-close-button-focus-ring-shadow);}.p-toast-message-warn .p-toast-close-button:hover{background:var(--p-toast-warn-close-button-hover-background);}.p-toast-message-error{background:var(--p-toast-error-background);border-color:var(--p-toast-error-border-color);color:var(--p-toast-error-color);box-shadow:var(--p-toast-error-shadow);}.p-toast-message-error .p-toast-detail{color:var(--p-toast-error-detail-color);}.p-toast-message-error .p-toast-close-button:focus-visible{outline-color:var(--p-toast-error-close-button-focus-ring-color);box-shadow:var(--p-toast-error-close-button-focus-ring-shadow);}.p-toast-message-error .p-toast-close-button:hover{background:var(--p-toast-error-close-button-hover-background);}.p-toast-message-secondary{background:var(--p-toast-secondary-background);border-color:var(--p-toast-secondary-border-color);color:var(--p-toast-secondary-color);box-shadow:var(--p-toast-secondary-shadow);}.p-toast-message-secondary .p-toast-detail{color:var(--p-toast-secondary-detail-color);}.p-toast-message-secondary .p-toast-close-button:focus-visible{outline-color:var(--p-toast-secondary-close-button-focus-ring-color);box-shadow:var(--p-toast-secondary-close-button-focus-ring-shadow);}.p-toast-message-secondary .p-toast-close-button:hover{background:var(--p-toast-secondary-close-button-hover-background);}.p-toast-message-contrast{background:var(--p-toast-contrast-background);border-color:var(--p-toast-contrast-border-color);color:var(--p-toast-contrast-color);box-shadow:var(--p-toast-contrast-shadow);}.p-toast-message-contrast .p-toast-detail{color:var(--p-toast-contrast-detail-color);}.p-toast-message-contrast .p-toast-close-button:focus-visible{outline-color:var(--p-toast-contrast-close-button-focus-ring-color);box-shadow:var(--p-toast-contrast-close-button-focus-ring-shadow);}.p-toast-message-contrast .p-toast-close-button:hover{background:var(--p-toast-contrast-close-button-hover-background);}.p-toast-top-center{transform:translateX(-50%);}.p-toast-bottom-center{transform:translateX(-50%);}.p-toast-center{min-width:20vw;transform:translate(-50%,-50%);}.p-toast-message-enter-from{opacity:0;transform:translateY(50%);}.p-toast-message-leave-from{max-height:1000px;}.p-toast .p-toast-message.p-toast-message-leave-to{max-height:0;opacity:0;margin-bottom:0;overflow:hidden;}.p-toast-message-enter-active{transition:transform 0.3s,opacity 0.3s;}.p-toast-message-leave-active{transition:max-height 0.45s cubic-bezier(0,1,0,1),opacity 0.3s,margin-bottom 0.3s;}}</style><style id="dynamic-toast-style">
|
||
.p-toast.p-component.p-toast-top-right {
|
||
top: 100px !important;
|
||
right: 20px !important;
|
||
z-index: 10000 !important;
|
||
}
|
||
</style><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/core-BmEfiOCF.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/groupNode-CjSRvJud.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/audioUtils-BQO8qvDd.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/audioService-BdKi1EuU.js"><link rel="stylesheet" crossorigin="" href="http://127.0.0.1:8000/assets/groupNode-CZraG87T.css"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/workflowDraftStore-C48ZLuyu.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/nodeTemplates-CnKp0fCe.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/settingStore-BMV9h5tw.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/changeTracker-DAOd1clc.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/load3d-CGDDs1bg.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/Load3D-Bv9ZUwuc.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/Load3DControls-BUR8GezO.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/Load3dViewerContent-C0OkIZJb.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/AnimationControls-55ndBLKY.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/useLoad3dViewer-CoP7f0D0.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/load3dService-Bgd80_fq.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/constants-BUScsz3f.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/useLoad3d-Cn-fKldX.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/Load3DConfiguration-DFOovhtp.js"><link rel="stylesheet" crossorigin="" href="http://127.0.0.1:8000/assets/Load3dViewerContent-8ed2w2Qc.css"><link rel="stylesheet" crossorigin="" href="http://127.0.0.1:8000/assets/Load3D-DrSt2J0t.css"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/saveMesh-CfryJyqO.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/ComfyQueueButton-CeL4UCSF.js"><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/ComfyQueueButton-B8oWpw-N.js"><style type="text/css" data-primevue-style-id="selectbutton-variables">@layer primevue{:root{--p-selectbutton-border-radius:var(--p-form-field-border-radius);--p-selectbutton-invalid-border-color:var(--p-form-field-invalid-border-color);}}@layer primevue{.dark-theme,:root:has(.dark-theme){--p-selectbutton-invalid-border-color:var(--p-form-field-invalid-border-color);}}</style><style type="text/css" data-primevue-style-id="selectbutton-style">@layer primevue{.p-selectbutton{display:inline-flex;user-select:none;vertical-align:bottom;outline-color:transparent;border-radius:var(--p-selectbutton-border-radius);}.p-selectbutton .p-togglebutton{border-radius:0;border-width:1px 1px 1px 0;}.p-selectbutton .p-togglebutton:focus-visible{position:relative;z-index:1;}.p-selectbutton .p-togglebutton:first-child{border-inline-start-width:1px;border-start-start-radius:var(--p-selectbutton-border-radius);border-end-start-radius:var(--p-selectbutton-border-radius);}.p-selectbutton .p-togglebutton:last-child{border-start-end-radius:var(--p-selectbutton-border-radius);border-end-end-radius:var(--p-selectbutton-border-radius);}.p-selectbutton.p-invalid{outline:1px solid var(--p-selectbutton-invalid-border-color);outline-offset:0;}}</style><style type="text/css" data-primevue-style-id="scrollpanel-variables">@layer primevue{:root{--p-scrollpanel-transition-duration:var(--p-transition-duration);--p-scrollpanel-bar-size:9px;--p-scrollpanel-bar-border-radius:var(--p-border-radius-sm);--p-scrollpanel-bar-focus-ring-width:var(--p-focus-ring-width);--p-scrollpanel-bar-focus-ring-style:var(--p-focus-ring-style);--p-scrollpanel-bar-focus-ring-color:var(--p-focus-ring-color);--p-scrollpanel-bar-focus-ring-offset:var(--p-focus-ring-offset);--p-scrollpanel-bar-focus-ring-shadow:var(--p-focus-ring-shadow);--p-scrollpanel-bar-background:var(--p-surface-100);}}@layer primevue{.dark-theme,:root:has(.dark-theme){--p-scrollpanel-bar-background:var(--p-surface-800);}}</style><style type="text/css" data-primevue-style-id="scrollpanel-style">@layer primevue{.p-scrollpanel-content-container{overflow:hidden;width:100%;height:100%;position:relative;z-index:1;float:left;}.p-scrollpanel-content{height:calc(100% + calc(2 * var(--p-scrollpanel-bar-size)));width:calc(100% + calc(2 * var(--p-scrollpanel-bar-size)));padding-inline:0 calc(2 * var(--p-scrollpanel-bar-size));padding-block:0 calc(2 * var(--p-scrollpanel-bar-size));position:relative;overflow:auto;box-sizing:border-box;scrollbar-width:none;}.p-scrollpanel-content::-webkit-scrollbar{display:none;}.p-scrollpanel-bar{position:relative;border-radius:var(--p-scrollpanel-bar-border-radius);z-index:2;cursor:pointer;opacity:0;outline-color:transparent;background:var(--p-scrollpanel-bar-background);border:0 none;transition:outline-color var(--p-scrollpanel-transition-duration),opacity var(--p-scrollpanel-transition-duration);}.p-scrollpanel-bar:focus-visible{box-shadow:var(--p-scrollpanel-bar-focus-ring-shadow);outline:var(--p-scrollpanel-barfocus-ring-width) var(--p-scrollpanel-bar-focus-ring-style) var(--p-scrollpanel-bar-focus-ring-color);outline-offset:var(--p-scrollpanel-barfocus-ring-offset);}.p-scrollpanel-bar-y{width:var(--p-scrollpanel-bar-size);inset-block-start:0;}.p-scrollpanel-bar-x{height:var(--p-scrollpanel-bar-size);inset-block-end:0;}.p-scrollpanel-hidden{visibility:hidden;}.p-scrollpanel:hover .p-scrollpanel-bar,.p-scrollpanel:active .p-scrollpanel-bar{opacity:1;}.p-scrollpanel-grabbed{user-select:none;}}</style><style type="text/css" data-primevue-style-id="popover-variables">@layer primevue{:root{--p-popover-background:var(--p-overlay-popover-background);--p-popover-border-color:var(--p-overlay-popover-border-color);--p-popover-color:var(--p-overlay-popover-color);--p-popover-border-radius:var(--p-overlay-popover-border-radius);--p-popover-shadow:var(--p-overlay-popover-shadow);--p-popover-gutter:10px;--p-popover-arrow-offset:1.25rem;--p-popover-content-padding:var(--p-overlay-popover-padding);}}</style><style type="text/css" data-primevue-style-id="popover-style">@layer primevue{.p-popover{margin-block-start:var(--p-popover-gutter);background:var(--p-popover-background);color:var(--p-popover-color);border:1px solid var(--p-popover-border-color);border-radius:var(--p-popover-border-radius);box-shadow:var(--p-popover-shadow);}.p-popover-content{padding:var(--p-popover-content-padding);}.p-popover-flipped{margin-block-start:calc(var(--p-popover-gutter) * -1);margin-block-end:var(--p-popover-gutter);}.p-popover-enter-from{opacity:0;transform:scaleY(0.8);}.p-popover-leave-to{opacity:0;}.p-popover-enter-active{transition:transform 0.12s cubic-bezier(0,0,0.2,1),opacity 0.12s cubic-bezier(0,0,0.2,1);}.p-popover-leave-active{transition:opacity 0.1s linear;}.p-popover:after,.p-popover:before{bottom:100%;left:calc(var(--p-popover-arrow-offset) + var(--p-popover-arrow-left));content:" ";height:0;width:0;position:absolute;pointer-events:none;}.p-popover:after{border-width:calc(var(--p-popover-gutter) - 2px);margin-left:calc(-1 * (var(--p-popover-gutter) - 2px));border-style:solid;border-color:transparent;border-bottom-color:var(--p-popover-background);}.p-popover:before{border-width:var(--p-popover-gutter);margin-left:calc(-1 * var(--p-popover-gutter));border-style:solid;border-color:transparent;border-bottom-color:var(--p-popover-border-color);}.p-popover-flipped:after,.p-popover-flipped:before{bottom:auto;top:100%;}.p-popover.p-popover-flipped:after{border-bottom-color:transparent;border-top-color:var(--p-popover-background);}.p-popover.p-popover-flipped:before{border-bottom-color:transparent;border-top-color:var(--p-popover-border-color);}}</style><style type="text/css" data-primevue-style-id="tieredmenu-variables">@layer primevue{:root{--p-tieredmenu-background:var(--p-content-background);--p-tieredmenu-border-color:var(--p-content-border-color);--p-tieredmenu-color:var(--p-content-color);--p-tieredmenu-border-radius:var(--p-content-border-radius);--p-tieredmenu-shadow:var(--p-overlay-navigation-shadow);--p-tieredmenu-transition-duration:var(--p-transition-duration);--p-tieredmenu-list-padding:var(--p-navigation-list-padding);--p-tieredmenu-list-gap:var(--p-navigation-list-gap);--p-tieredmenu-item-focus-background:var(--p-navigation-item-focus-background);--p-tieredmenu-item-active-background:var(--p-navigation-item-active-background);--p-tieredmenu-item-color:var(--p-navigation-item-color);--p-tieredmenu-item-focus-color:var(--p-navigation-item-focus-color);--p-tieredmenu-item-active-color:var(--p-navigation-item-active-color);--p-tieredmenu-item-padding:var(--p-navigation-item-padding);--p-tieredmenu-item-border-radius:var(--p-navigation-item-border-radius);--p-tieredmenu-item-gap:var(--p-navigation-item-gap);--p-tieredmenu-item-icon-color:var(--p-navigation-item-icon-color);--p-tieredmenu-item-icon-focus-color:var(--p-navigation-item-icon-focus-color);--p-tieredmenu-item-icon-active-color:var(--p-navigation-item-icon-active-color);--p-tieredmenu-submenu-mobile-indent:1rem;--p-tieredmenu-submenu-icon-size:var(--p-navigation-submenu-icon-size);--p-tieredmenu-submenu-icon-color:var(--p-navigation-submenu-icon-color);--p-tieredmenu-submenu-icon-focus-color:var(--p-navigation-submenu-icon-focus-color);--p-tieredmenu-submenu-icon-active-color:var(--p-navigation-submenu-icon-active-color);--p-tieredmenu-separator-border-color:var(--p-content-border-color);}}</style><style type="text/css" data-primevue-style-id="tieredmenu-style">@layer primevue{.p-tieredmenu{background:var(--p-tieredmenu-background);color:var(--p-tieredmenu-color);border:1px solid var(--p-tieredmenu-border-color);border-radius:var(--p-tieredmenu-border-radius);min-width:12.5rem;}.p-tieredmenu-root-list,.p-tieredmenu-submenu{margin:0;padding:var(--p-tieredmenu-list-padding);list-style:none;outline:0 none;display:flex;flex-direction:column;gap:var(--p-tieredmenu-list-gap);}.p-tieredmenu-submenu{position:absolute;min-width:100%;z-index:1;background:var(--p-tieredmenu-background);color:var(--p-tieredmenu-color);border:1px solid var(--p-tieredmenu-border-color);border-radius:var(--p-tieredmenu-border-radius);box-shadow:var(--p-tieredmenu-shadow);}.p-tieredmenu-item{position:relative;}.p-tieredmenu-item-content{transition:background var(--p-tieredmenu-transition-duration),color var(--p-tieredmenu-transition-duration);border-radius:var(--p-tieredmenu-item-border-radius);color:var(--p-tieredmenu-item-color);}.p-tieredmenu-item-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative;color:inherit;padding:var(--p-tieredmenu-item-padding);gap:var(--p-tieredmenu-item-gap);user-select:none;outline:0 none;}.p-tieredmenu-item-label{line-height:1;}.p-tieredmenu-item-icon{color:var(--p-tieredmenu-item-icon-color);}.p-tieredmenu-submenu-icon{color:var(--p-tieredmenu-submenu-icon-color);margin-left:auto;font-size:var(--p-tieredmenu-submenu-icon-size);width:var(--p-tieredmenu-submenu-icon-size);height:var(--p-tieredmenu-submenu-icon-size);}.p-tieredmenu-submenu-icon:dir(rtl){margin-left:0;margin-right:auto;}.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content{color:var(--p-tieredmenu-item-focus-color);background:var(--p-tieredmenu-item-focus-background);}.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-item-icon{color:var(--p-tieredmenu-item-icon-focus-color);}.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon{color:var(--p-tieredmenu-submenu-icon-focus-color);}.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover{color:var(--p-tieredmenu-item-focus-color);background:var(--p-tieredmenu-item-focus-background);}.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-item-icon{color:var(--p-tieredmenu-item-icon-focus-color);}.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-submenu-icon{color:var(--p-tieredmenu-submenu-icon-focus-color);}.p-tieredmenu-item-active > .p-tieredmenu-item-content{color:var(--p-tieredmenu-item-active-color);background:var(--p-tieredmenu-item-active-background);}.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-item-icon{color:var(--p-tieredmenu-item-icon-active-color);}.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon{color:var(--p-tieredmenu-submenu-icon-active-color);}.p-tieredmenu-separator{border-block-start:1px solid var(--p-tieredmenu-separator-border-color);}.p-tieredmenu-overlay{box-shadow:var(--p-tieredmenu-shadow);}.p-tieredmenu-enter-from,.p-tieredmenu-leave-active{opacity:0;}.p-tieredmenu-enter-active{transition:opacity 250ms;}.p-tieredmenu-mobile .p-tieredmenu-submenu{position:static;box-shadow:none;border:0 none;padding-inline-start:var(--p-tieredmenu-submenu-mobile-indent);padding-inline-end:0;}.p-tieredmenu-mobile .p-tieredmenu-submenu:dir(rtl){padding-inline-start:0;padding-inline-end:var(--p-tieredmenu-submenu-mobile-indent);}.p-tieredmenu-mobile .p-tieredmenu-submenu-icon{transition:transform 0.2s;transform:rotate(90deg);}.p-tieredmenu-mobile .p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon{transform:rotate(-90deg);}}</style><style type="text/css" data-primevue-style-id="menu-variables">@layer primevue{:root{--p-menu-background:var(--p-content-background);--p-menu-border-color:var(--p-content-border-color);--p-menu-color:var(--p-content-color);--p-menu-border-radius:var(--p-content-border-radius);--p-menu-shadow:var(--p-overlay-navigation-shadow);--p-menu-transition-duration:var(--p-transition-duration);--p-menu-list-padding:var(--p-navigation-list-padding);--p-menu-list-gap:var(--p-navigation-list-gap);--p-menu-item-focus-background:var(--p-navigation-item-focus-background);--p-menu-item-color:var(--p-navigation-item-color);--p-menu-item-focus-color:var(--p-navigation-item-focus-color);--p-menu-item-padding:var(--p-navigation-item-padding);--p-menu-item-border-radius:var(--p-navigation-item-border-radius);--p-menu-item-gap:var(--p-navigation-item-gap);--p-menu-item-icon-color:var(--p-navigation-item-icon-color);--p-menu-item-icon-focus-color:var(--p-navigation-item-icon-focus-color);--p-menu-submenu-label-padding:var(--p-navigation-submenu-label-padding);--p-menu-submenu-label-font-weight:var(--p-navigation-submenu-label-font-weight);--p-menu-submenu-label-background:var(--p-navigation-submenu-label-background);--p-menu-submenu-label-color:var(--p-navigation-submenu-label-color);--p-menu-separator-border-color:var(--p-content-border-color);}}</style><style type="text/css" data-primevue-style-id="menu-style">@layer primevue{.p-menu{background:var(--p-menu-background);color:var(--p-menu-color);border:1px solid var(--p-menu-border-color);border-radius:var(--p-menu-border-radius);min-width:12.5rem;}.p-menu-list{margin:0;padding:var(--p-menu-list-padding);outline:0 none;list-style:none;display:flex;flex-direction:column;gap:var(--p-menu-list-gap);}.p-menu-item-content{transition:background var(--p-menu-transition-duration),color var(--p-menu-transition-duration);border-radius:var(--p-menu-item-border-radius);color:var(--p-menu-item-color);}.p-menu-item-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative;color:inherit;padding:var(--p-menu-item-padding);gap:var(--p-menu-item-gap);user-select:none;outline:0 none;}.p-menu-item-label{line-height:1;}.p-menu-item-icon{color:var(--p-menu-item-icon-color);}.p-menu-item.p-focus .p-menu-item-content{color:var(--p-menu-item-focus-color);background:var(--p-menu-item-focus-background);}.p-menu-item.p-focus .p-menu-item-icon{color:var(--p-menu-item-icon-focus-color);}.p-menu-item:not(.p-disabled) .p-menu-item-content:hover{color:var(--p-menu-item-focus-color);background:var(--p-menu-item-focus-background);}.p-menu-item:not(.p-disabled) .p-menu-item-content:hover .p-menu-item-icon{color:var(--p-menu-item-icon-focus-color);}.p-menu-overlay{box-shadow:var(--p-menu-shadow);}.p-menu-submenu-label{background:var(--p-menu-submenu-label-background);padding:var(--p-menu-submenu-label-padding);color:var(--p-menu-submenu-label-color);font-weight:var(--p-menu-submenu-label-font-weight);}.p-menu-separator{border-block-start:1px solid var(--p-menu-separator-border-color);}}</style><style type="text/css" data-primevue-style-id="breadcrumb-variables">@layer primevue{:root{--p-breadcrumb-padding:1rem;--p-breadcrumb-background:var(--p-content-background);--p-breadcrumb-gap:0.5rem;--p-breadcrumb-transition-duration:var(--p-transition-duration);--p-breadcrumb-item-color:var(--p-text-muted-color);--p-breadcrumb-item-hover-color:var(--p-text-color);--p-breadcrumb-item-border-radius:var(--p-content-border-radius);--p-breadcrumb-item-gap:var(--p-navigation-item-gap);--p-breadcrumb-item-icon-color:var(--p-navigation-item-icon-color);--p-breadcrumb-item-icon-hover-color:var(--p-navigation-item-icon-focus-color);--p-breadcrumb-item-focus-ring-width:var(--p-focus-ring-width);--p-breadcrumb-item-focus-ring-style:var(--p-focus-ring-style);--p-breadcrumb-item-focus-ring-color:var(--p-focus-ring-color);--p-breadcrumb-item-focus-ring-offset:var(--p-focus-ring-offset);--p-breadcrumb-item-focus-ring-shadow:var(--p-focus-ring-shadow);--p-breadcrumb-separator-color:var(--p-navigation-item-icon-color);}}</style><style type="text/css" data-primevue-style-id="breadcrumb-style">@layer primevue{.p-breadcrumb{background:var(--p-breadcrumb-background);padding:var(--p-breadcrumb-padding);overflow-x:auto;}.p-breadcrumb-list{margin:0;padding:0;list-style-type:none;display:flex;align-items:center;flex-wrap:nowrap;gap:var(--p-breadcrumb-gap);}.p-breadcrumb-separator{display:flex;align-items:center;color:var(--p-breadcrumb-separator-color);}.p-breadcrumb-separator-icon:dir(rtl){transform:rotate(180deg);}.p-breadcrumb::-webkit-scrollbar{display:none;}.p-breadcrumb-item-link{text-decoration:none;display:flex;align-items:center;gap:var(--p-breadcrumb-item-gap);transition:background var(--p-breadcrumb-transition-duration),color var(--p-breadcrumb-transition-duration),outline-color var(--p-breadcrumb-transition-duration),box-shadow var(--p-breadcrumb-transition-duration);border-radius:var(--p-breadcrumb-item-border-radius);outline-color:transparent;color:var(--p-breadcrumb-item-color);}.p-breadcrumb-item-link:focus-visible{box-shadow:var(--p-breadcrumb-item-focus-ring-shadow);outline:var(--p-breadcrumb-item-focus-ring-width) var(--p-breadcrumb-item-focus-ring-style) var(--p-breadcrumb-item-focus-ring-color);outline-offset:var(--p-breadcrumb-item-focus-ring-offset);}.p-breadcrumb-item-link:hover .p-breadcrumb-item-label{color:var(--p-breadcrumb-item-hover-color);}.p-breadcrumb-item-label{transition:inherit;}.p-breadcrumb-item-icon{color:var(--p-breadcrumb-item-icon-color);transition:inherit;}.p-breadcrumb-item-link:hover .p-breadcrumb-item-icon{color:var(--p-breadcrumb-item-icon-hover-color);}}</style><style type="text/css" data-primevue-style-id="contextmenu-variables">@layer primevue{:root{--p-contextmenu-background:var(--p-content-background);--p-contextmenu-border-color:var(--p-content-border-color);--p-contextmenu-color:var(--p-content-color);--p-contextmenu-border-radius:var(--p-content-border-radius);--p-contextmenu-shadow:var(--p-overlay-navigation-shadow);--p-contextmenu-transition-duration:var(--p-transition-duration);--p-contextmenu-list-padding:var(--p-navigation-list-padding);--p-contextmenu-list-gap:var(--p-navigation-list-gap);--p-contextmenu-item-focus-background:var(--p-navigation-item-focus-background);--p-contextmenu-item-active-background:var(--p-navigation-item-active-background);--p-contextmenu-item-color:var(--p-navigation-item-color);--p-contextmenu-item-focus-color:var(--p-navigation-item-focus-color);--p-contextmenu-item-active-color:var(--p-navigation-item-active-color);--p-contextmenu-item-padding:var(--p-navigation-item-padding);--p-contextmenu-item-border-radius:var(--p-navigation-item-border-radius);--p-contextmenu-item-gap:var(--p-navigation-item-gap);--p-contextmenu-item-icon-color:var(--p-navigation-item-icon-color);--p-contextmenu-item-icon-focus-color:var(--p-navigation-item-icon-focus-color);--p-contextmenu-item-icon-active-color:var(--p-navigation-item-icon-active-color);--p-contextmenu-submenu-mobile-indent:1rem;--p-contextmenu-submenu-icon-size:var(--p-navigation-submenu-icon-size);--p-contextmenu-submenu-icon-color:var(--p-navigation-submenu-icon-color);--p-contextmenu-submenu-icon-focus-color:var(--p-navigation-submenu-icon-focus-color);--p-contextmenu-submenu-icon-active-color:var(--p-navigation-submenu-icon-active-color);--p-contextmenu-separator-border-color:var(--p-content-border-color);}}</style><style type="text/css" data-primevue-style-id="contextmenu-style">@layer primevue{.p-contextmenu{background:var(--p-contextmenu-background);color:var(--p-contextmenu-color);border:1px solid var(--p-contextmenu-border-color);border-radius:var(--p-contextmenu-border-radius);box-shadow:var(--p-contextmenu-shadow);min-width:12.5rem;}.p-contextmenu-root-list,.p-contextmenu-submenu{margin:0;padding:var(--p-contextmenu-list-padding);list-style:none;outline:0 none;display:flex;flex-direction:column;gap:var(--p-contextmenu-list-gap);}.p-contextmenu-submenu{position:absolute;display:flex;flex-direction:column;min-width:100%;z-index:1;background:var(--p-contextmenu-background);color:var(--p-contextmenu-color);border:1px solid var(--p-contextmenu-border-color);border-radius:var(--p-contextmenu-border-radius);box-shadow:var(--p-contextmenu-shadow);}.p-contextmenu-item{position:relative;}.p-contextmenu-item-content{transition:background var(--p-contextmenu-transition-duration),color var(--p-contextmenu-transition-duration);border-radius:var(--p-contextmenu-item-border-radius);color:var(--p-contextmenu-item-color);}.p-contextmenu-item-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative;color:inherit;padding:var(--p-contextmenu-item-padding);gap:var(--p-contextmenu-item-gap);user-select:none;}.p-contextmenu-item-label{line-height:1;}.p-contextmenu-item-icon{color:var(--p-contextmenu-item-icon-color);}.p-contextmenu-submenu-icon{color:var(--p-contextmenu-submenu-icon-color);margin-left:auto;font-size:var(--p-contextmenu-submenu-icon-size);width:var(--p-contextmenu-submenu-icon-size);height:var(--p-contextmenu-submenu-icon-size);}.p-contextmenu-submenu-icon:dir(rtl){margin-left:0;margin-right:auto;}.p-contextmenu-item.p-focus > .p-contextmenu-item-content{color:var(--p-contextmenu-item-focus-color);background:var(--p-contextmenu-item-focus-background);}.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-item-icon{color:var(--p-contextmenu-item-icon-focus-color);}.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-submenu-icon{color:var(--p-contextmenu-submenu-icon-focus-color);}.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover{color:var(--p-contextmenu-item-focus-color);background:var(--p-contextmenu-item-focus-background);}.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-item-icon{color:var(--p-contextmenu-item-icon-focus-color);}.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-submenu-icon{color:var(--p-contextmenu-submenu-icon-focus-color);}.p-contextmenu-item-active > .p-contextmenu-item-content{color:var(--p-contextmenu-item-active-color);background:var(--p-contextmenu-item-active-background);}.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-item-icon{color:var(--p-contextmenu-item-icon-active-color);}.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon{color:var(--p-contextmenu-submenu-icon-active-color);}.p-contextmenu-separator{border-block-start:1px solid var(--p-contextmenu-separator-border-color);}.p-contextmenu-enter-from,.p-contextmenu-leave-active{opacity:0;}.p-contextmenu-enter-active{transition:opacity 250ms;}.p-contextmenu-mobile .p-contextmenu-submenu{position:static;box-shadow:none;border:0 none;padding-inline-start:var(--p-tieredmenu-submenu-mobile-indent);padding-inline-end:0;}.p-contextmenu-mobile .p-contextmenu-submenu-icon{transition:transform 0.2s;transform:rotate(90deg);}.p-contextmenu-mobile .p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon{transform:rotate(-90deg);}}</style><style type="text/css" data-primevue-style-id="panel-variables">@layer primevue{:root{--p-panel-background:var(--p-content-background);--p-panel-border-color:var(--p-content-border-color);--p-panel-color:var(--p-content-color);--p-panel-border-radius:var(--p-content-border-radius);--p-panel-header-background:transparent;--p-panel-header-color:var(--p-text-color);--p-panel-header-padding:1.125rem;--p-panel-header-border-color:var(--p-content-border-color);--p-panel-header-border-width:0;--p-panel-header-border-radius:0;--p-panel-toggleable-header-padding:0.375rem 1.125rem;--p-panel-title-font-weight:600;--p-panel-content-padding:0 1.125rem 1.125rem 1.125rem;--p-panel-footer-padding:0 1.125rem 1.125rem 1.125rem;}}</style><style type="text/css" data-primevue-style-id="panel-style">@layer primevue{.p-panel{border:1px solid var(--p-panel-border-color);border-radius:var(--p-panel-border-radius);background:var(--p-panel-background);color:var(--p-panel-color);}.p-panel-header{display:flex;justify-content:space-between;align-items:center;padding:var(--p-panel-header-padding);background:var(--p-panel-header-background);color:var(--p-panel-header-color);border-style:solid;border-width:var(--p-panel-header-border-width);border-color:var(--p-panel-header-border-color);border-radius:var(--p-panel-header-border-radius);}.p-panel-toggleable .p-panel-header{padding:var(--p-panel-toggleable-header-padding);}.p-panel-title{line-height:1;font-weight:var(--p-panel-title-font-weight);}.p-panel-content{padding:var(--p-panel-content-padding);}.p-panel-footer{padding:var(--p-panel-footer-padding);}}</style><style type="text/css" data-primevue-style-id="galleria-variables">@layer primevue{:root{--p-galleria-border-width:1px;--p-galleria-border-color:var(--p-content-border-color);--p-galleria-border-radius:var(--p-content-border-radius);--p-galleria-transition-duration:var(--p-transition-duration);--p-galleria-nav-button-background:rgba(255,255,255,0.1);--p-galleria-nav-button-hover-background:rgba(255,255,255,0.2);--p-galleria-nav-button-color:var(--p-surface-100);--p-galleria-nav-button-hover-color:var(--p-surface-0);--p-galleria-nav-button-size:3rem;--p-galleria-nav-button-gutter:0.5rem;--p-galleria-nav-button-prev-border-radius:50%;--p-galleria-nav-button-next-border-radius:50%;--p-galleria-nav-button-focus-ring-width:var(--p-focus-ring-width);--p-galleria-nav-button-focus-ring-style:var(--p-focus-ring-style);--p-galleria-nav-button-focus-ring-color:var(--p-focus-ring-color);--p-galleria-nav-button-focus-ring-offset:var(--p-focus-ring-offset);--p-galleria-nav-button-focus-ring-shadow:var(--p-focus-ring-shadow);--p-galleria-nav-icon-size:1.5rem;--p-galleria-thumbnails-content-background:var(--p-content-background);--p-galleria-thumbnails-content-padding:1rem 0.25rem;--p-galleria-thumbnail-nav-button-size:2rem;--p-galleria-thumbnail-nav-button-border-radius:var(--p-content-border-radius);--p-galleria-thumbnail-nav-button-gutter:0.5rem;--p-galleria-thumbnail-nav-button-focus-ring-width:var(--p-focus-ring-width);--p-galleria-thumbnail-nav-button-focus-ring-style:var(--p-focus-ring-style);--p-galleria-thumbnail-nav-button-focus-ring-color:var(--p-focus-ring-color);--p-galleria-thumbnail-nav-button-focus-ring-offset:var(--p-focus-ring-offset);--p-galleria-thumbnail-nav-button-focus-ring-shadow:var(--p-focus-ring-shadow);--p-galleria-thumbnail-nav-button-icon-size:1rem;--p-galleria-caption-background:rgba(0,0,0,0.5);--p-galleria-caption-color:var(--p-surface-100);--p-galleria-caption-padding:1rem;--p-galleria-indicator-list-gap:0.5rem;--p-galleria-indicator-list-padding:1rem;--p-galleria-indicator-button-width:1rem;--p-galleria-indicator-button-height:1rem;--p-galleria-indicator-button-active-background:var(--p-primary-color);--p-galleria-indicator-button-border-radius:50%;--p-galleria-indicator-button-focus-ring-width:var(--p-focus-ring-width);--p-galleria-indicator-button-focus-ring-style:var(--p-focus-ring-style);--p-galleria-indicator-button-focus-ring-color:var(--p-focus-ring-color);--p-galleria-indicator-button-focus-ring-offset:var(--p-focus-ring-offset);--p-galleria-indicator-button-focus-ring-shadow:var(--p-focus-ring-shadow);--p-galleria-inset-indicator-list-background:rgba(0,0,0,0.5);--p-galleria-inset-indicator-button-background:rgba(255,255,255,0.4);--p-galleria-inset-indicator-button-hover-background:rgba(255,255,255,0.6);--p-galleria-inset-indicator-button-active-background:rgba(255,255,255,0.9);--p-galleria-close-button-size:3rem;--p-galleria-close-button-gutter:0.5rem;--p-galleria-close-button-background:rgba(255,255,255,0.1);--p-galleria-close-button-hover-background:rgba(255,255,255,0.2);--p-galleria-close-button-color:var(--p-surface-50);--p-galleria-close-button-hover-color:var(--p-surface-0);--p-galleria-close-button-border-radius:50%;--p-galleria-close-button-focus-ring-width:var(--p-focus-ring-width);--p-galleria-close-button-focus-ring-style:var(--p-focus-ring-style);--p-galleria-close-button-focus-ring-color:var(--p-focus-ring-color);--p-galleria-close-button-focus-ring-offset:var(--p-focus-ring-offset);--p-galleria-close-button-focus-ring-shadow:var(--p-focus-ring-shadow);--p-galleria-close-button-icon-size:1.5rem;--p-galleria-thumbnail-nav-button-hover-background:var(--p-surface-100);--p-galleria-thumbnail-nav-button-color:var(--p-surface-600);--p-galleria-thumbnail-nav-button-hover-color:var(--p-surface-700);--p-galleria-indicator-button-background:var(--p-surface-200);--p-galleria-indicator-button-hover-background:var(--p-surface-300);}}@layer primevue{.dark-theme,:root:has(.dark-theme){--p-galleria-thumbnail-nav-button-hover-background:var(--p-surface-700);--p-galleria-thumbnail-nav-button-color:var(--p-surface-400);--p-galleria-thumbnail-nav-button-hover-color:var(--p-surface-0);--p-galleria-indicator-button-background:var(--p-surface-700);--p-galleria-indicator-button-hover-background:var(--p-surface-600);}}</style><style type="text/css" data-primevue-style-id="galleria-style">@layer primevue{.p-galleria{overflow:hidden;border-style:solid;border-width:var(--p-galleria-border-width);border-color:var(--p-galleria-border-color);border-radius:var(--p-galleria-border-radius);}.p-galleria-content{display:flex;flex-direction:column;}.p-galleria-items-container{display:flex;flex-direction:column;position:relative;}.p-galleria-items{position:relative;display:flex;height:100%;}.p-galleria-nav-button{position:absolute!important;top:50%;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;background:var(--p-galleria-nav-button-background);color:var(--p-galleria-nav-button-color);width:var(--p-galleria-nav-button-size);height:var(--p-galleria-nav-button-size);transition:background var(--p-galleria-transition-duration),color var(--p-galleria-transition-duration),outline-color var(--p-galleria-transition-duration),box-shadow var(--p-galleria-transition-duration);margin:calc(-1 * calc(var(--p-galleria-nav-button-size)) / 2) var(--p-galleria-nav-button-gutter) 0 var(--p-galleria-nav-button-gutter);padding:0;user-select:none;border:0 none;cursor:pointer;outline-color:transparent;}.p-galleria-nav-button:not(.p-disabled):hover{background:var(--p-galleria-nav-button-hover-background);color:var(--p-galleria-nav-button-hover-color);}.p-galleria-nav-button:not(.p-disabled):focus-visible{box-shadow:var(--p-galleria-nav-button-focus-ring-shadow);outline:var(--p-galleria-nav-button-focus-ring-width) var(--p-galleria-nav-button-focus-ring-style) var(--p-galleria-nav-button-focus-ring-color);outline-offset:var(--p-galleria-nav-button-focus-ring-offset);}.p-galleria-next-icon,.p-galleria-prev-icon{font-size:var(--p-galleria-nav-icon-size);width:var(--p-galleria-nav-icon-size);height:var(--p-galleria-nav-icon-size);}.p-galleria-prev-button{border-radius:var(--p-galleria-nav-button-prev-border-radius);left:0;}.p-galleria-next-button{border-radius:var(--p-galleria-nav-button-next-border-radius);right:0;}.p-galleria-prev-button:dir(rtl){left:auto;right:0;transform:rotate(180deg);}.p-galleria-next-button:dir(rtl){right:auto;left:0;transform:rotate(180deg);}.p-galleria-item{display:flex;justify-content:center;align-items:center;height:100%;width:100%;}.p-galleria-hover-navigators .p-galleria-nav-button{pointer-events:none;opacity:0;transition:opacity var(--p-galleria-transition-duration) ease-in-out;}.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button{pointer-events:all;opacity:1;}.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button.p-disabled{pointer-events:none;}.p-galleria-caption{position:absolute;bottom:0;left:0;width:100%;background:var(--p-galleria-caption-background);color:var(--p-galleria-caption-color);padding:var(--p-galleria-caption-padding);}.p-galleria-thumbnails{display:flex;flex-direction:column;overflow:auto;flex-shrink:0;}.p-galleria-thumbnail-nav-button{align-self:center;flex:0 0 auto;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;margin:0 var(--p-galleria-thumbnail-nav-button-gutter);padding:0;border:none;user-select:none;cursor:pointer;background:transparent;color:var(--p-galleria-thumbnail-nav-button-color);width:var(--p-galleria-thumbnail-nav-button-size);height:var(--p-galleria-thumbnail-nav-button-size);transition:background var(--p-galleria-transition-duration),color var(--p-galleria-transition-duration),outline-color var(--p-galleria-transition-duration);outline-color:transparent;border-radius:var(--p-galleria-thumbnail-nav-button-border-radius);}.p-galleria-thumbnail-nav-button:hover{background:var(--p-galleria-thumbnail-nav-button-hover-background);color:var(--p-galleria-thumbnail-nav-button-hover-color);}.p-galleria-thumbnail-nav-button:focus-visible{box-shadow:var(--p-galleria-thumbnail-nav-button-focus-ring-shadow);outline:var(--p-galleria-thumbnail-nav-button-focus-ring-width) var(--p-galleria-thumbnail-nav-button-focus-ring-style) var(--p-galleria-thumbnail-nav-button-focus-ring-color);outline-offset:var(--p-galleria-thumbnail-nav-button-focus-ring-offset);}.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-next-icon,.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-prev-icon{font-size:var(--p-galleria-thumbnail-nav-button-icon-size);width:var(--p-galleria-thumbnail-nav-button-icon-size);height:var(--p-galleria-thumbnail-nav-button-icon-size);}.p-galleria-thumbnails-content{display:flex;flex-direction:row;background:var(--p-galleria-thumbnails-content-background);padding:var(--p-galleria-thumbnails-content-padding);}.p-galleria-thumbnails-viewport{overflow:hidden;width:100%;}.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-prev-button:dir(rtl),.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-next-button:dir(rtl){transform:rotate(180deg);}.p-galleria-thumbnail-items{display:flex;}.p-galleria-thumbnail-item{overflow:auto;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0.5;}.p-galleria-thumbnail{outline-color:transparent;}.p-galleria-thumbnail-item:hover{opacity:1;transition:opacity 0.3s;}.p-galleria-thumbnail-item-current{opacity:1;}.p-galleria-thumbnails-left .p-galleria-content,.p-galleria-thumbnails-right .p-galleria-content{flex-direction:row;}.p-galleria-thumbnails-left .p-galleria-items-container,.p-galleria-thumbnails-right .p-galleria-items-container{flex-direction:row;}.p-galleria-thumbnails-left .p-galleria-items-container,.p-galleria-thumbnails-top .p-galleria-items-container{order:2;}.p-galleria-thumbnails-left .p-galleria-thumbnails,.p-galleria-thumbnails-top .p-galleria-thumbnails{order:1;}.p-galleria-thumbnails-left .p-galleria-thumbnails-content,.p-galleria-thumbnails-right .p-galleria-thumbnails-content{flex-direction:column;flex-grow:1;}.p-galleria-thumbnails-left .p-galleria-thumbnail-items,.p-galleria-thumbnails-right .p-galleria-thumbnail-items{flex-direction:column;height:100%;}.p-galleria-indicator-list{display:flex;align-items:center;justify-content:center;padding:var(--p-galleria-indicator-list-padding);gap:var(--p-galleria-indicator-list-gap);margin:0;list-style:none;}.p-galleria-indicator-button{display:inline-flex;align-items:center;background:var(--p-galleria-indicator-button-background);width:var(--p-galleria-indicator-button-width);height:var(--p-galleria-indicator-button-height);transition:background var(--p-galleria-transition-duration),color var(--p-galleria-transition-duration),outline-color var(--p-galleria-transition-duration),box-shadow var(--p-galleria-transition-duration);outline-color:transparent;border-radius:var(--p-galleria-indicator-button-border-radius);margin:0;padding:0;border:none;user-select:none;cursor:pointer;}.p-galleria-indicator-button:hover{background:var(--p-galleria-indicator-button-hover-background);}.p-galleria-indicator-button:focus-visible{box-shadow:var(--p-galleria-indicator-button-focus-ring-shadow);outline:var(--p-galleria-indicator-button-focus-ring-width) var(--p-galleria-indicator-button-focus-ring-style) var(--p-galleria-indicator-button-focus-ring-color);outline-offset:var(--p-galleria-indicator-button-focus-ring-offset);}.p-galleria-indicator-active .p-galleria-indicator-button{background:var(--p-galleria-indicator-button-active-background);}.p-galleria-indicators-left .p-galleria-items-container,.p-galleria-indicators-right .p-galleria-items-container{flex-direction:row;align-items:center;}.p-galleria-indicators-left .p-galleria-items,.p-galleria-indicators-top .p-galleria-items{order:2;}.p-galleria-indicators-left .p-galleria-indicator-list,.p-galleria-indicators-top .p-galleria-indicator-list{order:1;}.p-galleria-indicators-left .p-galleria-indicator-list,.p-galleria-indicators-right .p-galleria-indicator-list{flex-direction:column;}.p-galleria-inset-indicators .p-galleria-indicator-list{position:absolute;display:flex;z-index:1;background:var(--p-galleria-inset-indicator-list-background);}.p-galleria-inset-indicators .p-galleria-indicator-button{background:var(--p-galleria-inset-indicator-button-background);}.p-galleria-inset-indicators .p-galleria-indicator-button:hover{background:var(--p-galleria-inset-indicator-button-hover-background);}.p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button{background:var(--p-galleria-inset-indicator-button-active-background);}.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list{top:0;left:0;width:100%;align-items:flex-start;}.p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicator-list{right:0;top:0;height:100%;align-items:flex-end;}.p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicator-list{bottom:0;left:0;width:100%;align-items:flex-end;}.p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicator-list{left:0;top:0;height:100%;align-items:flex-start;}.p-galleria-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}.p-galleria-close-button{position:absolute!important;top:0;right:0;display:flex;justify-content:center;align-items:center;overflow:hidden;margin:var(--p-galleria-close-button-gutter);background:var(--p-galleria-close-button-background);color:var(--p-galleria-close-button-color);width:var(--p-galleria-close-button-size);height:var(--p-galleria-close-button-size);padding:0;border:none;user-select:none;cursor:pointer;border-radius:var(--p-galleria-close-button-border-radius);outline-color:transparent;transition:background var(--p-galleria-transition-duration),color var(--p-galleria-transition-duration),outline-color var(--p-galleria-transition-duration);}.p-galleria-close-icon{font-size:var(--p-galleria-close-button-icon-size);width:var(--p-galleria-close-button-icon-size);height:var(--p-galleria-close-button-icon-size);}.p-galleria-close-button:hover{background:var(--p-galleria-close-button-hover-background);color:var(--p-galleria-close-button-hover-color);}.p-galleria-close-button:focus-visible{box-shadow:var(--p-galleria-close-button-focus-ring-shadow);outline:var(--p-galleria-close-button-focus-ring-width) var(--p-galleria-close-button-focus-ring-style) var(--p-galleria-close-button-focus-ring-color);outline-offset:var(--p-galleria-close-button-focus-ring-offset);}.p-galleria-mask .p-galleria-nav-button{position:fixed;top:50%;}.p-galleria-enter-active{transition:all 150ms cubic-bezier(0,0,0.2,1);}.p-galleria-leave-active{transition:all 150ms cubic-bezier(0.4,0,0.2,1);}.p-galleria-enter-from,.p-galleria-leave-to{opacity:0;transform:scale(0.7);}.p-galleria-enter-active .p-galleria-nav-button{opacity:0;}.p-items-hidden .p-galleria-thumbnail-item{visibility:hidden;}.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active{visibility:visible;}}</style><style type="text/css" data-primevue-style-id="buttongroup-style">@layer primevue{.p-buttongroup{display:inline-flex;}.p-buttongroup .p-button{margin:0;}.p-buttongroup .p-button:not(:last-child),.p-buttongroup .p-button:not(:last-child):hover{border-inline-end:0 none;}.p-buttongroup .p-button:not(:first-of-type):not(:last-of-type){border-radius:0;}.p-buttongroup .p-button:first-of-type:not(:only-of-type){border-start-end-radius:0;border-end-end-radius:0;}.p-buttongroup .p-button:last-of-type:not(:only-of-type){border-start-start-radius:0;border-end-start-radius:0;}.p-buttongroup .p-button:focus{position:relative;z-index:1;}}</style><style type="text/css" data-primevue-style-id="tabs-variables">@layer primevue{:root{--p-tabs-transition-duration:var(--p-transition-duration);--p-tabs-tablist-border-width:0 0 1px 0;--p-tabs-tablist-background:var(--p-content-background);--p-tabs-tablist-border-color:var(--p-content-border-color);--p-tabs-tab-background:transparent;--p-tabs-tab-hover-background:transparent;--p-tabs-tab-active-background:transparent;--p-tabs-tab-border-width:0 0 1px 0;--p-tabs-tab-border-color:var(--p-content-border-color);--p-tabs-tab-hover-border-color:var(--p-content-border-color);--p-tabs-tab-active-border-color:var(--p-primary-color);--p-tabs-tab-color:var(--p-text-muted-color);--p-tabs-tab-hover-color:var(--p-text-color);--p-tabs-tab-active-color:var(--p-primary-color);--p-tabs-tab-padding:1rem 1.125rem;--p-tabs-tab-font-weight:600;--p-tabs-tab-margin:0 0 -1px 0;--p-tabs-tab-gap:0.5rem;--p-tabs-tab-focus-ring-width:var(--p-focus-ring-width);--p-tabs-tab-focus-ring-style:var(--p-focus-ring-style);--p-tabs-tab-focus-ring-color:var(--p-focus-ring-color);--p-tabs-tab-focus-ring-offset:-1px;--p-tabs-tab-focus-ring-shadow:var(--p-focus-ring-shadow);--p-tabs-tabpanel-background:var(--p-content-background);--p-tabs-tabpanel-color:var(--p-content-color);--p-tabs-tabpanel-padding:0.875rem 1.125rem 1.125rem 1.125rem;--p-tabs-tabpanel-focus-ring-width:var(--p-focus-ring-width);--p-tabs-tabpanel-focus-ring-style:var(--p-focus-ring-style);--p-tabs-tabpanel-focus-ring-color:var(--p-focus-ring-color);--p-tabs-tabpanel-focus-ring-offset:var(--p-focus-ring-offset);--p-tabs-tabpanel-focus-ring-shadow:inset var(--p-focus-ring-shadow);--p-tabs-nav-button-background:var(--p-content-background);--p-tabs-nav-button-color:var(--p-text-muted-color);--p-tabs-nav-button-hover-color:var(--p-text-color);--p-tabs-nav-button-width:2.5rem;--p-tabs-nav-button-focus-ring-width:var(--p-focus-ring-width);--p-tabs-nav-button-focus-ring-style:var(--p-focus-ring-style);--p-tabs-nav-button-focus-ring-color:var(--p-focus-ring-color);--p-tabs-nav-button-focus-ring-offset:-1px;--p-tabs-nav-button-focus-ring-shadow:var(--p-focus-ring-shadow);--p-tabs-active-bar-height:1px;--p-tabs-active-bar-bottom:-1px;--p-tabs-active-bar-background:var(--p-primary-color);--p-tabs-nav-button-shadow:0px 0px 10px 50px rgba(255,255,255,0.6);}}@layer primevue{.dark-theme,:root:has(.dark-theme){--p-tabs-nav-button-shadow:0px 0px 10px 50px color-mix(in srgb,var(--p-content-background),transparent 50%);}}</style><style type="text/css" data-primevue-style-id="tabs-style">@layer primevue{.p-tabs{display:flex;flex-direction:column;}.p-tablist{display:flex;position:relative;}.p-tabs-scrollable > .p-tablist{overflow:hidden;}.p-tablist-viewport{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto;}.p-tablist-viewport::-webkit-scrollbar{display:none;}.p-tablist-tab-list{position:relative;display:flex;background:var(--p-tabs-tablist-background);border-style:solid;border-color:var(--p-tabs-tablist-border-color);border-width:var(--p-tabs-tablist-border-width);}.p-tablist-content{flex-grow:1;}.p-tablist-nav-button{all:unset;position:absolute!important;flex-shrink:0;inset-block-start:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center;background:var(--p-tabs-nav-button-background);color:var(--p-tabs-nav-button-color);width:var(--p-tabs-nav-button-width);transition:color var(--p-tabs-transition-duration),outline-color var(--p-tabs-transition-duration),box-shadow var(--p-tabs-transition-duration);box-shadow:var(--p-tabs-nav-button-shadow);outline-color:transparent;cursor:pointer;}.p-tablist-nav-button:focus-visible{z-index:1;box-shadow:var(--p-tabs-nav-button-focus-ring-shadow);outline:var(--p-tabs-nav-button-focus-ring-width) var(--p-tabs-nav-button-focus-ring-style) var(--p-tabs-nav-button-focus-ring-color);outline-offset:var(--p-tabs-nav-button-focus-ring-offset);}.p-tablist-nav-button:hover{color:var(--p-tabs-nav-button-hover-color);}.p-tablist-prev-button{inset-inline-start:0;}.p-tablist-next-button{inset-inline-end:0;}.p-tablist-prev-button:dir(rtl),.p-tablist-next-button:dir(rtl){transform:rotate(180deg);}.p-tab{flex-shrink:0;cursor:pointer;user-select:none;position:relative;border-style:solid;white-space:nowrap;background:var(--p-tabs-tab-background);border-width:var(--p-tabs-tab-border-width);border-color:var(--p-tabs-tab-border-color);color:var(--p-tabs-tab-color);padding:var(--p-tabs-tab-padding);font-weight:var(--p-tabs-tab-font-weight);transition:background var(--p-tabs-transition-duration),border-color var(--p-tabs-transition-duration),color var(--p-tabs-transition-duration),outline-color var(--p-tabs-transition-duration),box-shadow var(--p-tabs-transition-duration);margin:var(--p-tabs-tab-margin);outline-color:transparent;}.p-tab:not(.p-disabled):focus-visible{z-index:1;box-shadow:var(--p-tabs-tab-focus-ring-shadow);outline:var(--p-tabs-tab-focus-ring-width) var(--p-tabs-tab-focus-ring-style) var(--p-tabs-tab-focus-ring-color);outline-offset:var(--p-tabs-tab-focus-ring-offset);}.p-tab:not(.p-tab-active):not(.p-disabled):hover{background:var(--p-tabs-tab-hover-background);border-color:var(--p-tabs-tab-hover-border-color);color:var(--p-tabs-tab-hover-color);}.p-tab-active{background:var(--p-tabs-tab-active-background);border-color:var(--p-tabs-tab-active-border-color);color:var(--p-tabs-tab-active-color);}.p-tabpanels{background:var(--p-tabs-tabpanel-background);color:var(--p-tabs-tabpanel-color);padding:var(--p-tabs-tabpanel-padding);outline:0 none;}.p-tabpanel:focus-visible{box-shadow:var(--p-tabs-tabpanel-focus-ring-shadow);outline:var(--p-tabs-tabpanel-focus-ring-width) var(--p-tabs-tabpanel-focus-ring-style) var(--p-tabs-tabpanel-focus-ring-color);outline-offset:var(--p-tabs-tabpanel-focus-ring-offset);}.p-tablist-active-bar{z-index:1;display:block;position:absolute;inset-block-end:var(--p-tabs-active-bar-bottom);height:var(--p-tabs-active-bar-height);background:var(--p-tabs-active-bar-background);transition:250ms cubic-bezier(0.35,0,0.25,1);}}</style><style type="text/css" data-primevue-style-id="splitter-variables">@layer primevue{:root{--p-splitter-background:var(--p-content-background);--p-splitter-border-color:var(--p-content-border-color);--p-splitter-color:var(--p-content-color);--p-splitter-transition-duration:var(--p-transition-duration);--p-splitter-gutter-background:var(--p-content-border-color);--p-splitter-handle-size:24px;--p-splitter-handle-background:transparent;--p-splitter-handle-border-radius:var(--p-content-border-radius);--p-splitter-handle-focus-ring-width:var(--p-focus-ring-width);--p-splitter-handle-focus-ring-style:var(--p-focus-ring-style);--p-splitter-handle-focus-ring-color:var(--p-focus-ring-color);--p-splitter-handle-focus-ring-offset:var(--p-focus-ring-offset);--p-splitter-handle-focus-ring-shadow:var(--p-focus-ring-shadow);}}</style><style type="text/css" data-primevue-style-id="splitter-style">@layer primevue{.p-splitter{display:flex;flex-wrap:nowrap;border:1px solid var(--p-splitter-border-color);background:var(--p-splitter-background);border-radius:var(--p-border-radius-md);color:var(--p-splitter-color);}.p-splitter-vertical{flex-direction:column;}.p-splitter-gutter{flex-grow:0;flex-shrink:0;display:flex;align-items:center;justify-content:center;z-index:1;background:var(--p-splitter-gutter-background);}.p-splitter-gutter-handle{border-radius:var(--p-splitter-handle-border-radius);background:var(--p-splitter-handle-background);transition:outline-color var(--p-splitter-transition-duration),box-shadow var(--p-splitter-transition-duration);outline-color:transparent;}.p-splitter-gutter-handle:focus-visible{box-shadow:var(--p-splitter-handle-focus-ring-shadow);outline:var(--p-splitter-handle-focus-ring-width) var(--p-splitter-handle-focus-ring-style) var(--p-splitter-handle-focus-ring-color);outline-offset:var(--p-splitter-handle-focus-ring-offset);}.p-splitter-horizontal.p-splitter-resizing{cursor:col-resize;user-select:none;}.p-splitter-vertical.p-splitter-resizing{cursor:row-resize;user-select:none;}.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle{height:var(--p-splitter-handle-size);width:100%;}.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle{width:var(--p-splitter-handle-size);height:100%;}.p-splitter-horizontal > .p-splitter-gutter{cursor:col-resize;}.p-splitter-vertical > .p-splitter-gutter{cursor:row-resize;}.p-splitterpanel{flex-grow:1;overflow:hidden;}.p-splitterpanel-nested{display:flex;}.p-splitterpanel .p-splitter{flex-grow:1;border:0 none;}}</style><style type="text/css" data-primevue-style-id="ripple-directive-variables">@layer primevue{:root{--p-ripple-background:rgba(0,0,0,0.1);}}@layer primevue{.dark-theme,:root:has(.dark-theme){--p-ripple-background:rgba(255,255,255,0.3);}}</style><style type="text/css" data-primevue-style-id="ripple-directive-style">@layer primevue{.p-ink{display:block;position:absolute;background:var(--p-ripple-background);border-radius:100%;transform:scale(0);pointer-events:none;}.p-ink-active{animation:ripple 0.4s linear;}@keyframes ripple{100%{opacity:0;transform:scale(2.5);}}}</style><style type="text/css" data-primevue-style-id="togglebutton-variables">@layer primevue{:root{--p-togglebutton-padding:0.5rem 1rem;--p-togglebutton-border-radius:var(--p-content-border-radius);--p-togglebutton-gap:0.5rem;--p-togglebutton-font-weight:500;--p-togglebutton-disabled-background:var(--p-form-field-disabled-background);--p-togglebutton-disabled-border-color:var(--p-form-field-disabled-background);--p-togglebutton-disabled-color:var(--p-form-field-disabled-color);--p-togglebutton-invalid-border-color:var(--p-form-field-invalid-border-color);--p-togglebutton-focus-ring-width:var(--p-focus-ring-width);--p-togglebutton-focus-ring-style:var(--p-focus-ring-style);--p-togglebutton-focus-ring-color:var(--p-focus-ring-color);--p-togglebutton-focus-ring-offset:var(--p-focus-ring-offset);--p-togglebutton-focus-ring-shadow:var(--p-focus-ring-shadow);--p-togglebutton-transition-duration:var(--p-form-field-transition-duration);--p-togglebutton-sm-font-size:var(--p-form-field-sm-font-size);--p-togglebutton-sm-padding:0.375rem 0.75rem;--p-togglebutton-lg-font-size:var(--p-form-field-lg-font-size);--p-togglebutton-lg-padding:0.625rem 1.25rem;--p-togglebutton-icon-disabled-color:var(--p-form-field-disabled-color);--p-togglebutton-content-left:0.25rem;--p-togglebutton-content-top:0.25rem;--p-togglebutton-content-checked-shadow:0px 1px 2px 0px rgba(0,0,0,0.02),0px 1px 2px 0px rgba(0,0,0,0.04);--p-togglebutton-background:var(--p-surface-100);--p-togglebutton-checked-background:var(--p-surface-100);--p-togglebutton-hover-background:var(--p-surface-100);--p-togglebutton-border-color:var(--p-surface-100);--p-togglebutton-color:var(--p-surface-500);--p-togglebutton-hover-color:var(--p-surface-700);--p-togglebutton-checked-color:var(--p-surface-900);--p-togglebutton-checked-border-color:var(--p-surface-100);--p-togglebutton-content-checked-background:var(--p-surface-0);--p-togglebutton-icon-color:var(--p-surface-500);--p-togglebutton-icon-hover-color:var(--p-surface-700);--p-togglebutton-icon-checked-color:var(--p-surface-900);}}@layer primevue{.dark-theme,:root:has(.dark-theme){--p-togglebutton-background:var(--p-surface-950);--p-togglebutton-checked-background:var(--p-surface-950);--p-togglebutton-hover-background:var(--p-surface-950);--p-togglebutton-border-color:var(--p-surface-950);--p-togglebutton-color:var(--p-surface-400);--p-togglebutton-hover-color:var(--p-surface-300);--p-togglebutton-checked-color:var(--p-surface-0);--p-togglebutton-checked-border-color:var(--p-surface-950);--p-togglebutton-content-checked-background:var(--p-surface-800);--p-togglebutton-icon-color:var(--p-surface-400);--p-togglebutton-icon-hover-color:var(--p-surface-300);--p-togglebutton-icon-checked-color:var(--p-surface-0);}}</style><style type="text/css" data-primevue-style-id="togglebutton-style">@layer primevue{.p-togglebutton{display:inline-flex;cursor:pointer;user-select:none;align-items:center;justify-content:center;overflow:hidden;position:relative;color:var(--p-togglebutton-color);background:var(--p-togglebutton-background);border:1px solid var(--p-togglebutton-border-color);padding:var(--p-togglebutton-padding);font-size:1rem;font-family:inherit;font-feature-settings:inherit;transition:background var(--p-togglebutton-transition-duration),color var(--p-togglebutton-transition-duration),border-color var(--p-togglebutton-transition-duration),outline-color var(--p-togglebutton-transition-duration),box-shadow var(--p-togglebutton-transition-duration);border-radius:var(--p-togglebutton-border-radius);outline-color:transparent;font-weight:var(--p-togglebutton-font-weight);}.p-togglebutton-content{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--p-togglebutton-gap);}.p-togglebutton-label,.p-togglebutton-icon{position:relative;transition:none;}.p-togglebutton::before{content:"";background:transparent;transition:background var(--p-togglebutton-transition-duration),color var(--p-togglebutton-transition-duration),border-color var(--p-togglebutton-transition-duration),outline-color var(--p-togglebutton-transition-duration),box-shadow var(--p-togglebutton-transition-duration);position:absolute;inset-inline-start:var(--p-togglebutton-content-left);inset-block-start:var(--p-togglebutton-content-top);width:calc(100% - calc(2 * var(--p-togglebutton-content-left)));height:calc(100% - calc(2 * var(--p-togglebutton-content-top)));border-radius:var(--p-togglebutton-border-radius);}.p-togglebutton.p-togglebutton-checked::before{background:var(--p-togglebutton-content-checked-background);box-shadow:var(--p-togglebutton-content-checked-shadow);}.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover{background:var(--p-togglebutton-hover-background);color:var(--p-togglebutton-hover-color);}.p-togglebutton.p-togglebutton-checked{background:var(--p-togglebutton-checked-background);border-color:var(--p-togglebutton-checked-border-color);color:var(--p-togglebutton-checked-color);}.p-togglebutton:focus-visible{box-shadow:var(--p-togglebutton-focus-ring-shadow);outline:var(--p-togglebutton-focus-ring-width) var(--p-togglebutton-focus-ring-style) var(--p-togglebutton-focus-ring-color);outline-offset:var(--p-togglebutton-focus-ring-offset);}.p-togglebutton.p-invalid{border-color:var(--p-togglebutton-invalid-border-color);}.p-togglebutton:disabled{opacity:1;cursor:default;background:var(--p-togglebutton-disabled-background);border-color:var(--p-togglebutton-disabled-border-color);color:var(--p-togglebutton-disabled-color);}.p-togglebutton-icon{color:var(--p-togglebutton-icon-color);}.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon{color:var(--p-togglebutton-icon-hover-color);}.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon{color:var(--p-togglebutton-icon-checked-color);}.p-togglebutton:disabled .p-togglebutton-icon{color:var(--p-togglebutton-icon-disabled-color);}.p-togglebutton-sm{padding:var(--p-togglebutton-sm-padding);font-size:var(--p-togglebutton-sm-font-size);}.p-togglebutton-lg{padding:var(--p-togglebutton-lg-padding);font-size:var(--p-togglebutton-lg-font-size);}}</style><link rel="modulepreload" as="script" crossorigin="" href="http://127.0.0.1:8000/assets/releaseStore-BJNg0--S.js"><style type="text/css" data-primevue-style-id="baseicon">.p-icon{display:inline-block;vertical-align:baseline;}.p-icon-spin{-webkit-animation:p-icon-spin 2s infinite linear;animation:p-icon-spin 2s infinite linear;}@-webkit-keyframes p-icon-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg);}}@keyframes p-icon-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg);}}</style><style type="text/css" data-primevue-style-id="button-variables">@layer primevue{:root{--p-button-border-radius:var(--p-form-field-border-radius);--p-button-rounded-border-radius:2rem;--p-button-gap:0.5rem;--p-button-padding-x:var(--p-form-field-padding-x);--p-button-padding-y:var(--p-form-field-padding-y);--p-button-icon-only-width:2.5rem;--p-button-sm-font-size:var(--p-form-field-sm-font-size);--p-button-sm-padding-x:var(--p-form-field-sm-padding-x);--p-button-sm-padding-y:var(--p-form-field-sm-padding-y);--p-button-lg-font-size:var(--p-form-field-lg-font-size);--p-button-lg-padding-x:var(--p-form-field-lg-padding-x);--p-button-lg-padding-y:var(--p-form-field-lg-padding-y);--p-button-label-font-weight:500;--p-button-raised-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12);--p-button-focus-ring-width:var(--p-focus-ring-width);--p-button-focus-ring-style:var(--p-focus-ring-style);--p-button-focus-ring-offset:var(--p-focus-ring-offset);--p-button-badge-size:1rem;--p-button-transition-duration:var(--p-form-field-transition-duration);--p-button-primary-background:var(--p-primary-color);--p-button-primary-hover-background:var(--p-primary-hover-color);--p-button-primary-active-background:var(--p-primary-active-color);--p-button-primary-border-color:var(--p-primary-color);--p-button-primary-hover-border-color:var(--p-primary-hover-color);--p-button-primary-active-border-color:var(--p-primary-active-color);--p-button-primary-color:var(--p-primary-contrast-color);--p-button-primary-hover-color:var(--p-primary-contrast-color);--p-button-primary-active-color:var(--p-primary-contrast-color);--p-button-primary-focus-ring-color:var(--p-primary-color);--p-button-primary-focus-ring-shadow:none;--p-button-secondary-background:var(--p-surface-100);--p-button-secondary-hover-background:var(--p-surface-200);--p-button-secondary-active-background:var(--p-surface-300);--p-button-secondary-border-color:var(--p-surface-100);--p-button-secondary-hover-border-color:var(--p-surface-200);--p-button-secondary-active-border-color:var(--p-surface-300);--p-button-secondary-color:var(--p-surface-600);--p-button-secondary-hover-color:var(--p-surface-700);--p-button-secondary-active-color:var(--p-surface-800);--p-button-secondary-focus-ring-color:var(--p-surface-600);--p-button-secondary-focus-ring-shadow:none;--p-button-info-background:var(--p-sky-500);--p-button-info-hover-background:var(--p-sky-600);--p-button-info-active-background:var(--p-sky-700);--p-button-info-border-color:var(--p-sky-500);--p-button-info-hover-border-color:var(--p-sky-600);--p-button-info-active-border-color:var(--p-sky-700);--p-button-info-color:#ffffff;--p-button-info-hover-color:#ffffff;--p-button-info-active-color:#ffffff;--p-button-info-focus-ring-color:var(--p-sky-500);--p-button-info-focus-ring-shadow:none;--p-button-success-background:var(--p-green-500);--p-button-success-hover-background:var(--p-green-600);--p-button-success-active-background:var(--p-green-700);--p-button-success-border-color:var(--p-green-500);--p-button-success-hover-border-color:var(--p-green-600);--p-button-success-active-border-color:var(--p-green-700);--p-button-success-color:#ffffff;--p-button-success-hover-color:#ffffff;--p-button-success-active-color:#ffffff;--p-button-success-focus-ring-color:var(--p-green-500);--p-button-success-focus-ring-shadow:none;--p-button-warn-background:var(--p-orange-500);--p-button-warn-hover-background:var(--p-orange-600);--p-button-warn-active-background:var(--p-orange-700);--p-button-warn-border-color:var(--p-orange-500);--p-button-warn-hover-border-color:var(--p-orange-600);--p-button-warn-active-border-color:var(--p-orange-700);--p-button-warn-color:#ffffff;--p-button-warn-hover-color:#ffffff;--p-button-warn-active-color:#ffffff;--p-button-warn-focus-ring-color:var(--p-orange-500);--p-button-warn-focus-ring-shadow:none;--p-button-help-background:var(--p-purple-500);--p-button-help-hover-background:var(--p-purple-600);--p-button-help-active-background:var(--p-purple-700);--p-button-help-border-color:var(--p-purple-500);--p-button-help-hover-border-color:var(--p-purple-600);--p-button-help-active-border-color:var(--p-purple-700);--p-button-help-color:#ffffff;--p-button-help-hover-color:#ffffff;--p-button-help-active-color:#ffffff;--p-button-help-focus-ring-color:var(--p-purple-500);--p-button-help-focus-ring-shadow:none;--p-button-danger-background:var(--p-red-500);--p-button-danger-hover-background:var(--p-red-600);--p-button-danger-active-background:var(--p-red-700);--p-button-danger-border-color:var(--p-red-500);--p-button-danger-hover-border-color:var(--p-red-600);--p-button-danger-active-border-color:var(--p-red-700);--p-button-danger-color:#ffffff;--p-button-danger-hover-color:#ffffff;--p-button-danger-active-color:#ffffff;--p-button-danger-focus-ring-color:var(--p-red-500);--p-button-danger-focus-ring-shadow:none;--p-button-contrast-background:var(--p-surface-950);--p-button-contrast-hover-background:var(--p-surface-900);--p-button-contrast-active-background:var(--p-surface-800);--p-button-contrast-border-color:var(--p-surface-950);--p-button-contrast-hover-border-color:var(--p-surface-900);--p-button-contrast-active-border-color:var(--p-surface-800);--p-button-contrast-color:var(--p-surface-0);--p-button-contrast-hover-color:var(--p-surface-0);--p-button-contrast-active-color:var(--p-surface-0);--p-button-contrast-focus-ring-color:var(--p-surface-950);--p-button-contrast-focus-ring-shadow:none;--p-button-outlined-primary-hover-background:var(--p-primary-50);--p-button-outlined-primary-active-background:var(--p-primary-100);--p-button-outlined-primary-border-color:var(--p-primary-200);--p-button-outlined-primary-color:var(--p-primary-color);--p-button-outlined-secondary-hover-background:var(--p-surface-50);--p-button-outlined-secondary-active-background:var(--p-surface-100);--p-button-outlined-secondary-border-color:var(--p-surface-200);--p-button-outlined-secondary-color:var(--p-surface-500);--p-button-outlined-success-hover-background:var(--p-green-50);--p-button-outlined-success-active-background:var(--p-green-100);--p-button-outlined-success-border-color:var(--p-green-200);--p-button-outlined-success-color:var(--p-green-500);--p-button-outlined-info-hover-background:var(--p-sky-50);--p-button-outlined-info-active-background:var(--p-sky-100);--p-button-outlined-info-border-color:var(--p-sky-200);--p-button-outlined-info-color:var(--p-sky-500);--p-button-outlined-warn-hover-background:var(--p-orange-50);--p-button-outlined-warn-active-background:var(--p-orange-100);--p-button-outlined-warn-border-color:var(--p-orange-200);--p-button-outlined-warn-color:var(--p-orange-500);--p-button-outlined-help-hover-background:var(--p-purple-50);--p-button-outlined-help-active-background:var(--p-purple-100);--p-button-outlined-help-border-color:var(--p-purple-200);--p-button-outlined-help-color:var(--p-purple-500);--p-button-outlined-danger-hover-background:var(--p-red-50);--p-button-outlined-danger-active-background:var(--p-red-100);--p-button-outlined-danger-border-color:var(--p-red-200);--p-button-outlined-danger-color:var(--p-red-500);--p-button-outlined-contrast-hover-background:var(--p-surface-50);--p-button-outlined-contrast-active-background:var(--p-surface-100);--p-button-outlined-contrast-border-color:var(--p-surface-700);--p-button-outlined-contrast-color:var(--p-surface-950);--p-button-outlined-plain-hover-background:var(--p-surface-50);--p-button-outlined-plain-active-background:var(--p-surface-100);--p-button-outlined-plain-border-color:var(--p-surface-200);--p-button-outlined-plain-color:var(--p-surface-700);--p-button-text-primary-hover-background:var(--p-primary-50);--p-button-text-primary-active-background:var(--p-primary-100);--p-button-text-primary-color:var(--p-primary-color);--p-button-text-secondary-hover-background:var(--p-surface-50);--p-button-text-secondary-active-background:var(--p-surface-100);--p-button-text-secondary-color:var(--p-surface-500);--p-button-text-success-hover-background:var(--p-green-50);--p-button-text-success-active-background:var(--p-green-100);--p-button-text-success-color:var(--p-green-500);--p-button-text-info-hover-background:var(--p-sky-50);--p-button-text-info-active-background:var(--p-sky-100);--p-button-text-info-color:var(--p-sky-500);--p-button-text-warn-hover-background:var(--p-orange-50);--p-button-text-warn-active-background:var(--p-orange-100);--p-button-text-warn-color:var(--p-orange-500);--p-button-text-help-hover-background:var(--p-purple-50);--p-button-text-help-active-background:var(--p-purple-100);--p-button-text-help-color:var(--p-purple-500);--p-button-text-danger-hover-background:var(--p-red-50);--p-button-text-danger-active-background:var(--p-red-100);--p-button-text-danger-color:var(--p-red-500);--p-button-text-contrast-hover-background:var(--p-surface-50);--p-button-text-contrast-active-background:var(--p-surface-100);--p-button-text-contrast-color:var(--p-surface-950);--p-button-text-plain-hover-background:var(--p-surface-50);--p-button-text-plain-active-background:var(--p-surface-100);--p-button-text-plain-color:var(--p-surface-700);--p-button-link-color:var(--p-primary-color);--p-button-link-hover-color:var(--p-primary-color);--p-button-link-active-color:var(--p-primary-color);}}@layer primevue{.dark-theme,:root:has(.dark-theme){--p-button-primary-background:var(--p-primary-color);--p-button-primary-hover-background:var(--p-primary-hover-color);--p-button-primary-active-background:var(--p-primary-active-color);--p-button-primary-border-color:var(--p-primary-color);--p-button-primary-hover-border-color:var(--p-primary-hover-color);--p-button-primary-active-border-color:var(--p-primary-active-color);--p-button-primary-color:var(--p-primary-contrast-color);--p-button-primary-hover-color:var(--p-primary-contrast-color);--p-button-primary-active-color:var(--p-primary-contrast-color);--p-button-primary-focus-ring-color:var(--p-primary-color);--p-button-primary-focus-ring-shadow:none;--p-button-secondary-background:var(--p-surface-800);--p-button-secondary-hover-background:var(--p-surface-700);--p-button-secondary-active-background:var(--p-surface-600);--p-button-secondary-border-color:var(--p-surface-800);--p-button-secondary-hover-border-color:var(--p-surface-700);--p-button-secondary-active-border-color:var(--p-surface-600);--p-button-secondary-color:var(--p-surface-300);--p-button-secondary-hover-color:var(--p-surface-200);--p-button-secondary-active-color:var(--p-surface-100);--p-button-secondary-focus-ring-color:var(--p-surface-300);--p-button-secondary-focus-ring-shadow:none;--p-button-info-background:var(--p-sky-400);--p-button-info-hover-background:var(--p-sky-300);--p-button-info-active-background:var(--p-sky-200);--p-button-info-border-color:var(--p-sky-400);--p-button-info-hover-border-color:var(--p-sky-300);--p-button-info-active-border-color:var(--p-sky-200);--p-button-info-color:var(--p-sky-950);--p-button-info-hover-color:var(--p-sky-950);--p-button-info-active-color:var(--p-sky-950);--p-button-info-focus-ring-color:var(--p-sky-400);--p-button-info-focus-ring-shadow:none;--p-button-success-background:var(--p-green-400);--p-button-success-hover-background:var(--p-green-300);--p-button-success-active-background:var(--p-green-200);--p-button-success-border-color:var(--p-green-400);--p-button-success-hover-border-color:var(--p-green-300);--p-button-success-active-border-color:var(--p-green-200);--p-button-success-color:var(--p-green-950);--p-button-success-hover-color:var(--p-green-950);--p-button-success-active-color:var(--p-green-950);--p-button-success-focus-ring-color:var(--p-green-400);--p-button-success-focus-ring-shadow:none;--p-button-warn-background:var(--p-orange-400);--p-button-warn-hover-background:var(--p-orange-300);--p-button-warn-active-background:var(--p-orange-200);--p-button-warn-border-color:var(--p-orange-400);--p-button-warn-hover-border-color:var(--p-orange-300);--p-button-warn-active-border-color:var(--p-orange-200);--p-button-warn-color:var(--p-orange-950);--p-button-warn-hover-color:var(--p-orange-950);--p-button-warn-active-color:var(--p-orange-950);--p-button-warn-focus-ring-color:var(--p-orange-400);--p-button-warn-focus-ring-shadow:none;--p-button-help-background:var(--p-purple-400);--p-button-help-hover-background:var(--p-purple-300);--p-button-help-active-background:var(--p-purple-200);--p-button-help-border-color:var(--p-purple-400);--p-button-help-hover-border-color:var(--p-purple-300);--p-button-help-active-border-color:var(--p-purple-200);--p-button-help-color:var(--p-purple-950);--p-button-help-hover-color:var(--p-purple-950);--p-button-help-active-color:var(--p-purple-950);--p-button-help-focus-ring-color:var(--p-purple-400);--p-button-help-focus-ring-shadow:none;--p-button-danger-background:var(--p-red-400);--p-button-danger-hover-background:var(--p-red-300);--p-button-danger-active-background:var(--p-red-200);--p-button-danger-border-color:var(--p-red-400);--p-button-danger-hover-border-color:var(--p-red-300);--p-button-danger-active-border-color:var(--p-red-200);--p-button-danger-color:var(--p-red-950);--p-button-danger-hover-color:var(--p-red-950);--p-button-danger-active-color:var(--p-red-950);--p-button-danger-focus-ring-color:var(--p-red-400);--p-button-danger-focus-ring-shadow:none;--p-button-contrast-background:var(--p-surface-0);--p-button-contrast-hover-background:var(--p-surface-100);--p-button-contrast-active-background:var(--p-surface-200);--p-button-contrast-border-color:var(--p-surface-0);--p-button-contrast-hover-border-color:var(--p-surface-100);--p-button-contrast-active-border-color:var(--p-surface-200);--p-button-contrast-color:var(--p-surface-950);--p-button-contrast-hover-color:var(--p-surface-950);--p-button-contrast-active-color:var(--p-surface-950);--p-button-contrast-focus-ring-color:var(--p-surface-0);--p-button-contrast-focus-ring-shadow:none;--p-button-outlined-primary-hover-background:color-mix(in srgb,var(--p-primary-color),transparent 96%);--p-button-outlined-primary-active-background:color-mix(in srgb,var(--p-primary-color),transparent 84%);--p-button-outlined-primary-border-color:var(--p-primary-700);--p-button-outlined-primary-color:var(--p-primary-color);--p-button-outlined-secondary-hover-background:rgba(255,255,255,0.04);--p-button-outlined-secondary-active-background:rgba(255,255,255,0.16);--p-button-outlined-secondary-border-color:var(--p-surface-700);--p-button-outlined-secondary-color:var(--p-surface-400);--p-button-outlined-success-hover-background:color-mix(in srgb,var(--p-green-400),transparent 96%);--p-button-outlined-success-active-background:color-mix(in srgb,var(--p-green-400),transparent 84%);--p-button-outlined-success-border-color:var(--p-green-700);--p-button-outlined-success-color:var(--p-green-400);--p-button-outlined-info-hover-background:color-mix(in srgb,var(--p-sky-400),transparent 96%);--p-button-outlined-info-active-background:color-mix(in srgb,var(--p-sky-400),transparent 84%);--p-button-outlined-info-border-color:var(--p-sky-700);--p-button-outlined-info-color:var(--p-sky-400);--p-button-outlined-warn-hover-background:color-mix(in srgb,var(--p-orange-400),transparent 96%);--p-button-outlined-warn-active-background:color-mix(in srgb,var(--p-orange-400),transparent 84%);--p-button-outlined-warn-border-color:var(--p-orange-700);--p-button-outlined-warn-color:var(--p-orange-400);--p-button-outlined-help-hover-background:color-mix(in srgb,var(--p-purple-400),transparent 96%);--p-button-outlined-help-active-background:color-mix(in srgb,var(--p-purple-400),transparent 84%);--p-button-outlined-help-border-color:var(--p-purple-700);--p-button-outlined-help-color:var(--p-purple-400);--p-button-outlined-danger-hover-background:color-mix(in srgb,var(--p-red-400),transparent 96%);--p-button-outlined-danger-active-background:color-mix(in srgb,var(--p-red-400),transparent 84%);--p-button-outlined-danger-border-color:var(--p-red-700);--p-button-outlined-danger-color:var(--p-red-400);--p-button-outlined-contrast-hover-background:var(--p-surface-800);--p-button-outlined-contrast-active-background:var(--p-surface-700);--p-button-outlined-contrast-border-color:var(--p-surface-500);--p-button-outlined-contrast-color:var(--p-surface-0);--p-button-outlined-plain-hover-background:var(--p-surface-800);--p-button-outlined-plain-active-background:var(--p-surface-700);--p-button-outlined-plain-border-color:var(--p-surface-600);--p-button-outlined-plain-color:var(--p-surface-0);--p-button-text-primary-hover-background:color-mix(in srgb,var(--p-primary-color),transparent 96%);--p-button-text-primary-active-background:color-mix(in srgb,var(--p-primary-color),transparent 84%);--p-button-text-primary-color:var(--p-primary-color);--p-button-text-secondary-hover-background:var(--p-surface-800);--p-button-text-secondary-active-background:var(--p-surface-700);--p-button-text-secondary-color:var(--p-surface-400);--p-button-text-success-hover-background:color-mix(in srgb,var(--p-green-400),transparent 96%);--p-button-text-success-active-background:color-mix(in srgb,var(--p-green-400),transparent 84%);--p-button-text-success-color:var(--p-green-400);--p-button-text-info-hover-background:color-mix(in srgb,var(--p-sky-400),transparent 96%);--p-button-text-info-active-background:color-mix(in srgb,var(--p-sky-400),transparent 84%);--p-button-text-info-color:var(--p-sky-400);--p-button-text-warn-hover-background:color-mix(in srgb,var(--p-orange-400),transparent 96%);--p-button-text-warn-active-background:color-mix(in srgb,var(--p-orange-400),transparent 84%);--p-button-text-warn-color:var(--p-orange-400);--p-button-text-help-hover-background:color-mix(in srgb,var(--p-purple-400),transparent 96%);--p-button-text-help-active-background:color-mix(in srgb,var(--p-purple-400),transparent 84%);--p-button-text-help-color:var(--p-purple-400);--p-button-text-danger-hover-background:color-mix(in srgb,var(--p-red-400),transparent 96%);--p-button-text-danger-active-background:color-mix(in srgb,var(--p-red-400),transparent 84%);--p-button-text-danger-color:var(--p-red-400);--p-button-text-contrast-hover-background:var(--p-surface-800);--p-button-text-contrast-active-background:var(--p-surface-700);--p-button-text-contrast-color:var(--p-surface-0);--p-button-text-plain-hover-background:var(--p-surface-800);--p-button-text-plain-active-background:var(--p-surface-700);--p-button-text-plain-color:var(--p-surface-0);--p-button-link-color:var(--p-primary-color);--p-button-link-hover-color:var(--p-primary-color);--p-button-link-active-color:var(--p-primary-color);}}</style><style type="text/css" data-primevue-style-id="button-style">@layer primevue{.p-button{display:inline-flex;cursor:pointer;user-select:none;align-items:center;justify-content:center;overflow:hidden;position:relative;color:var(--p-button-primary-color);background:var(--p-button-primary-background);border:1px solid var(--p-button-primary-border-color);padding:var(--p-button-padding-y) var(--p-button-padding-x);font-size:1rem;font-family:inherit;font-feature-settings:inherit;transition:background var(--p-button-transition-duration),color var(--p-button-transition-duration),border-color var(--p-button-transition-duration),outline-color var(--p-button-transition-duration),box-shadow var(--p-button-transition-duration);border-radius:var(--p-button-border-radius);outline-color:transparent;gap:var(--p-button-gap);}.p-button:disabled{cursor:default;}.p-button-icon-right{order:1;}.p-button-icon-right:dir(rtl){order:-1;}.p-button:not(.p-button-vertical) .p-button-icon:not(.p-button-icon-right):dir(rtl){order:1;}.p-button-icon-bottom{order:2;}.p-button-icon-only{width:var(--p-button-icon-only-width);padding-inline-start:0;padding-inline-end:0;gap:0;}.p-button-icon-only.p-button-rounded{border-radius:50%;height:var(--p-button-icon-only-width);}.p-button-icon-only .p-button-label{visibility:hidden;width:0;}.p-button-sm{font-size:var(--p-button-sm-font-size);padding:var(--p-button-sm-padding-y) var(--p-button-sm-padding-x);}.p-button-sm .p-button-icon{font-size:var(--p-button-sm-font-size);}.p-button-lg{font-size:var(--p-button-lg-font-size);padding:var(--p-button-lg-padding-y) var(--p-button-lg-padding-x);}.p-button-lg .p-button-icon{font-size:var(--p-button-lg-font-size);}.p-button-vertical{flex-direction:column;}.p-button-label{font-weight:var(--p-button-label-font-weight);}.p-button-fluid{width:100%;}.p-button-fluid.p-button-icon-only{width:var(--p-button-icon-only-width);}.p-button:not(:disabled):hover{background:var(--p-button-primary-hover-background);border:1px solid var(--p-button-primary-hover-border-color);color:var(--p-button-primary-hover-color);}.p-button:not(:disabled):active{background:var(--p-button-primary-active-background);border:1px solid var(--p-button-primary-active-border-color);color:var(--p-button-primary-active-color);}.p-button:focus-visible{box-shadow:var(--p-button-primary-focus-ring-shadow);outline:var(--p-button-focus-ring-width) var(--p-button-focus-ring-style) var(--p-button-primary-focus-ring-color);outline-offset:var(--p-button-focus-ring-offset);}.p-button .p-badge{min-width:var(--p-button-badge-size);height:var(--p-button-badge-size);line-height:var(--p-button-badge-size);}.p-button-raised{box-shadow:var(--p-button-raised-shadow);}.p-button-rounded{border-radius:var(--p-button-rounded-border-radius);}.p-button-secondary{background:var(--p-button-secondary-background);border:1px solid var(--p-button-secondary-border-color);color:var(--p-button-secondary-color);}.p-button-secondary:not(:disabled):hover{background:var(--p-button-secondary-hover-background);border:1px solid var(--p-button-secondary-hover-border-color);color:var(--p-button-secondary-hover-color);}.p-button-secondary:not(:disabled):active{background:var(--p-button-secondary-active-background);border:1px solid var(--p-button-secondary-active-border-color);color:var(--p-button-secondary-active-color);}.p-button-secondary:focus-visible{outline-color:var(--p-button-secondary-focus-ring-color);box-shadow:var(--p-button-secondary-focus-ring-shadow);}.p-button-success{background:var(--p-button-success-background);border:1px solid var(--p-button-success-border-color);color:var(--p-button-success-color);}.p-button-success:not(:disabled):hover{background:var(--p-button-success-hover-background);border:1px solid var(--p-button-success-hover-border-color);color:var(--p-button-success-hover-color);}.p-button-success:not(:disabled):active{background:var(--p-button-success-active-background);border:1px solid var(--p-button-success-active-border-color);color:var(--p-button-success-active-color);}.p-button-success:focus-visible{outline-color:var(--p-button-success-focus-ring-color);box-shadow:var(--p-button-success-focus-ring-shadow);}.p-button-info{background:var(--p-button-info-background);border:1px solid var(--p-button-info-border-color);color:var(--p-button-info-color);}.p-button-info:not(:disabled):hover{background:var(--p-button-info-hover-background);border:1px solid var(--p-button-info-hover-border-color);color:var(--p-button-info-hover-color);}.p-button-info:not(:disabled):active{background:var(--p-button-info-active-background);border:1px solid var(--p-button-info-active-border-color);color:var(--p-button-info-active-color);}.p-button-info:focus-visible{outline-color:var(--p-button-info-focus-ring-color);box-shadow:var(--p-button-info-focus-ring-shadow);}.p-button-warn{background:var(--p-button-warn-background);border:1px solid var(--p-button-warn-border-color);color:var(--p-button-warn-color);}.p-button-warn:not(:disabled):hover{background:var(--p-button-warn-hover-background);border:1px solid var(--p-button-warn-hover-border-color);color:var(--p-button-warn-hover-color);}.p-button-warn:not(:disabled):active{background:var(--p-button-warn-active-background);border:1px solid var(--p-button-warn-active-border-color);color:var(--p-button-warn-active-color);}.p-button-warn:focus-visible{outline-color:var(--p-button-warn-focus-ring-color);box-shadow:var(--p-button-warn-focus-ring-shadow);}.p-button-help{background:var(--p-button-help-background);border:1px solid var(--p-button-help-border-color);color:var(--p-button-help-color);}.p-button-help:not(:disabled):hover{background:var(--p-button-help-hover-background);border:1px solid var(--p-button-help-hover-border-color);color:var(--p-button-help-hover-color);}.p-button-help:not(:disabled):active{background:var(--p-button-help-active-background);border:1px solid var(--p-button-help-active-border-color);color:var(--p-button-help-active-color);}.p-button-help:focus-visible{outline-color:var(--p-button-help-focus-ring-color);box-shadow:var(--p-button-help-focus-ring-shadow);}.p-button-danger{background:var(--p-button-danger-background);border:1px solid var(--p-button-danger-border-color);color:var(--p-button-danger-color);}.p-button-danger:not(:disabled):hover{background:var(--p-button-danger-hover-background);border:1px solid var(--p-button-danger-hover-border-color);color:var(--p-button-danger-hover-color);}.p-button-danger:not(:disabled):active{background:var(--p-button-danger-active-background);border:1px solid var(--p-button-danger-active-border-color);color:var(--p-button-danger-active-color);}.p-button-danger:focus-visible{outline-color:var(--p-button-danger-focus-ring-color);box-shadow:var(--p-button-danger-focus-ring-shadow);}.p-button-contrast{background:var(--p-button-contrast-background);border:1px solid var(--p-button-contrast-border-color);color:var(--p-button-contrast-color);}.p-button-contrast:not(:disabled):hover{background:var(--p-button-contrast-hover-background);border:1px solid var(--p-button-contrast-hover-border-color);color:var(--p-button-contrast-hover-color);}.p-button-contrast:not(:disabled):active{background:var(--p-button-contrast-active-background);border:1px solid var(--p-button-contrast-active-border-color);color:var(--p-button-contrast-active-color);}.p-button-contrast:focus-visible{outline-color:var(--p-button-contrast-focus-ring-color);box-shadow:var(--p-button-contrast-focus-ring-shadow);}.p-button-outlined{background:transparent;border-color:var(--p-button-outlined-primary-border-color);color:var(--p-button-outlined-primary-color);}.p-button-outlined:not(:disabled):hover{background:var(--p-button-outlined-primary-hover-background);border-color:var(--p-button-outlined-primary-border-color);color:var(--p-button-outlined-primary-color);}.p-button-outlined:not(:disabled):active{background:var(--p-button-outlined-primary-active-background);border-color:var(--p-button-outlined-primary-border-color);color:var(--p-button-outlined-primary-color);}.p-button-outlined.p-button-secondary{border-color:var(--p-button-outlined-secondary-border-color);color:var(--p-button-outlined-secondary-color);}.p-button-outlined.p-button-secondary:not(:disabled):hover{background:var(--p-button-outlined-secondary-hover-background);border-color:var(--p-button-outlined-secondary-border-color);color:var(--p-button-outlined-secondary-color);}.p-button-outlined.p-button-secondary:not(:disabled):active{background:var(--p-button-outlined-secondary-active-background);border-color:var(--p-button-outlined-secondary-border-color);color:var(--p-button-outlined-secondary-color);}.p-button-outlined.p-button-success{border-color:var(--p-button-outlined-success-border-color);color:var(--p-button-outlined-success-color);}.p-button-outlined.p-button-success:not(:disabled):hover{background:var(--p-button-outlined-success-hover-background);border-color:var(--p-button-outlined-success-border-color);color:var(--p-button-outlined-success-color);}.p-button-outlined.p-button-success:not(:disabled):active{background:var(--p-button-outlined-success-active-background);border-color:var(--p-button-outlined-success-border-color);color:var(--p-button-outlined-success-color);}.p-button-outlined.p-button-info{border-color:var(--p-button-outlined-info-border-color);color:var(--p-button-outlined-info-color);}.p-button-outlined.p-button-info:not(:disabled):hover{background:var(--p-button-outlined-info-hover-background);border-color:var(--p-button-outlined-info-border-color);color:var(--p-button-outlined-info-color);}.p-button-outlined.p-button-info:not(:disabled):active{background:var(--p-button-outlined-info-active-background);border-color:var(--p-button-outlined-info-border-color);color:var(--p-button-outlined-info-color);}.p-button-outlined.p-button-warn{border-color:var(--p-button-outlined-warn-border-color);color:var(--p-button-outlined-warn-color);}.p-button-outlined.p-button-warn:not(:disabled):hover{background:var(--p-button-outlined-warn-hover-background);border-color:var(--p-button-outlined-warn-border-color);color:var(--p-button-outlined-warn-color);}.p-button-outlined.p-button-warn:not(:disabled):active{background:var(--p-button-outlined-warn-active-background);border-color:var(--p-button-outlined-warn-border-color);color:var(--p-button-outlined-warn-color);}.p-button-outlined.p-button-help{border-color:var(--p-button-outlined-help-border-color);color:var(--p-button-outlined-help-color);}.p-button-outlined.p-button-help:not(:disabled):hover{background:var(--p-button-outlined-help-hover-background);border-color:var(--p-button-outlined-help-border-color);color:var(--p-button-outlined-help-color);}.p-button-outlined.p-button-help:not(:disabled):active{background:var(--p-button-outlined-help-active-background);border-color:var(--p-button-outlined-help-border-color);color:var(--p-button-outlined-help-color);}.p-button-outlined.p-button-danger{border-color:var(--p-button-outlined-danger-border-color);color:var(--p-button-outlined-danger-color);}.p-button-outlined.p-button-danger:not(:disabled):hover{background:var(--p-button-outlined-danger-hover-background);border-color:var(--p-button-outlined-danger-border-color);color:var(--p-button-outlined-danger-color);}.p-button-outlined.p-button-danger:not(:disabled):active{background:var(--p-button-outlined-danger-active-background);border-color:var(--p-button-outlined-danger-border-color);color:var(--p-button-outlined-danger-color);}.p-button-outlined.p-button-contrast{border-color:var(--p-button-outlined-contrast-border-color);color:var(--p-button-outlined-contrast-color);}.p-button-outlined.p-button-contrast:not(:disabled):hover{background:var(--p-button-outlined-contrast-hover-background);border-color:var(--p-button-outlined-contrast-border-color);color:var(--p-button-outlined-contrast-color);}.p-button-outlined.p-button-contrast:not(:disabled):active{background:var(--p-button-outlined-contrast-active-background);border-color:var(--p-button-outlined-contrast-border-color);color:var(--p-button-outlined-contrast-color);}.p-button-outlined.p-button-plain{border-color:var(--p-button-outlined-plain-border-color);color:var(--p-button-outlined-plain-color);}.p-button-outlined.p-button-plain:not(:disabled):hover{background:var(--p-button-outlined-plain-hover-background);border-color:var(--p-button-outlined-plain-border-color);color:var(--p-button-outlined-plain-color);}.p-button-outlined.p-button-plain:not(:disabled):active{background:var(--p-button-outlined-plain-active-background);border-color:var(--p-button-outlined-plain-border-color);color:var(--p-button-outlined-plain-color);}.p-button-text{background:transparent;border-color:transparent;color:var(--p-button-text-primary-color);}.p-button-text:not(:disabled):hover{background:var(--p-button-text-primary-hover-background);border-color:transparent;color:var(--p-button-text-primary-color);}.p-button-text:not(:disabled):active{background:var(--p-button-text-primary-active-background);border-color:transparent;color:var(--p-button-text-primary-color);}.p-button-text.p-button-secondary{background:transparent;border-color:transparent;color:var(--p-button-text-secondary-color);}.p-button-text.p-button-secondary:not(:disabled):hover{background:var(--p-button-text-secondary-hover-background);border-color:transparent;color:var(--p-button-text-secondary-color);}.p-button-text.p-button-secondary:not(:disabled):active{background:var(--p-button-text-secondary-active-background);border-color:transparent;color:var(--p-button-text-secondary-color);}.p-button-text.p-button-success{background:transparent;border-color:transparent;color:var(--p-button-text-success-color);}.p-button-text.p-button-success:not(:disabled):hover{background:var(--p-button-text-success-hover-background);border-color:transparent;color:var(--p-button-text-success-color);}.p-button-text.p-button-success:not(:disabled):active{background:var(--p-button-text-success-active-background);border-color:transparent;color:var(--p-button-text-success-color);}.p-button-text.p-button-info{background:transparent;border-color:transparent;color:var(--p-button-text-info-color);}.p-button-text.p-button-info:not(:disabled):hover{background:var(--p-button-text-info-hover-background);border-color:transparent;color:var(--p-button-text-info-color);}.p-button-text.p-button-info:not(:disabled):active{background:var(--p-button-text-info-active-background);border-color:transparent;color:var(--p-button-text-info-color);}.p-button-text.p-button-warn{background:transparent;border-color:transparent;color:var(--p-button-text-warn-color);}.p-button-text.p-button-warn:not(:disabled):hover{background:var(--p-button-text-warn-hover-background);border-color:transparent;color:var(--p-button-text-warn-color);}.p-button-text.p-button-warn:not(:disabled):active{background:var(--p-button-text-warn-active-background);border-color:transparent;color:var(--p-button-text-warn-color);}.p-button-text.p-button-help{background:transparent;border-color:transparent;color:var(--p-button-text-help-color);}.p-button-text.p-button-help:not(:disabled):hover{background:var(--p-button-text-help-hover-background);border-color:transparent;color:var(--p-button-text-help-color);}.p-button-text.p-button-help:not(:disabled):active{background:var(--p-button-text-help-active-background);border-color:transparent;color:var(--p-button-text-help-color);}.p-button-text.p-button-danger{background:transparent;border-color:transparent;color:var(--p-button-text-danger-color);}.p-button-text.p-button-danger:not(:disabled):hover{background:var(--p-button-text-danger-hover-background);border-color:transparent;color:var(--p-button-text-danger-color);}.p-button-text.p-button-danger:not(:disabled):active{background:var(--p-button-text-danger-active-background);border-color:transparent;color:var(--p-button-text-danger-color);}.p-button-text.p-button-contrast{background:transparent;border-color:transparent;color:var(--p-button-text-contrast-color);}.p-button-text.p-button-contrast:not(:disabled):hover{background:var(--p-button-text-contrast-hover-background);border-color:transparent;color:var(--p-button-text-contrast-color);}.p-button-text.p-button-contrast:not(:disabled):active{background:var(--p-button-text-contrast-active-background);border-color:transparent;color:var(--p-button-text-contrast-color);}.p-button-text.p-button-plain{background:transparent;border-color:transparent;color:var(--p-button-text-plain-color);}.p-button-text.p-button-plain:not(:disabled):hover{background:var(--p-button-text-plain-hover-background);border-color:transparent;color:var(--p-button-text-plain-color);}.p-button-text.p-button-plain:not(:disabled):active{background:var(--p-button-text-plain-active-background);border-color:transparent;color:var(--p-button-text-plain-color);}.p-button-link{background:transparent;border-color:transparent;color:var(--p-button-link-color);}.p-button-link:not(:disabled):hover{background:transparent;border-color:transparent;color:var(--p-button-link-hover-color);}.p-button-link:not(:disabled):hover .p-button-label{text-decoration:underline;}.p-button-link:not(:disabled):active{background:transparent;border-color:transparent;color:var(--p-button-link-active-color);}}</style><style type="text/css" data-primevue-style-id="skeleton-variables">@layer primevue{:root{--p-skeleton-border-radius:var(--p-content-border-radius);--p-skeleton-background:var(--p-surface-200);--p-skeleton-animation-background:rgba(255,255,255,0.4);}}@layer primevue{.dark-theme,:root:has(.dark-theme){--p-skeleton-background:rgba(255,255,255,0.06);--p-skeleton-animation-background:rgba(255,255,255,0.04);}}</style><style type="text/css" data-primevue-style-id="skeleton-style">@layer primevue{.p-skeleton{overflow:hidden;background:var(--p-skeleton-background);border-radius:var(--p-skeleton-border-radius);}.p-skeleton::after{content:"";animation:p-skeleton-animation 1.2s infinite;height:100%;left:0;position:absolute;right:0;top:0;transform:translateX(-100%);z-index:1;background:linear-gradient(90deg,rgba(255,255,255,0),var(--p-skeleton-animation-background),rgba(255,255,255,0));}[dir='rtl'] .p-skeleton::after{animation-name:p-skeleton-animation-rtl;}.p-skeleton-circle{border-radius:50%;}.p-skeleton-animation-none::after{animation:none;}@keyframes p-skeleton-animation{from{transform:translateX(-100%);}to{transform:translateX(100%);}}@keyframes p-skeleton-animation-rtl{from{transform:translateX(100%);}to{transform:translateX(-100%);}}}</style></head><body class="litegraph grid dark-theme p-overflow-hidden"><script>;(function () {
|
||
var bg, fg
|
||
try {
|
||
bg = localStorage.getItem('comfy-splash-bg')
|
||
fg = localStorage.getItem('comfy-splash-fg')
|
||
} catch (_) {}
|
||
if (!bg || !fg) {
|
||
var isDark =
|
||
window.matchMedia &&
|
||
window.matchMedia('(prefers-color-scheme: dark)').matches
|
||
bg = isDark ? '#202020' : '#f5f5f5'
|
||
fg = isDark ? '#ffffff' : '#000000'
|
||
}
|
||
document.documentElement.style.setProperty('--bg-color', bg)
|
||
document.documentElement.style.setProperty('--fg-color', fg)
|
||
var el = document.getElementById('splash-loader')
|
||
if (el) {
|
||
el.style.background = bg
|
||
el.style.color = fg
|
||
}
|
||
})()</script><div id="vue-app" data-v-app=""><main class="relative size-full overflow-hidden"><div data-v-480ffec1="" class="comfyui-body grid size-full overflow-hidden"><div data-v-480ffec1="" id="comfyui-body-top" class="comfyui-body-top"></div><div data-v-480ffec1="" id="comfyui-body-bottom" class="comfyui-body-bottom"></div><div data-v-480ffec1="" id="comfyui-body-left" class="comfyui-body-left"></div><div data-v-480ffec1="" id="comfyui-body-right" class="comfyui-body-right"></div><div data-v-480ffec1="" id="graph-canvas-container" class="graph-canvas-container"><div class="comfy-menu no-drag" style="display: none;"><div class="drag-handle comfy-menu-header" style="overflow: hidden; position: relative; width: 100%; cursor: default;"><span class="drag-handle"></span><span class="comfy-menu-queue-size">Queue size: 0</span><div class="comfy-menu-actions"><button class="comfy-settings-btn">⚙️</button><button class="comfy-close-menu-btn">×</button></div></div><button class="comfy-queue-btn" id="queue-button">Queue Prompt</button><div><label>Extra options<input type="checkbox" style=""></label></div><div id="extraOptions" style="width: 100%; display: none;"><div><label>Batch count</label><input id="batchCountInputNumber" type="number" min="1" style="width: 35%; margin-left: 0.4em;"><input id="batchCountInputRange" type="range" min="1" max="100" style=""></div><div><label for="autoQueueCheckbox">Auto Queue</label><input id="autoQueueCheckbox" type="checkbox" title="Automatically queue prompt when the queue size hits 0" style=""><div class="comfy-toggle-switch" style="display: none;"><label title="A new prompt will be queued as soon as the queue reaches 0" class="comfy-toggle-selected">instant<input name="autoQueueMode" type="radio" value="instant" style=""></label><label title="A new prompt will be queued when the queue is at 0 and the graph is/has changed">change<input name="autoQueueMode" type="radio" value="change" style=""></label></div></div></div><div class="comfy-menu-btns"><button id="queue-front-button">Queue Front</button><button id="comfy-view-queue-button">View Queue</button><button id="comfy-view-history-button">View History</button></div><div class="comfy-list" style="display: none;"></div><div class="comfy-list" style="display: none;"></div><button id="comfy-save-button">Save</button><button id="comfy-dev-save-api-button" style="width: 100%; display: none;">Save (API Format)</button><button id="comfy-load-button">Load</button><button id="comfy-refresh-button">Refresh</button><button id="comfy-clipspace-button">Clipspace</button><button id="comfy-clear-button">Clear</button><button id="comfy-load-default-button">Load Default</button><button id="comfy-reset-view-button">Reset View</button></div><div data-v-762c224f="" class="pointer-events-none absolute top-0 left-0 z-999 flex size-full flex-col"><div class="workflow-tabs-container pointer-events-auto relative h-(--workflow-tabs-height) w-full"><!----><div class="flex h-full items-center border-b border-interface-stroke bg-comfy-menu-bg shadow-interface"><div data-v-4276895b="" class="workflow-tabs-container flex h-full max-w-full flex-auto flex-row overflow-hidden workflow-tabs-container-desktop"><!----><div data-v-4276895b="" class="p-scrollpanel p-component no-drag overflow-hidden" data-pc-name="scrollpanel" pc7="" data-pc-section="root"><div class="p-scrollpanel-content-container" data-pc-section="contentcontainer"><div id="pv_id_25_content" class="p-scrollpanel-content p-0 w-full flex" data-pc-section="content"><div data-v-4276895b="" class="p-selectbutton p-component workflow-tabs bg-transparent" role="group" data-pc-name="selectbutton" pc8="" data-pc-section="root"><button type="button" class="p-togglebutton p-component p-togglebutton-checked" aria-pressed="true" data-pc-name="pctogglebutton" data-pc-extend="togglebutton" pc29="" data-pc-section="root" data-p-checked="true" data-p-disabled="false"><span class="p-togglebutton-content" data-pc-section="content"><div data-state="closed" class="workflow-tab group flex gap-2 p-2" draggable="true" data-drop-target-for-element="true" style="pointer-events: auto;"><!----><span class="workflow-label inline-block max-w-[150px] truncate text-sm">Unsaved Workflow</span><div class="relative"><span class="absolute top-1/2 left-1/2 z-10 w-4 -translate-1/2 bg-(--comfy-menu-bg) text-2xl font-bold group-hover:hidden">•</span><button class="relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-transparent text-muted-foreground hover:bg-secondary-background-hover size-5 close-button invisible w-auto p-0" aria-label="Close"><!----><i class="pi pi-times"></i></button></div></div><div data-v-a60994d0="" class="absolute bottom-0 left-1/2 -translate-x-1/2"></div></span></button></div></div></div><div class="p-scrollpanel-bar p-scrollpanel-bar-x h-1 p-scrollpanel-hidden" tabindex="0" role="scrollbar" aria-orientation="horizontal" aria-controls="pv_id_25_content" aria-valuenow="0" data-pc-section="barx" data-pc-group-section="bar" data-p-scrollpanel-hidden="true"></div><div class="p-scrollpanel-bar p-scrollpanel-bar-y p-scrollpanel-hidden" tabindex="0" role="scrollbar" aria-orientation="vertical" aria-controls="pv_id_25_content" aria-valuenow="0" data-pc-section="bary" data-pc-group-section="bar" data-p-scrollpanel-hidden="true"></div></div><!----><!----><button data-v-4276895b="" class="relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-transparent text-muted-foreground hover:bg-secondary-background-hover size-8 new-blank-workflow-button no-drag aspect-square h-full w-auto shrink-0 rounded-none" aria-label="Create a new blank workflow" data-pd-tooltip="true"><!----><i data-v-4276895b="" class="pi pi-plus"></i></button><div data-v-4276895b="" class="ml-auto flex shrink-0 items-center gap-2 px-2"><!----><button class="relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-transparent hover:bg-secondary-background-hover size-8 group rounded-full text-base-foreground p-1" aria-label="Login"><!----><span class="flex size-full items-center justify-center rounded-full bg-secondary-background transition-colors group-hover:bg-transparent"><i class="icon-[lucide--user] size-4"></i></span></button></div><div data-v-4276895b="" class="window-actions-spacer app-drag shrink-0"></div></div><div class="flex h-full shrink-0 items-center"></div><!----></div></div><div data-v-762c224f="" class="pointer-events-none flex flex-1 overflow-hidden flex-row"><div data-v-762c224f="" class="side-toolbar-container"><nav data-v-6bba3345="" data-testid="side-toolbar" class="side-tool-bar-container flex h-full flex-col items-center bg-transparent [.floating-sidebar]:-mr-2 small-sidebar connected-sidebar pointer-events-auto border-r border-(--interface-stroke) shadow-interface"><div data-v-6bba3345="" class="flex h-full flex-col"><div data-v-6bba3345="" class="sidebar-item-group flex shrink-0 flex-col items-center overflow-hidden"><div data-v-45fdb8c8="" class="comfy-menu-button-wrapper flex shrink-0 cursor-pointer flex-col items-center justify-center p-2 transition-colors" data-pd-tooltip="true"><div data-v-45fdb8c8="" class="grid place-items-center-safe gap-0.5"><i data-v-45fdb8c8="" class="col-span-full row-span-full icon-[lucide--chevron-down] size-3 translate-x-4 text-muted-foreground"></i><svg data-v-45fdb8c8="" class="comfyui-logo col-span-full row-span-full size-4.5" width="16" height="16" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" alt="ComfyUI Logo"><path d="M14.8193 0.600586C15.1248 0.600586 15.3296 0.70893 15.459 0.881836C15.5914 1.05888 15.6471 1.33774 15.5527 1.66895L14.8037 4.30176C14.7063 4.64386 14.4729 4.97024 14.1641 5.21191C13.8544 5.45415 13.496 5.58984 13.1699 5.58984H13.1689L9.5791 5.59668H7.90625C7.52654 5.59668 7.19496 5.84986 7.09082 6.21289L5.69434 11.0889C5.63007 11.3133 5.66134 11.5534 5.77734 11.7529L5.83203 11.8359C5.99177 12.0491 6.24252 12.1758 6.50977 12.1758H6.51074L8.88281 12.1709H11.4971C11.7643 12.171 11.9541 12.254 12.084 12.3906L12.1357 12.4521C12.2685 12.6295 12.3249 12.9089 12.2305 13.2402L11.4805 15.8721C11.383 16.2144 11.1498 16.5415 10.8408 16.7832C10.5314 17.0252 10.1736 17.161 9.84766 17.1611H9.84668L6.25684 17.168H3.64258C3.33762 17.1679 3.13349 17.0588 3.00391 16.8857C2.87135 16.7087 2.81482 16.43 2.90918 16.0986L3.39551 14.3887C3.46841 14.1327 3.41794 13.8576 3.25879 13.6445V13.6436C3.09901 13.4303 2.84745 13.3037 2.58008 13.3037H1.18066C0.875088 13.3037 0.670398 13.1953 0.541016 13.0225C0.408483 12.8451 0.351891 12.5655 0.446289 12.2344L2.11914 6.38965L2.30371 5.74707V5.74609C2.40139 5.40341 2.63456 5.07671 2.94336 4.83496C3.25302 4.59258 3.61143 4.45705 3.9375 4.45703H5.6123C5.94484 4.45703 6.24083 4.26316 6.37891 3.9707L6.42773 3.83984L6.98145 1.89551C7.07894 1.55317 7.31212 1.22614 7.62109 0.984375C7.93074 0.742127 8.2892 0.606445 8.61523 0.606445H8.61621L12.1982 0.600586H14.8193Z" fill="currentColor"></path></svg></div></div><button data-v-8161681f="" data-v-6bba3345="" class="relative inline-flex items-center justify-center gap-2 touch-manipulation whitespace-nowrap appearance-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-transparent text-muted-foreground hover:bg-secondary-background-hover h-8 rounded-lg p-2 text-xs side-bar-button cursor-pointer border-none assets-tab-button" aria-label="Assets (a)" data-pd-tooltip="true"><!----><div data-v-8161681f="" class="side-bar-button-content flex flex-col items-center gap-2"><div data-v-8161681f="" class="sidebar-icon-wrapper relative"><i data-v-8161681f="" class="icon-[comfy--image-ai-edit] side-bar-button-icon"></i><!----></div><!----></div></button><button data-v-8161681f="" data-v-6bba3345="" class="relative inline-flex items-center justify-center gap-2 touch-manipulation whitespace-nowrap appearance-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-transparent text-muted-foreground hover:bg-secondary-background-hover h-8 rounded-lg p-2 text-xs side-bar-button cursor-pointer border-none node-library-tab-button" aria-label="Node Library (n)" data-pd-tooltip="true"><!----><div data-v-8161681f="" class="side-bar-button-content flex flex-col items-center gap-2"><div data-v-8161681f="" class="sidebar-icon-wrapper relative"><i data-v-8161681f="" class="icon-[comfy--node] side-bar-button-icon"></i><!----></div><!----></div></button><button data-v-8161681f="" data-v-6bba3345="" class="relative inline-flex items-center justify-center gap-2 touch-manipulation whitespace-nowrap appearance-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-transparent text-muted-foreground hover:bg-secondary-background-hover h-8 rounded-lg p-2 text-xs side-bar-button cursor-pointer border-none model-library-tab-button" aria-label="Model Library (m)" data-pd-tooltip="true"><!----><div data-v-8161681f="" class="side-bar-button-content flex flex-col items-center gap-2"><div data-v-8161681f="" class="sidebar-icon-wrapper relative"><i data-v-8161681f="" class="icon-[comfy--ai-model] side-bar-button-icon"></i><!----></div><!----></div></button><button data-v-8161681f="" data-v-6bba3345="" class="relative inline-flex items-center justify-center gap-2 touch-manipulation whitespace-nowrap appearance-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-transparent text-muted-foreground hover:bg-secondary-background-hover h-8 rounded-lg p-2 text-xs side-bar-button cursor-pointer border-none workflows-tab-button" aria-label="Workflows (w)" data-pd-tooltip="true"><!----><div data-v-8161681f="" class="side-bar-button-content flex flex-col items-center gap-2"><div data-v-8161681f="" class="sidebar-icon-wrapper relative"><i data-v-8161681f="" class="icon-[comfy--workflow] side-bar-button-icon"></i><!----></div><!----></div></button><button data-v-8161681f="" data-v-6bba3345="" class="relative inline-flex items-center justify-center gap-2 touch-manipulation whitespace-nowrap appearance-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-transparent text-muted-foreground hover:bg-secondary-background-hover h-8 rounded-lg p-2 text-xs side-bar-button cursor-pointer border-none apps-tab-button" aria-label="Apps" data-pd-tooltip="true"><!----><div data-v-8161681f="" class="side-bar-button-content flex flex-col items-center gap-2"><div data-v-8161681f="" class="sidebar-icon-wrapper relative"><i data-v-8161681f="" class="icon-[lucide--panels-top-left] side-bar-button-icon"></i><!----></div><!----></div></button><button data-v-8161681f="" data-v-6bba3345="" class="relative inline-flex items-center justify-center gap-2 touch-manipulation whitespace-nowrap appearance-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-transparent text-muted-foreground hover:bg-secondary-background-hover h-8 rounded-lg p-2 text-xs side-bar-button cursor-pointer border-none templates-tab-button" aria-label="Templates" data-pd-tooltip="true"><!----><div data-v-8161681f="" class="side-bar-button-content flex flex-col items-center gap-2"><div data-v-8161681f="" class="sidebar-icon-wrapper relative"><i data-v-8161681f="" class="icon-[comfy--template] side-bar-button-icon"></i><!----></div><!----></div></button></div><div data-v-6bba3345="" class="mt-auto sidebar-item-group flex shrink-0 flex-col items-center overflow-hidden"><!----><button data-v-8161681f="" data-v-6bba3345="" class="relative inline-flex items-center justify-center gap-2 touch-manipulation whitespace-nowrap appearance-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-transparent text-muted-foreground hover:bg-secondary-background-hover h-8 rounded-lg p-2 text-xs side-bar-button cursor-pointer border-none comfy-help-center-btn" aria-label="Help Center" data-pd-tooltip="true"><!----><div data-v-8161681f="" class="side-bar-button-content flex flex-col items-center gap-2"><div data-v-8161681f="" class="sidebar-icon-wrapper relative"><i data-v-8161681f="" class="pi pi-question-circle side-bar-button-icon"></i><!----></div><!----></div></button><button data-v-8161681f="" data-v-6bba3345="" class="relative inline-flex items-center justify-center gap-2 touch-manipulation whitespace-nowrap appearance-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-transparent text-muted-foreground hover:bg-secondary-background-hover h-8 rounded-lg p-2 text-xs side-bar-button cursor-pointer border-none" aria-label="Toggle Bottom Panel" data-pd-tooltip="true"><!----><div data-v-8161681f="" class="side-bar-button-content flex flex-col items-center gap-2"><div data-v-8161681f="" class="sidebar-icon-wrapper relative"><i data-v-8161681f="" class="icon-[ph--terminal-bold] side-bar-button-icon"></i><!----></div><!----></div></button><button data-v-8161681f="" data-v-6bba3345="" class="relative inline-flex items-center justify-center gap-2 touch-manipulation whitespace-nowrap appearance-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-transparent text-muted-foreground hover:bg-secondary-background-hover h-8 rounded-lg p-2 text-xs side-bar-button cursor-pointer border-none" aria-label="Keyboard Shortcuts (Ctrl + Shift + k)" data-pd-tooltip="true"><!----><div data-v-8161681f="" class="side-bar-button-content flex flex-col items-center gap-2"><div data-v-8161681f="" class="sidebar-icon-wrapper relative"><i data-v-8161681f="" class="icon-[lucide--keyboard] side-bar-button-icon"></i><!----></div><!----></div></button><button data-v-8161681f="" data-v-6bba3345="" class="relative inline-flex items-center justify-center gap-2 touch-manipulation whitespace-nowrap appearance-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-transparent text-muted-foreground hover:bg-secondary-background-hover h-8 rounded-lg p-2 text-xs side-bar-button cursor-pointer border-none" aria-label="Settings (Ctrl + ,)" data-pd-tooltip="true"><!----><div data-v-8161681f="" class="side-bar-button-content flex flex-col items-center gap-2"><div data-v-8161681f="" class="sidebar-icon-wrapper relative"><i data-v-8161681f="" class="icon-[lucide--settings] side-bar-button-icon"></i><!----></div><!----></div></button></div></div><!----></nav></div><div data-v-762c224f="" class="p-splitter p-component p-splitter-horizontal pointer-events-none flex-1 overflow-hidden border-none bg-transparent" data-p-resizing="false" data-pc-name="splitter" pc11="" data-pc-section="root" style="display: flex; flex-wrap: nowrap;"><div data-v-762c224f="" class="p-splitterpanel side-bar-panel pointer-events-auto bg-comfy-menu-bg" role="complementary" aria-label="Sidebar" tabindex="-1" data-pc-name="splitterpanel" pc12="" data-pc-section="root" style="display: none; flex-basis: calc(20% - 4px);"></div><div class="p-splitter-gutter" role="separator" tabindex="-1" data-p-gutter-resizing="false" data-pc-section="gutter"><div class="p-splitter-gutter-handle" tabindex="0" aria-orientation="horizontal" data-pc-section="gutterhandle" aria-valuenow="20.0000" style="width: 4px;"></div></div><div data-v-762c224f="" class="p-splitterpanel p-splitterpanel-nested flex flex-col" tabindex="-1" data-pc-name="splitterpanel" pc13="" data-pc-section="root" style="flex-basis: calc(80% - 4px);"><div class="ml-1 flex flex-col gap-1 pt-1"><div class="flex gap-x-0.5"><div class="min-w-0 flex-1"><div data-v-338a995b="" data-testid="subgraph-breadcrumb" class="subgraph-breadcrumb -mt-3 flex w-auto items-center pt-4 pl-1 drop-shadow-(--interface-panel-drop-shadow)" style="--p-breadcrumb-gap: 0px; --p-breadcrumb-item-margin: 4px; --p-breadcrumb-item-min-width: 28px; --p-breadcrumb-item-padding: 8px; --p-breadcrumb-icon-width: 20px;"><div class="pointer-events-auto inline-flex items-center rounded-lg bg-secondary-background"><button class="relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-base-background text-base-foreground hover:bg-secondary-background-hover h-8 rounded-lg p-2 text-xs m-1" aria-label="Enter app mode" data-pd-tooltip="true"><!----><i class="size-4 icon-[comfy--workflow]"></i></button><button class="inline-flex items-center justify-center cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 text-secondary-foreground bg-secondary-background hover:bg-secondary-background-hover relative h-10 gap-1 rounded-lg pr-2 pl-2.5 text-center data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface" id="reka-dropdown-menu-trigger-v-0" type="button" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Workflow actions" data-pd-tooltip="true"><!----><span>Graph</span><i class="icon-[lucide--chevron-down] size-4 text-muted-foreground"></i><!----></button></div><!----><nav data-v-338a995b="" class="p-breadcrumb p-component w-fit rounded-lg p-0 hidden" aria-label="Graph navigation" data-pc-name="breadcrumb" pc14="" data-pc-section="root"><ol class="p-breadcrumb-list" data-pc-section="list"><!----><!----><li class="p-breadcrumb-item pointer-events-auto" data-pc-section="item"><a data-v-da395352="" draggable="false" href="#" class="p-breadcrumb-item-link h-8 cursor-pointer px-2 flex items-center gap-1 p-breadcrumb-item-link-icon-visible active-breadcrumb-item" data-pd-tooltip="true"><!----><span data-v-da395352="" class="p-breadcrumb-item-label px-2">Unsaved Workflow</span><!----><i data-v-da395352="" class="pi pi-angle-down text-[10px]"></i></a><!----></li></ol></nav></div></div><div class="mx-1 flex flex-col items-end gap-1"><div class="flex items-center gap-2"><div class="pointer-events-auto flex h-12 shrink-0 items-center rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 shadow-interface"><button class="inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 text-secondary-foreground bg-secondary-background hover:bg-secondary-background-hover h-8 rounded-lg p-2 text-xs relative" aria-label="Extensions" data-pd-tooltip="true"><!----><i class="icon-[comfy--extensions-blocks] size-4"></i><span class="not-md:hidden">Extensions</span><!----></button></div><div class="actionbar-container pointer-events-auto relative flex h-12 items-center gap-2 rounded-lg border bg-comfy-menu-bg shadow-interface px-2 border-interface-stroke"><div class="flex h-full shrink-0 items-center gap-1 empty:hidden"></div><div data-testid="legacy-topbar-container" class="[&:not(:has(*>*:not(:empty)))]:hidden"><div class="flex gap-2 mx-2" style="width: fit-content;"><div class="comfyui-button-group"></div><div class="comfyui-button-group"></div><div class="comfyui-button-group"></div></div></div><div class="flex h-full items-center"><!----><div class="p-panel p-component pointer-events-auto actionbar pointer-events-auto z-1300 static border-none bg-transparent p-0" data-pc-name="panel" pc17="" data-pc-section="root" style="left: 361.5px; top: 611px;"><div class="p-panel-header hidden" data-pc-section="header"><!----><div class="p-panel-header-actions" data-pc-section="headeractions"><!----></div></div><div id="pv_id_29_content" class="p-panel-content-container" role="region" aria-labelledby="pv_id_29_header" data-pc-section="contentcontainer"><div class="p-panel-content p-0" data-pc-section="content"><div class="relative flex items-center gap-2 select-none"><span class="drag-handle h-max w-3 cursor-grab"></span><div class="inline-flex items-stretch overflow-hidden queue-button-group h-8 rounded-lg bg-secondary-background"><div class="batch-count h-full" aria-label="Batch Count" data-pd-tooltip="true"><div class="flex h-full w-14 overflow-hidden rounded-l-lg bg-secondary-background"><input type="text" inputmode="numeric" aria-label="Batch Count" class="h-full min-w-0 flex-1 border-none bg-secondary-background pl-1 pr-0 text-center text-sm font-normal tabular-nums text-base-foreground outline-none" style=""><div class="flex h-full w-6 flex-col"><button class="relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-secondary-background h-1/2 w-full rounded-none border-none p-0 text-muted-foreground hover:bg-secondary-background-hover disabled:cursor-not-allowed disabled:opacity-50 rounded-tr-none border-b border-border-subtle" aria-label="Increment"><!----><svg class="h-[5px] min-h-[5px] w-[8px] min-w-[8px] rotate-180" xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none" aria-hidden="true"><path d="M0.650391 0.649902L3.65039 3.6499L6.65039 0.649902" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><button disabled="" class="relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-secondary-background h-1/2 w-full rounded-none border-none p-0 text-muted-foreground hover:bg-secondary-background-hover disabled:cursor-not-allowed disabled:opacity-50 rounded-br-none" aria-label="Decrement"><!----><svg class="h-[5px] min-h-[5px] w-[8px] min-w-[8px]" xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none" aria-hidden="true"><path d="M0.650391 0.649902L3.65039 3.6499L6.65039 0.649902" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"></path></svg></button></div></div></div><button class="relative inline-flex items-center justify-center cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none text-sm font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-primary-background text-base-foreground hover:bg-primary-background-hover h-full rounded-lg gap-1.5 px-4 font-light" data-testid="queue-button" data-variant="primary" data-pd-tooltip="true"><!----><i class="icon-[lucide--play] size-4"></i> Run</button><button class="relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-secondary-background hover:bg-secondary-background-hover h-full w-6 rounded-l-none rounded-r-lg border-l border-border-subtle p-0 text-muted-foreground data-[state=open]:bg-secondary-background-hover" id="reka-dropdown-menu-trigger-v-0-0" type="button" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Run" data-testid="queue-mode-menu-trigger"><!----><svg class="h-[5px] min-h-[5px] w-[8px] min-w-[8px]" xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none" aria-hidden="true"><path d="M0.650391 0.649902L3.65039 3.6499L6.65039 0.649902" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"></path></svg></button></div><button disabled="" class="relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-destructive-background text-base-foreground hover:bg-destructive-background-hover size-8" aria-label="Cancel current run" data-pd-tooltip="true"><!----><i class="icon-[lucide--x] size-4"></i></button><button class="inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 text-secondary-foreground bg-secondary-background hover:bg-secondary-background-hover h-8 rounded-lg p-2 text-xs relative px-3" aria-pressed="false" data-testid="queue-overlay-toggle" data-pd-tooltip="true"><!----><span class="text-sm font-normal tabular-nums">0 active</span><!----><span class="sr-only">Expand job queue</span></button></div></div><!----></div></div><!----></div><!----><!----><button class="relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 text-secondary-foreground bg-secondary-background hover:bg-secondary-background-hover size-8" type="secondary" aria-label="Toggle properties panel" data-pd-tooltip="true"><!----><i class="icon-[lucide--panel-right] size-4"></i></button></div></div><!----><div class="flex justify-end w-full pointer-events-none" style="display: none;"><div class="pointer-events-auto flex max-h-[60vh] w-[350px] min-w-[310px] flex-col overflow-hidden rounded-lg border font-inter transition-colors duration-200 ease-in-out border-transparent bg-transparent shadow-none"><!----></div></div></div></div><div class="flex flex-col items-end gap-1"><!----><!----></div></div><div data-v-762c224f="" class="p-splitter p-component p-splitter-vertical splitter-overlay-bottom pointer-events-none mx-1 mb-1 flex-1 border-none bg-transparent" data-p-resizing="false" data-pc-name="splitter" pc20="" data-pc-section="root" style="display: flex; flex-flow: column;"><div data-v-762c224f="" class="p-splitterpanel graph-canvas-panel relative overflow-visible" tabindex="-1" data-pc-name="splitterpanel" pc21="" data-pc-section="root" style="flex-basis: calc(50% - 4px);"><div class="pointer-events-auto"><!----><!----><span class="p-buttongroup p-component absolute right-0 bottom-0 z-1200 flex-row gap-1 border border-interface-stroke bg-comfy-menu-bg p-2" role="toolbar" aria-label="Canvas Toolbar" data-pc-name="buttongroup" pc22="" data-pc-section="root" style="border-radius: 8px;"><button class="relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 text-secondary-foreground rounded-lg text-xs group h-8 rounded-none! bg-comfy-menu-bg p-0 transition-none! hover:rounded-lg! hover:bg-interface-button-hover-surface!" aria-label="Canvas Mode" aria-haspopup="menu" aria-expanded="false" style="border-radius: 8px; border: none;"><!----><div class="flex items-center gap-1 pr-0.5"><div class="rounded-lg bg-interface-panel-selected-surface p-2 group-hover:bg-interface-button-hover-surface"><i class="icon-[lucide--mouse-pointer-2] block size-4" aria-hidden="true"></i></div><i class="icon-[lucide--chevron-down] block size-4 pr-1.5" aria-hidden="true"></i></div></button><div class="h-[27px] w-px self-center bg-node-divider"></div><button class="relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 text-secondary-foreground rounded-lg text-xs size-8 bg-comfy-menu-bg p-0 hover:bg-interface-button-hover-surface!" aria-label="Fit View (.)" data-pd-tooltip="true" style="border-radius: 8px; border: none;"><!----><i class="icon-[lucide--focus] size-4" aria-hidden="true"></i></button><button class="relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 text-secondary-foreground rounded-lg text-xs bg-comfy-menu-bg hover:bg-interface-button-hover-surface! p-0 h-8 w-15" aria-label="Zoom Controls" data-testid="zoom-controls-button" data-pd-tooltip="true" style="border-radius: 8px; border: none;"><!----><span class="inline-flex items-center gap-1 px-2 text-xs"><span>100%</span><i class="icon-[lucide--chevron-down] size-4" aria-hidden="true"></i></span></button><div class="h-[27px] w-px self-center bg-node-divider"></div><button class="relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 text-secondary-foreground rounded-lg text-xs bg-comfy-menu-bg hover:bg-interface-button-hover-surface! not-active:bg-interface-panel-selected-surface! p-0 w-8 h-8" aria-label="Hide Minimap (ALT + SHIFT + M)" data-testid="toggle-minimap-button" data-pd-tooltip="true" style="border-radius: 8px; border: none;"><!----><i class="icon-[lucide--map] size-4" aria-hidden="true"></i></button><button class="relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 text-secondary-foreground rounded-lg text-xs bg-comfy-menu-bg hover:bg-interface-button-hover-surface! p-0 w-8 h-8" aria-label="Hide Links" data-testid="toggle-link-visibility-button" data-pd-tooltip="true" style="border-radius: 8px; border: none;"><!----><i class="icon-[lucide--route-off] size-4" aria-hidden="true"></i></button></span></div><div data-v-ed40e47e="" class="minimap-main-container absolute right-0 bottom-[54px] z-1000 flex flex-row pointer-events-auto"><!----><div data-v-ed40e47e="" class="litegraph-minimap relative border border-interface-stroke bg-comfy-menu-bg shadow-interface" style="width: 253px; height: 200px; border: 1px solid var(--interface-stroke); border-radius: 8px;"><button data-v-ed40e47e="" class="inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-transparent text-muted-foreground hover:bg-secondary-background-hover size-8 absolute top-0 left-0 z-10" aria-label="Settings"><!----><i data-v-ed40e47e="" class="icon-[lucide--settings-2]"></i></button><button data-v-ed40e47e="" class="inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-transparent text-muted-foreground hover:bg-secondary-background-hover size-8 absolute top-0 right-0 z-10" aria-label="Close" data-testid="close-minmap-button"><!----><i data-v-ed40e47e="" class="icon-[lucide--x]"></i></button><hr data-v-ed40e47e="" class="absolute top-6 h-px border-0 bg-node-component-border" style="width: 253px;"><canvas data-v-ed40e47e="" width="250" height="200" class="minimap-canvas"></canvas><div data-v-ed40e47e="" class="minimap-viewport" style="transform: translate(35px, 10px); width: 1843.2px; height: 1180.8px; border: 2px solid rgb(255, 255, 255); background-color: rgba(255, 255, 255, 0.2); will-change: transform; backface-visibility: hidden; perspective: 1000px; pointer-events: none;"></div><div data-v-ed40e47e="" class="absolute inset-0 touch-none"></div></div></div></div><div class="p-splitter-gutter rounded-t-lg hidden" role="separator" tabindex="-1" data-p-gutter-resizing="false" data-pc-section="gutter"><div class="p-splitter-gutter-handle" tabindex="0" aria-orientation="vertical" data-pc-section="gutterhandle" aria-valuenow="50.0000" style="height: 4px;"></div></div><div data-v-762c224f="" class="p-splitterpanel bottom-panel pointer-events-auto max-w-full overflow-x-auto rounded-lg border border-(--p-panel-border-color) bg-comfy-menu-bg" tabindex="-1" data-pc-name="splitterpanel" pc24="" data-pc-section="root" style="display: none; flex-basis: calc(50% - 4px);"><div data-v-25d94efc="" class="flex h-full flex-col"><div data-v-25d94efc="" class="p-tabs p-component" data-pc-name="tabs" pc25="" data-pc-section="root" style="--p-tabs-tablist-background: var(--comfy-menu-bg);"><div data-v-25d94efc="" class="p-tablist bg-transparent" data-pc-name="tablist" pc26="" data-pc-section="root"><!----><div class="p-tablist-content" data-pc-section="content"><div class="p-tablist-tab-list border-none h-full flex items-center py-2 border-b-1 border-solid" role="tablist" aria-orientation="horizontal" data-pc-section="tablist"><div data-v-25d94efc="" class="flex w-full justify-between"><div data-v-25d94efc="" class="tabs-container font-inter"></div><div data-v-25d94efc="" class="flex items-center gap-2"><!----><button data-v-25d94efc="" class="relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-transparent text-muted-foreground hover:bg-secondary-background-hover h-6 rounded-sm px-2 py-1 text-xs justify-self-end" aria-label="Close"><!----><i data-v-25d94efc="" class="pi pi-times"></i></button></div></div><span class="p-tablist-active-bar" role="presentation" aria-hidden="true" data-pc-section="activebar" style="width: 0px;"></span></div></div><!----></div></div><div data-v-25d94efc="" class="h-0 grow"><!----></div></div></div><!----></div></div><!----></div></div></div><canvas id="graph-canvas" tabindex="1" class="absolute inset-0 size-full touch-none lgraphcanvas" data-drop-target-for-element="true" width="1024" height="656" style="cursor: default;"></canvas><div data-testid="transform-pane" class="pointer-events-none absolute inset-0 size-full will-change-auto" style="transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px); transform-origin: 0px 0px;"></div><canvas class="pointer-events-none absolute inset-0 size-full" width="1024" height="656"></canvas><!----><!----><div></div><!----><!----><div data-v-e9e2895d="" class="pointer-events-none fixed top-0 left-0 z-40" style="transform: translate(var(--tb-x), var(--tb-y));"><!----></div><!----><!----><!----></div><!----><!----></div><!----><!----><div data-v-480ffec1="" class="no-drag fixed top-0 right-0 z-9999 flex flex-row" style="display: none;"><button class="relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 bg-transparent text-muted-foreground hover:bg-secondary-background-hover h-10 rounded-lg px-4 py-2 text-sm" aria-label="Show Menu" aria-live="assertive" data-pd-tooltip="true"><!----><i class="pi pi-bars"></i></button><div class="window-actions-spacer"></div></div></main><div class="p-blockui" aria-busy="false" data-pc-name="blockui" pc1="" data-pc-section="root"></div></div><div class="comfy-modal"><div class="comfy-modal-content"><p></p><button type="button">Close</button></div></div><div class="comfy-modal"><div class="comfy-modal-content"><p></p><button type="button">Close</button></div></div><input id="comfy-file-input" type="file" accept=".png,.webp,.svg,.avif,.mp3,.ogg,.flac,.mp4,.mov,.m4v,.webm,.glb,.json,.latent,.safetensors,image/png,image/webp,image/svg+xml,image/avif,audio/mpeg,audio/ogg,audio/flac,audio/x-flac,video/mp4,video/quicktime,video/x-m4v,video/webm,model/gltf-binary,application/json" style="display: none;"><!----><!----><!----><div class="p-toast p-component p-toast-top-right" data-pc-name="toast" pc3="" data-pc-section="root" style="position: fixed; top: 20px; right: 20px;"><div></div></div><div class="p-toast p-component p-toast-top-right" data-pc-name="toast" pc4="" data-pc-section="root" style="position: fixed; top: 20px; right: 20px;"><div></div></div><div class="p-toast p-component p-toast-top-right" data-pc-name="toast" pc5="" data-pc-section="root" style="position: fixed; top: 20px; right: 20px;"><div></div></div><div class="p-toast p-component p-toast-top-right" data-pc-name="toast" pc6="" data-pc-section="root" style="position: fixed; top: 20px; right: 20px;"><div></div></div><div class="comfy-modal comfy-manage-templates"><div class="comfy-modal-content"><p></p><button type="button">Import</button><button type="button">Export</button><button type="button">Close</button></div></div><input type="file" accept=".json" multiple="" style="display: none;"><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><div class="p-dialog-mask p-overlay-mask p-overlay-mask-enter" data-pc-section="mask" style="position: fixed; height: 100%; width: 100%; left: 0px; top: 0px; display: flex; justify-content: center; align-items: center; pointer-events: auto; z-index: 1101;"><div class="p-dialog p-component global-dialog rounded-2xl overflow-hidden" role="dialog" aria-labelledby="global-workflow-template-selector" aria-modal="true" headless="true" maximized="false" data-pc-name="dialog" pc33="" data-pc-section="root" data-pd-focustrap="true" style="display: flex; flex-direction: column; pointer-events: auto;"><span class="p-hidden-accessible p-hidden-focusable" tabindex="0" role="presentation" aria-hidden="true" data-p-hidden-accessible="true" data-p-hidden-focusable="true" data-pc-section="firstfocusableelement"></span><div class="p-dialog-header p-0! hidden" data-pc-section="header"><!----><div class="p-dialog-header-actions" data-pc-section="headeractions"><!----><button class="p-button p-component p-button-icon-only p-button-secondary p-button-rounded p-button-text p-dialog-close-button" type="button" aria-label="Close" data-pc-name="pcclosebutton" data-p-disabled="false" data-p-severity="secondary" data-pc-group-section="headericon" data-pc-extend="button" pc34="" data-pc-section="root" autofocus=""><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="p-icon p-button-icon" aria-hidden="true"><path d="M8.01186 7.00933L12.27 2.75116C12.341 2.68501 12.398 2.60524 12.4375 2.51661C12.4769 2.42798 12.4982 2.3323 12.4999 2.23529C12.5016 2.13827 12.4838 2.0419 12.4474 1.95194C12.4111 1.86197 12.357 1.78024 12.2884 1.71163C12.2198 1.64302 12.138 1.58893 12.0481 1.55259C11.9581 1.51625 11.8617 1.4984 11.7647 1.50011C11.6677 1.50182 11.572 1.52306 11.4834 1.56255C11.3948 1.60204 11.315 1.65898 11.2488 1.72997L6.99067 5.98814L2.7325 1.72997C2.59553 1.60234 2.41437 1.53286 2.22718 1.53616C2.03999 1.53946 1.8614 1.61529 1.72901 1.74767C1.59663 1.88006 1.5208 2.05865 1.5175 2.24584C1.5142 2.43303 1.58368 2.61419 1.71131 2.75116L5.96948 7.00933L1.71131 11.2675C1.576 11.403 1.5 11.5866 1.5 11.7781C1.5 11.9696 1.576 12.1532 1.71131 12.2887C1.84679 12.424 2.03043 12.5 2.2219 12.5C2.41338 12.5 2.59702 12.424 2.7325 12.2887L6.99067 8.03052L11.2488 12.2887C11.3843 12.424 11.568 12.5 11.7594 12.5C11.9509 12.5 12.1346 12.424 12.27 12.2887C12.4053 12.1532 12.4813 11.9696 12.4813 11.7781C12.4813 11.5866 12.4053 11.403 12.27 11.2675L8.01186 7.00933Z" fill="currentColor"></path></svg><span class="p-button-label" data-pc-section="label"> </span><!----></button></div></div><div class="p-dialog-content p-0! m-0!" data-pc-section="content"><div class="relative overflow-hidden rounded-2xl h-[80vh] w-[90vw] max-w-[1400px]" maximized="false"><div class="grid size-full transition-[grid-template-columns] duration-300 ease-out" style="grid-template-columns: 14rem 1fr;"><nav class="flex h-full flex-col overflow-hidden bg-modal-panel-background" aria-hidden="false"><header data-component-id="LeftPanelHeader" class="flex h-18 w-full shrink-0 items-center-safe gap-2 pr-3 pl-6"><i class="icon-[comfy--template]"></i><h2 class="text-neutral text-base">Templates</h2><!----></header><div class="flex min-h-0 scrollbar-hide w-full flex-auto flex-col gap-1 overflow-y-auto bg-modal-panel-background px-3" data-driver-scroll="1"><div class="flex flex-col gap-2"><div class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm text-base-foreground transition-colors select-none bg-interface-menu-component-surface-selected" role="button"><i class="icon-[lucide--list] text-neutral shrink-0 text-sm"></i><span class="min-w-0 truncate">All Templates</span><!----></div></div><div class="flex flex-col gap-2"><div class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm text-base-foreground transition-colors select-none hover:bg-interface-menu-component-surface-hovered" role="button"><i class="icon-[lucide--flame] text-neutral shrink-0 text-sm"></i><span class="min-w-0 truncate">Popular</span><!----></div></div><div class="flex flex-col gap-2"><div class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm text-base-foreground transition-colors select-none hover:bg-interface-menu-component-surface-hovered" role="button"><i class="icon-[lucide--star] text-neutral shrink-0 text-sm"></i><span class="min-w-0 truncate">Use Cases</span><!----></div></div><div class="flex flex-col gap-2"><div class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm text-base-foreground transition-colors select-none hover:bg-interface-menu-component-surface-hovered" role="button"><i class="icon-[lucide--settings] text-neutral shrink-0 text-sm"></i><span class="min-w-0 truncate">Utility</span><!----></div></div><div class="flex flex-col gap-2"><div class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm text-base-foreground transition-colors select-none hover:bg-interface-menu-component-surface-hovered" role="button"><i class="icon-[lucide--graduation-cap] text-neutral shrink-0 text-sm"></i><span class="min-w-0 truncate">Getting Started</span><!----></div></div><div class="flex flex-col gap-2"><div class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm text-base-foreground transition-colors select-none hover:bg-interface-menu-component-surface-hovered" role="button"><i class="icon-[lucide--blocks] text-neutral shrink-0 text-sm"></i><span class="min-w-0 truncate">Node Basics</span><!----></div></div><div class="flex flex-col gap-2"><div class="m-0 flex items-center justify-between px-3 py-0 pt-5"><h3 class="text-xs font-bold text-text-secondary uppercase">Generation Type</h3><!----></div><div class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm text-base-foreground transition-colors select-none hover:bg-interface-menu-component-surface-hovered" role="button"><i class="icon-[lucide--image] text-neutral shrink-0 text-sm"></i><span class="min-w-0 truncate">Image</span><!----></div><div class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm text-base-foreground transition-colors select-none hover:bg-interface-menu-component-surface-hovered" role="button"><i class="icon-[lucide--film] text-neutral shrink-0 text-sm"></i><span class="min-w-0 truncate">Video</span><!----></div><div class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm text-base-foreground transition-colors select-none hover:bg-interface-menu-component-surface-hovered" role="button"><i class="icon-[lucide--volume-2] text-neutral shrink-0 text-sm"></i><span class="min-w-0 truncate">Audio</span><!----></div><div class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm text-base-foreground transition-colors select-none hover:bg-interface-menu-component-surface-hovered" role="button"><i class="icon-[lucide--box] text-neutral shrink-0 text-sm"></i><span class="min-w-0 truncate">3D Model</span><!----></div><div class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm text-base-foreground transition-colors select-none hover:bg-interface-menu-component-surface-hovered" role="button"><i class="icon-[lucide--message-square-text] text-neutral shrink-0 text-sm"></i><span class="min-w-0 truncate">LLM</span><!----></div></div><div class="flex flex-col gap-2"><div class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm text-base-foreground transition-colors select-none hover:bg-interface-menu-component-surface-hovered" role="button"><i class="icon-[lucide--handshake] text-neutral shrink-0 text-sm"></i><span class="min-w-0 truncate">Partner Nodes</span><!----></div></div></div></nav><div class="flex flex-col overflow-hidden bg-base-background"><header class="flex h-18 w-full items-center justify-between gap-2 px-6"><div class="flex flex-1 shrink-0 gap-2"><!----><div dir="ltr" class="max-w-96 flex-1"><div class="relative flex w-full cursor-text items-center rounded-lg bg-secondary-background text-base-foreground h-10 p-2"><i class="pointer-events-none absolute left-2.5 size-4 icon-[lucide--search]"></i><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="size-full border-none bg-transparent outline-none pl-8 text-xs" placeholder="Search ..." value="" style=""></div><!--v-if--></div></div><div class="flex gap-2"><!----></div><!----><button class="relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0 text-secondary-foreground bg-secondary-background hover:bg-secondary-background-hover h-10 rounded-lg px-4 py-2 text-sm w-10" aria-label="Close dialog"><!----><i class="pi pi-times"></i></button></header><main class="flex min-h-0 flex-1 flex-col"><div class="relative flex flex-wrap justify-between gap-2 px-6 pb-4"><div class="flex flex-wrap gap-2"><div dir="ltr"><button type="button" tabindex="-1" aria-label="Model Filter" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="w-[250px] relative inline-flex cursor-pointer items-center select-none rounded-lg bg-secondary-background text-base-foreground outline-none transition-all duration-200 ease-in-out hover:bg-secondary-background-hover border-[2.5px] border-solid disabled:cursor-default disabled:opacity-30 disabled:hover:bg-secondary-background h-10 border-transparent focus-visible:border-node-component-border data-[state=open]:border-node-component-border"><div class="flex flex-1 items-center overflow-hidden py-2 whitespace-nowrap pl-4"><span class="text-sm">Model Filter</span><!----></div><div class="flex shrink-0 cursor-pointer items-center justify-center px-3"><i class="icon-[lucide--chevron-down] text-muted-foreground"></i></div></button><!--v-if--></div><div dir="ltr"><button type="button" tabindex="-1" aria-label="Tasks" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative inline-flex cursor-pointer items-center select-none rounded-lg bg-secondary-background text-base-foreground outline-none transition-all duration-200 ease-in-out hover:bg-secondary-background-hover border-[2.5px] border-solid disabled:cursor-default disabled:opacity-30 disabled:hover:bg-secondary-background h-10 border-transparent focus-visible:border-node-component-border data-[state=open]:border-node-component-border"><div class="flex flex-1 items-center overflow-hidden py-2 whitespace-nowrap pl-4"><span class="text-sm">Tasks</span><!----></div><div class="flex shrink-0 cursor-pointer items-center justify-center px-3"><i class="icon-[lucide--chevron-down] text-muted-foreground"></i></div></button><!--v-if--></div><div dir="ltr"><button type="button" tabindex="-1" aria-label="Runs on" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative inline-flex cursor-pointer items-center select-none rounded-lg bg-secondary-background text-base-foreground outline-none transition-all duration-200 ease-in-out hover:bg-secondary-background-hover border-[2.5px] border-solid disabled:cursor-default disabled:opacity-30 disabled:hover:bg-secondary-background h-10 border-transparent focus-visible:border-node-component-border data-[state=open]:border-node-component-border"><div class="flex flex-1 items-center overflow-hidden py-2 whitespace-nowrap pl-4"><span class="text-sm">Runs on</span><!----></div><div class="flex shrink-0 cursor-pointer items-center justify-center px-3"><i class="icon-[lucide--chevron-down] text-muted-foreground"></i></div></button><!--v-if--></div></div><div><button class="w-62.5 relative inline-flex cursor-pointer items-center select-none rounded-lg bg-secondary-background text-base-foreground outline-none transition-all duration-200 ease-in-out hover:bg-secondary-background-hover border-[2.5px] border-solid disabled:cursor-default disabled:opacity-30 disabled:hover:bg-secondary-background h-10 border-transparent focus-visible:border-node-component-border data-[state=open]:border-node-component-border" aria-label="Sort by" role="combobox" type="button" aria-controls="reka-select-content-v-3" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed"><div class="flex flex-1 items-center gap-2 overflow-hidden py-2 pl-4 text-sm"><i class="icon-[lucide--arrow-up-down] text-muted-foreground"></i><span class="truncate" style="pointer-events: none;">Default</span></div><div class="flex shrink-0 cursor-pointer items-center justify-center px-3"><i class="icon-[lucide--chevron-down] text-muted-foreground"></i></div></button><!--v-if--></div></div><div class="text-neutral px-6 pt-4 pb-2 text-2xl font-semibold"><span>All Templates</span></div><!----><div class="flex scrollbar-custom min-h-0 flex-1 flex-col overflow-y-auto px-6 pt-0 pb-10"><div><!----><div data-testid="template-workflows-content" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); padding: 0px; gap: 1rem;"><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-api_seedance2_0_r2v_real_human"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><!----><img src="blob:http://127.0.0.1:8000/2e72a94d-34d6-4255-872f-39e2c2d02268" alt="Seedance2.0 Real Human: Reference to Video" draggable="false" class="transform-gpu transition-transform duration-300 ease-out w-full h-full object-cover"><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/bytedance.png" alt="ByteDance" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">ByteDance</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>API</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Video</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Seedance2.0 Real Human: Reference to Video">Seedance2.0 Real Human: Reference to Video</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload a reference video of a real person for identity verification. Use your own photo to validate and generate a personalized video output.">Upload a reference video of a real person for identity verification. Use your own photo to validate and generate a personalized video output.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-api_seedance2_0_flf2v_real_human"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><!----><img src="blob:http://127.0.0.1:8000/4393701a-2f2b-44b0-8d40-8010f7f201f3" alt="Seedance2.0 Real Human: FLF2V" draggable="false" class="transform-gpu transition-transform duration-300 ease-out w-full h-full object-cover"><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/bytedance.png" alt="ByteDance" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">ByteDance</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>API</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Video</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Seedance2.0 Real Human: FLF2V">Seedance2.0 Real Human: FLF2V</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload a reference image of a real person for identity verification and generate a personalized video with first and last frame control using Seedance2.0 FLF2V.">Upload a reference image of a real person for identity verification and generate a personalized video with first and last frame control using Seedance2.0 FLF2V.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-api_seedance2_0_r2v"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc38="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/bytedance.png" alt="ByteDance" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">ByteDance</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>API</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image to Video</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Video</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Seedance 2.0: Reference to Video">Seedance 2.0: Reference to Video</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Generate cinematic videos from reference images and text prompts. Preserve subject identity and composition while adding expressive motion with synchronized audio. Control camera movement and lighting through detailed prompts.">Generate cinematic videos from reference images and text prompts. Preserve subject identity and composition while adding expressive motion with synchronized audio. Control camera movement and lighting through detailed prompts.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-api_seedance2_0_t2v"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc39="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/bytedance.png" alt="ByteDance" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">ByteDance</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Text to Video</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Video</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Seedance 2.0: Text to Video ">Seedance 2.0: Text to Video </h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Generate cinematic videos from text prompts with synchronized audio, controlled camera motion, and stable visuals. Input text descriptions to output high quality video sequences.">Generate cinematic videos from text prompts with synchronized audio, controlled camera motion, and stable visuals. Input text descriptions to output high quality video sequences.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-api_seedance2_0_flf2v"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc40="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/bytedance.png" alt="ByteDance" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">ByteDance</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Video</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>FLF2V</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>API</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Seedance2.0: First-Last-Frame to Video">Seedance2.0: First-Last-Frame to Video</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload the first and last frames of your video. Generate a high quality video sequence using the Seedance2.0 model.">Upload the first and last frames of your video. Generate a high quality video sequence using the Seedance2.0 model.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates-1_click_multiple_character_angles-v1.0"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc41="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><!----><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image Edit</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="1 Click Multiple Character Angles">1 Click Multiple Character Angles</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload an image of your character and get multiple views of that image from different angles">Upload an image of your character and get multiple views of that image from different angles</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-template_contact_sheet-step_1.app"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc42="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">Google</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image Edit</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Step 1: Contact Sheet Workflow ">Step 1: Contact Sheet Workflow </h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload your character, scene and product. Integrates all images into a fashion editorial style photograph.">Upload your character, scene and product. Integrates all images into a fashion editorial style photograph.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--panels-top-left]"></i> App</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-template_contact_sheet-step_3.app"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc43="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"><img data-testid="logo-img" src="/templates/logo/kling.png" alt="Kling" class="size-6 rounded-full border-2 border-white object-cover relative" draggable="false" style="margin-left: -6px;"></div><span class="text-sm font-medium text-white">Google and Kling</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>FLF2V</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Video</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Step 3: Contact Sheet Workflow">Step 3: Contact Sheet Workflow</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload 8 images (in order) to be used as keyframes for 7 Kling 3.0 FFLF videos.">Upload 8 images (in order) to be used as keyframes for 7 Kling 3.0 FFLF videos.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--panels-top-left]"></i> App</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-template_character_portrait_relighting"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc44="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">Google</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Relight</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Portrait</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>API</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Character Portrait Relighting">Character Portrait Relighting</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload a portrait of your character and create multiple cinematic lighting conditions while maintaining character consistency.">Upload a portrait of your character and create multiple cinematic lighting conditions while maintaining character consistency.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-template_ltx2_3_style_transition"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc45="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><!----><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>FLF2V</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>LoRA</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Video</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="LTX-2.3 Style Transition ">LTX-2.3 Style Transition </h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Apply the ltx2.3 transition LoRA to create smooth style and scene transitions. This workflow uses a specialized model to blend visual elements.">Apply the ltx2.3 transition LoRA to create smooth style and scene transitions. This workflow uses a specialized model to blend visual elements.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates_graphic_design_recomposer"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc46="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">Google</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Layout Design</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Graphic Design Recomposer">Graphic Design Recomposer</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload a graphic design and select your desired aspect ratio. Generates and recomposes the graphic to fit the new aspect ratio.">Upload a graphic design and select your desired aspect ratio. Generates and recomposes the graphic to fit the new aspect ratio.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-template_image_speech_to_video"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc47="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/elevenlabs.jpg" alt="ElevenLabs" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover relative" draggable="false" style="margin-left: -6px;"><img data-testid="logo-img" src="/templates/logo/lightricks.png" alt="Lightricks" class="size-6 rounded-full border-2 border-white object-cover relative" draggable="false" style="margin-left: -6px;"></div><span class="text-sm font-medium text-white">Multiple Providers</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>API</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Lip Sync</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Video Generation</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Generate UGC Video With Voice Clone">Generate UGC Video With Voice Clone</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload an image to generate AI prompts and synthesize speech. Create a final video with accurate lip sync using Eleven Labs and LTX Video.">Upload an image to generate AI prompts and synthesize speech. Create a final video with accurate lip sync using Eleven Labs and LTX Video.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-template_product_placement"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc48="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"><img data-testid="logo-img" src="/templates/logo/kling.png" alt="Kling" class="size-6 rounded-full border-2 border-white object-cover relative" draggable="false" style="margin-left: -6px;"></div><span class="text-sm font-medium text-white">Google and Kling</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Video</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Replacement</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Product</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Product Placement">Product Placement</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Swap products into a reference scene while preserving composition and lighting. Generates a final product image and an automatic video prompt for creating polished product videos.">Swap products into a reference scene while preserving composition and lighting. Generates a final product image and an automatic video prompt for creating polished product videos.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-template_qwen_image_illustration_lora"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc49="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><!----><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>LoRA</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Text to Image</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Qwen Image: Illustration LoRA">Qwen Image: Illustration LoRA</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="A t2v workflows for a style LoRA built on Qwen Image. Produces images spanning cute anime character design, European bande dessinee, indie risograph prints, storybook watercolor, retro shoujo manga, and graphic novel illustration.">A t2v workflows for a style LoRA built on Qwen Image. Produces images spanning cute anime character design, European bande dessinee, indie risograph prints, storybook watercolor, retro shoujo manga, and graphic novel illustration.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-template_sugar_coated_gummy_style_qwen"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc50="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><!----><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>LoRA</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Qwen Image: Gummy Animals LoRA">Qwen Image: Gummy Animals LoRA</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Apply a Qwen Image LoRA to transform any subject into a sour gummy candy style character. Enter an animal name in the prompt to generate a stylized, edible looking creature.">Apply a Qwen Image LoRA to transform any subject into a sour gummy candy style character. Enter an animal name in the prompt to generate a stylized, edible looking creature.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-template_eric_thumbnail_generator"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc51="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">Google</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="YouTube Thumbnail Generator">YouTube Thumbnail Generator</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Generate high contrast, clickable YouTube thumbnails using Nano Banana Pro. Creates dramatic compositions with exaggerated subjects and bold color strategies for maximum engagement.">Generate high contrast, clickable YouTube thumbnails using Nano Banana Pro. Creates dramatic compositions with exaggerated subjects and bold color strategies for maximum engagement.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates_ohneis_i2v"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc52="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div><div class="absolute inset-0"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc53="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div><div class="pointer-events-none absolute inset-y-0 z-10 w-0.5 bg-white/30 backdrop-blur-sm" style="left: 50%;"></div></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"><img data-testid="logo-img" src="/templates/logo/kling.png" alt="Kling" class="size-6 rounded-full border-2 border-white object-cover relative" draggable="false" style="margin-left: -6px;"></div><span class="text-sm font-medium text-white">Google and Kling</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image to Video</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Text to Image</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Video</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Image to Video">Image to Video</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="This is the base workflow behind my viral Wes Anderson style reel on Instagram. It shows how to go from a simple prompt to a Wes Anderson style image using a cinematic image model, then enhance it with Nanobanana to improve textures and details, and finally turn it into a video using the current best video model, Kling 3.0.">This is the base workflow behind my viral Wes Anderson style reel on Instagram. It shows how to go from a simple prompt to a Wes Anderson style image using a cinematic image model, then enhance it with Nanobanana to improve textures and details, and finally turn it into a video using the current best video model, Kling 3.0.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates_doc_workbox_poster_recreator"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc54="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">Google</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Poster</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image Edit</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Realistic Poster Redesign With Character Transformation">Realistic Poster Redesign With Character Transformation</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Transform uploaded images into realistic poster designs. Change character poses, faces, and clothing while maintaining artistic style and color schemes. Outputs a visually impactful poster with artistic typography.">Transform uploaded images into realistic poster designs. Change character poses, faces, and clothing while maintaining artistic style and color schemes. Outputs a visually impactful poster with artistic typography.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates_rob_realistic_2k_images_quick_variations.app"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc55="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/grok.png" alt="Grok" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">Grok</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>API</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image Upscale</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title=" Generate Realistic Variations"> Generate Realistic Variations</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload a reference image, uses Grok to caption and generate variations with a fast 2x upscale for added details.">Upload a reference image, uses Grok to caption and generate variations with a fast 2x upscale for added details.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--panels-top-left]"></i> App</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates_rob_portrait_light_migration.app"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc56="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div><div class="absolute inset-0"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc57="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div><div class="pointer-events-none absolute inset-y-0 z-10 w-0.5 bg-white/30 backdrop-blur-sm" style="left: 50%;"></div></div></div></div><!----><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image Edit</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>LoRA</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Relight</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Portrait Relight">Portrait Relight</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload your target image and a reference lighting image. Relights your target image.">Upload your target image and a reference lighting image. Relights your target image.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--panels-top-left]"></i> App</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-template_sferro21_product_ad.app"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc58="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">Google</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Product</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image Edit</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Replacement</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Cinematic</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Style Transfer</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Mockup</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Product Ad Cinematic Sequence Generator">Product Ad Cinematic Sequence Generator</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload a product image and a cinematic style reference. Generate a sequence of stylized product advertisements with consistent composition and lighting.">Upload a product image and a cinematic style reference. Generate a sequence of stylized product advertisements with consistent composition and lighting.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--panels-top-left]"></i> App</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates_3d_match_game_art_style.app"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc59="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div><div class="absolute inset-0"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc60="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div><div class="pointer-events-none absolute inset-y-0 z-10 w-0.5 bg-white/30 backdrop-blur-sm" style="left: 50%;"></div></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">Google</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Game</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Style Reference</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Game Asset Style Transfer Sprite Generator">Game Asset Style Transfer Sprite Generator</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Use an outline reference, and a style reference as input to generate 2D sprite as model textures. Useful for background set dressing in 2D/2.5D game.">Use an outline reference, and a style reference as input to generate 2D sprite as model textures. Useful for background set dressing in 2D/2.5D game.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--panels-top-left]"></i> App</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-template_sirolim_image_script_video"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc61="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/kling.png" alt="Kling" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover relative" draggable="false" style="margin-left: -6px;"></div><span class="text-sm font-medium text-white">Kling and Google</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image to Video</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Video</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Image to Script to Kling Video Generation">Image to Script to Kling Video Generation</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload an image to automatically generate a descriptive script. This script is then used to create a video with the Kling 3.0 Omni model.">Upload an image to automatically generate a descriptive script. This script is then used to create a video with the Kling 3.0 Omni model.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-template_rob_realistic_2k_images_quick_variations"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc62="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div><div class="absolute inset-0"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc63="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div><div class="pointer-events-none absolute inset-y-0 z-10 w-0.5 bg-white/30 backdrop-blur-sm" style="left: 50%;"></div></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/grok.png" alt="Grok" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">Grok</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image Upscale</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Text to Image</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Realistic 2k Images - Quick Variations">Realistic 2k Images - Quick Variations</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload an image that you want a variation of. The workflow captions the input image, generates with Grok Image, and upscales with Z image to add realistic textures.">Upload an image that you want a variation of. The workflow captions the input image, generates with Grok Image, and upscales with Z image to add realistic textures.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates-character_sheet"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc64="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">Google</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Multiple Angles</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="360 Full-body Turnaround">360 Full-body Turnaround</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload your character and generate 360 turnaround views for full body and close ups.">Upload your character and generate 360 turnaround views for full body and close ups.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates-portrait_light_migration"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc65="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><!----><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>LoRA</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Portrait</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Relight</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Light Migration for Character Portrait">Light Migration for Character Portrait</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload a portrait of your character and a reference lighting image. Generate an image with reference lighting applied and character consistency.">Upload a portrait of your character and a reference lighting image. Generate an image with reference lighting applied and character consistency.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates-image_to_real"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc66="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div><div class="absolute inset-0"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc67="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div><div class="pointer-events-none absolute inset-y-0 z-10 w-0.5 bg-white/30 backdrop-blur-sm" style="left: 50%;"></div></div></div></div><!----><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Style Transfer</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Illustration to Realism">Illustration to Realism</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Input an illustration and generate a hyper realistic version using Qwen Image Edit 2509.">Input an illustration and generate a hyper realistic version using Qwen Image Edit 2509.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-template_eric_seedance_5_subject_and_outfit_combine"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc68="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/bytedance.png" alt="ByteDance" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">ByteDance</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>virtual try on</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Outfit Application for Character Portraits">Outfit Application for Character Portraits</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload your character portrait and outfit reference. Generate a new portrait with the specific outfit applied for consistent wardrobe control. Affordable alternative to Nano Banana Pro and Nano Banana 2.">Upload your character portrait and outfit reference. Generate a new portrait with the specific outfit applied for consistent wardrobe control. Affordable alternative to Nano Banana Pro and Nano Banana 2.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-template_eric_exploded_view"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc69="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/bytedance.png" alt="ByteDance" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover relative" draggable="false" style="margin-left: -6px;"></div><span class="text-sm font-medium text-white">ByteDance and Google</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Video</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>FLF2V</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Exploded View Animation">Exploded View Animation</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload an image of a device or object to generate start and end frames. The workflow animates the transition to an exploded view and back, outputting a seamless video loop.">Upload an image of a device or object to generate start and end frames. The workflow animates the transition to an exploded view and back, outputting a seamless video loop.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-template-recraft_create_style"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc70="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/recarft.png" alt="Recraft" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">Recraft</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>API</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Style Transfer</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Style Transfer - Recraft Text-to-Image">Style Transfer - Recraft Text-to-Image</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload 1 5 style references and create a style ID to generate consistent, on brand images.">Upload 1 5 style references and create a style ID to generate consistent, on brand images.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates-1_click_multiple_scene_angles-v1.0"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc71="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><!----><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image Edit</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="1 click Multiple Scene Angles">1 click Multiple Scene Angles</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload an image of your scene and generate multiple views of your input scene with 1 click.">Upload an image of your scene and generate multiple views of your input scene with 1 click.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates-1_input-multiple_styles_prompt.app"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc72="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/grok.png" alt="Grok" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">Grok</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>API</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image Edit</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="1 input multiple styles from prompt">1 input multiple styles from prompt</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload an image and generate 12 stylized variations in under 15 seconds.">Upload an image and generate 12 stylized variations in under 15 seconds.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--panels-top-left]"></i> App</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates-photo_to_product_vid"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc73="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><!----><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Product</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image to Video</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>API</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Phone Image to Product Video: Shoe">Phone Image to Product Video: Shoe</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Take a picture with your phone, upload it and generate a studio grade product video.">Take a picture with your phone, upload it and generate a studio grade product video.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates-6-key-frames"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc74="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><!----><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>FLF2V</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image to Video</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Multi-Keyframe Video Stitching">Multi-Keyframe Video Stitching</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Creates a smooth video using 6 key frames.It auto fills in the motion between frames and stitchs the segments together seamlessly.">Creates a smooth video using 6 key frames.It auto fills in the motion between frames and stitchs the segments together seamlessly.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates-all_in_one-image_edit_models"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc75="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"><img data-testid="logo-img" src="/templates/logo/wan.png" alt="WAN" class="size-6 rounded-full border-2 border-white object-cover relative" draggable="false" style="margin-left: -6px;"><img data-testid="logo-img" src="/templates/logo/openai.png" alt="OpenAI" class="size-6 rounded-full border-2 border-white object-cover relative" draggable="false" style="margin-left: -6px;"><img data-testid="logo-img" src="/templates/logo/bytedance.png" alt="ByteDance" class="size-6 rounded-full border-2 border-white object-cover relative" draggable="false" style="margin-left: -6px;"><img data-testid="logo-img" src="/templates/logo/grok.png" alt="Grok" class="size-6 rounded-full border-2 border-white object-cover relative" draggable="false" style="margin-left: -6px;"></div><span class="text-sm font-medium text-white">Multiple Providers</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>API</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image Edit</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="1 input and multiple editing model comparison">1 input and multiple editing model comparison</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="upload one input image and select multiple editing models. generate side by side outputs to directly compare model effects and quality.">upload one input image and select multiple editing models. generate side by side outputs to directly compare model effects and quality.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates-subject_product_swap.app"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc76="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">Google</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>API</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Product</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Replacement</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Swap Product in Character’s Hand, UGC Style">Swap Product in Character’s Hand, UGC Style</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload a photo of a character holding a product and your brands product. Generate an image with the products swapped.">Upload a photo of a character holding a product and your brands product. Generate an image with the products swapped.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--panels-top-left]"></i> App</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates-product_scene_relight"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc77="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div><div class="absolute inset-0"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc78="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div><div class="pointer-events-none absolute inset-y-0 z-10 w-0.5 bg-white/30 backdrop-blur-sm" style="left: 50%;"></div></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/bytedance.png" alt="ByteDance" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">ByteDance</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image Edit</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Product</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Relight</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Composite your Product + Scene and Relight">Composite your Product + Scene and Relight</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload an image of your product and background. Composite them and seamlessly relight and fuse together using Seedream 4.5.">Upload an image of your product and background. Composite them and seamlessly relight and fuse together using Seedream 4.5.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates_mjm_looped_restyler"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc79="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"><img data-testid="logo-img" src="/templates/logo/wan.png" alt="WAN" class="size-6 rounded-full border-2 border-white object-cover relative" draggable="false" style="margin-left: -6px;"></div><span class="text-sm font-medium text-white">Google and WAN</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image to Video</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Video</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>FLF2V</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Looped Restyler">Looped Restyler</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload a starting image and its prompt to generate a looping video from the first to the last frame.">Upload a starting image and its prompt to generate a looping video from the first to the last frame.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates-3D_logo_texture_animation"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc80="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/bytedance.png" alt="ByteDance" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover relative" draggable="false" style="margin-left: -6px;"></div><span class="text-sm font-medium text-white">ByteDance and Google</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Brand Design</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>FLF2V</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Dynamic 3D Logo Animations">Dynamic 3D Logo Animations</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload a vector image of your logo, and prompt your desired texture. Generate a textured 3D first and last frame with automated prompting for the final animation.">Upload a vector image of your logo, and prompt your desired texture. Generate a textured 3D first and last frame with automated prompting for the final animation.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates-car_product"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc81="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><!----><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Product</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image to Video</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>API</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>FLF2V</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="1 Image to Car Product Shots">1 Image to Car Product Shots</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload a photo of your vehicle and generate a studio quality video of the vehicle from multiple angles.">Upload a photo of your vehicle and generate a studio quality video of the vehicle from multiple angles.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates-textured_logo_elements"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc82="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/bytedance.png" alt="ByteDance" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover relative" draggable="false" style="margin-left: -6px;"></div><span class="text-sm font-medium text-white">ByteDance and Google</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Brand Design</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image to Video</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Apply Texture + Elements to Logo">Apply Texture + Elements to Logo</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload your logo, texture and elements. Generate a video of the textured logo for an on brand asset.">Upload your logo, texture and elements. Generate a video of the textured logo for an on brand asset.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates-subject_holding_product.app"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc83="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">Google</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>API</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Portrait</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Product</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Add Product to Character’s Hand, AI UGC">Add Product to Character’s Hand, AI UGC</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload a photo of your character and your product. Generate an image of that character holding the product.">Upload a photo of your character and your product. Generate an image of that character holding the product.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--panels-top-left]"></i> App</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates-textured_logotype-v2.1"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc84="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/bytedance.png" alt="ByteDance" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover relative" draggable="false" style="margin-left: -6px;"></div><span class="text-sm font-medium text-white">ByteDance and Google</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Brand Design</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image to Video</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>FLF2V</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Apply Texture to Logo">Apply Texture to Logo</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload your logotype and apply a texture + elements for on brand asset">Upload your logotype and apply a texture + elements for on brand asset</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates-assemble_dieline"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative size-full"><div class="absolute inset-0"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc85="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div><div class="absolute inset-0 z-10"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc86="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">Google</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image Edit</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Product</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Generate Brand Packaging from Dieline">Generate Brand Packaging from Dieline</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload a dieline of your product and assemble into a 3D package.">Upload a dieline of your product and assemble into a 3D package.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates-product_ad-v2.0"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc87="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/bytedance.png" alt="ByteDance" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover relative" draggable="false" style="margin-left: -6px;"></div><span class="text-sm font-medium text-white">ByteDance and Google</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Style Reference</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Swap Product Into a Reference AD">Swap Product Into a Reference AD</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Create static ads for your product in the style of a reference advertisement">Create static ads for your product in the style of a reference advertisement</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-templates-color_illustration"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc88="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div><div class="absolute inset-0"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc89="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div><div class="pointer-events-none absolute inset-y-0 z-10 w-0.5 bg-white/30 backdrop-blur-sm" style="left: 50%;"></div></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">Google</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>API</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Add Color to Line Art Illustration">Add Color to Line Art Illustration</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Input a black and white illustration and generate a colored output.">Input a black and white illustration and generate a colored output.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-template-multistyle-magazine-cover-nanobananapro"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc90="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/google.png" alt="Google" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">Google</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image Edit</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Mockup</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Layout Design</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title="Magazine Cover & Package Design">Magazine Cover & Package Design</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Design the text layout for your magazine cover photo, and explore packaging options for it.">Design the text layout for your magazine cover photo, and explore packaging options for it.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div><div class="flex flex-col overflow-hidden rounded-lg cursor-pointer p-2 transition-colors duration-200 aspect-256/353 hover:bg-base-background" data-testid="template-workflow-api_openai_gpt_image_2_image_edit"><div class="relative p-0 overflow-hidden aspect-square"><div class="relative size-full overflow-hidden rounded-lg"><div data-v-31bcd432="" class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"><div data-v-31bcd432="" class="size-full transform-gpu transition-transform duration-1000 ease-out"><div class="relative flex size-full items-center justify-center overflow-hidden"><div class="p-skeleton p-component absolute inset-0" aria-hidden="true" data-pc-name="skeleton" pc91="" data-pc-section="root" style="position: relative; width: 100%; height: 100%;"></div><!----><!----></div></div></div><div class="pointer-events-none absolute z-10 top-2 left-2"><div data-testid="logo-pill" class="flex items-center gap-1.5 rounded-full bg-black/20 py-1 pr-2" style="opacity: 0.85;"><div class="ml-0.5 flex items-center"><img data-testid="logo-img" src="/templates/logo/openai.png" alt="OpenAI" class="size-6 rounded-full border-2 border-white object-cover" draggable="false"></div><span class="text-sm font-medium text-white">OpenAI</span></div></div><!----></div><!----><!----><!----><!----><!----><div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>Image Edit</span></div><div class="inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold bg-zinc-500/40 text-white/90"><span>API</span></div></div></div><div class="w-full flex-1 h-full"><div class="flex flex-col gap-2 pt-3"><h3 class="m-0 line-clamp-1 text-sm" title=" GPT Image 2: Image Edit"> GPT Image 2: Image Edit</h3><div class="flex justify-between gap-2"><div class="flex-1"><p class="m-0 line-clamp-2 text-sm text-muted" title="Upload a reference image and write a prompt to create campaign ready posters, product shots, and multilingual signage. The model renders clean text and photorealistic outputs suitable for commercial work.">Upload a reference image and write a prompt to create campaign ready posters, product shots, and multilingual signage. The model renders clean text and photorealistic outputs suitable for commercial work.</p></div><!----></div><div class="flex"><span class="text-neutral flex items-center gap-1.5 text-xs font-bold"><i class="icon-[lucide--workflow]"></i> Node graph</span></div></div></div></div></div></div><div class="mt-4 flex h-4 w-full items-center justify-center"><!----></div><div class="mt-6 px-6 text-sm text-muted">Showing 387 of 387 templates</div></div></main></div><!----></div></div></div><!----><span class="p-hidden-accessible p-hidden-focusable" tabindex="0" role="presentation" aria-hidden="true" data-p-hidden-accessible="true" data-p-hidden-focusable="true" data-pc-section="lastfocusableelement"></span></div></div><!----><!----><!----><div></div></body><div id="__fake_cursor" style="position: fixed; top: 0px; left: 0px; width: 28px; height: 28px; pointer-events: none; z-index: 2147483647; transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s, filter 120ms ease 0s; transform: translate(29px, 355px); background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 2 L3 19 L8 14 L11 21 L14 20 L11 13 L18 13 Z' fill='black' stroke='white' stroke-width='1.5'/></svg>") center center / contain no-repeat;"></div></html> |