/* The recovered node canvas inherits the Cosmic palette; artwork keeps its own color. */
.creative-workflow{position:relative;isolation:isolate;overflow:hidden;max-width:none;margin-inline:0;scroll-margin-top:-110px;min-height:860px;min-height:min(100svh,1050px);padding-top:116px;padding-bottom:80px;display:flex;flex-direction:column;justify-content:center;background:var(--ground);--vf-line:#9bbddd;--vf-light:#cfdef0;--hub-light:.5}
.creative-workflow::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--ground),#0a0a0c30 28%,#0a0a0c38 68%,var(--ground)),linear-gradient(90deg,#0a0a0c9c,#0a0a0c16 68%,#0a0a0c58)}
.creative-workflow .vf-backdrop-film{position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.38) brightness(.58);opacity:.42;pointer-events:none;transition:opacity .5s ease}
.creative-workflow:has(.vf-backdrop-film[hidden])::before{content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;background:var(--vf-backdrop-poster,none) center/cover;filter:saturate(.38) brightness(.58);opacity:.42}
.creative-workflow video[hidden]{display:none}
.creative-workflow .vf-video{background-position:center;background-size:contain;background-repeat:no-repeat}
@media(prefers-reduced-motion:reduce){.creative-workflow:has(.vf-backdrop-film[hidden])::before{display:none}}
.creative-workflow .vf-layout{width:100%;max-width:1520px;margin-inline:auto;display:grid;grid-template-columns:minmax(270px,.72fr) minmax(0,1.65fr);gap:42px;align-items:center}
.creative-workflow .vf-heading h2{font-weight:400;font-size:clamp(40px,4.2vw,74px);line-height:1.17;letter-spacing:-.035em;text-wrap:wrap}
.creative-workflow .vf-heading h2 em{font-style:normal;color:#bdd1ea}
.creative-workflow .vf-intro{margin-top:26px;font-size:14px;line-height:1.9;color:#c0c4cf}
.creative-workflow .vf-case-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-width:320px;margin-top:32px;padding:6px;background:#15171dc9;border:1px solid #ffffff1a;border-radius:18px}
.creative-workflow .vf-case-picker button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0;padding:11px 5px 10px;border:1px solid transparent;border-radius:12px;font-size:11px;color:#b6bdc9;transition:background .2s,border-color .2s,color .2s}
.creative-workflow .vf-case-picker img{width:46px;height:46px;border-radius:8px;object-fit:cover;background:#d9d9dc}
.creative-workflow .vf-case-picker button[aria-pressed=true]{background:#303846;border-color:#62768e;color:var(--ink)}
.creative-workflow .vf-case-picker button:hover{background:#262d38;color:var(--ink)}
.creative-workflow .vf-case-picker button[data-pending]{border-color:var(--accent)}
.creative-workflow .vf-status{min-height:20px;font-size:11px;color:#bccbe0;margin-top:12px;max-width:320px}
.creative-workflow .vf-canvas-wrap{min-width:0}
.creative-workflow .vf-stage{position:relative;isolation:isolate;overflow:hidden;width:100%;height:clamp(470px,38vw,590px);background:#101218ed;border:1px solid #818fa02b;border-radius:24px}
.creative-workflow .vf-texture{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle,#a8bad0 .8px,transparent 1.2px);background-size:19px 19px;opacity:.16;pointer-events:none}
.creative-workflow .vf-world{position:absolute;inset:0;transform-origin:53% 48%}
.creative-workflow .vf-lines{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;overflow:visible}
.creative-workflow .vf-line{stroke:var(--vf-line);stroke-opacity:.38;stroke-width:1;fill:none}
.creative-workflow .vf-port{fill:#d1dfef;opacity:.7}
.creative-workflow .vf-travel{fill:none;stroke-linecap:round;pointer-events:none}
.creative-workflow .vf-travel-tail{stroke:#9bbddd;stroke-width:4;stroke-dasharray:24 120;opacity:.13}
.creative-workflow .vf-travel-core{stroke:#b8cde6;stroke-width:1.6;stroke-dasharray:24 120;opacity:.78}
.creative-workflow .vf-travel-head{stroke:#edf4fc;stroke-width:2;stroke-dasharray:3 141;opacity:.95}
.creative-workflow .vf-source,.creative-workflow .vf-process,.creative-workflow .vf-media{position:absolute}
.creative-workflow .vf-source{left:5%;top:37%;width:19%;text-align:left;transform:rotate(-2deg)}
.creative-workflow .vf-source>img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:13px}
.creative-workflow .vf-input-type{display:flex;gap:7px;margin:0 0 12px 2px;font-size:10px;white-space:nowrap;color:#c3c8d2;transform:rotate(2deg)}
.creative-workflow .vf-input-type>span{color:#7d8796}
.creative-workflow .vf-process{left:29%;top:38%;width:19%;text-align:center;pointer-events:none}
.creative-workflow .vf-junction{height:84px;position:relative;margin:0 auto 5px}
.creative-workflow .vf-junction i{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#d1dfef;transform:translate(-50%,-50%);opacity:calc(.5 + var(--hub-light)*.5)}
.creative-workflow .vf-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.creative-workflow .vf-steps li{font-size:11px;line-height:1.4;color:#9fa9ba;white-space:nowrap;transition:color .3s}
.creative-workflow .vf-steps .is-current{color:#f4f4f6}
.creative-workflow .vf-media{padding:0;border:0;border-radius:16px;overflow:hidden;background:#101218;transform-origin:center;isolation:isolate;box-shadow:0 18px 32px -22px #000a}
.creative-workflow .vf-media::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;border:1px solid #d5e2f220;pointer-events:none;transition:border-color .3s}
.creative-workflow .vf-media:hover::after,.creative-workflow .vf-media.is-focused::after{border-color:#c3d8ed9c}
.creative-workflow .vf-media>img,.creative-workflow .vf-film{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.creative-workflow .vf-main{left:51%;top:10%;width:26%;aspect-ratio:1.12;z-index:2}
.creative-workflow .vf-detail{left:80%;top:13%;width:14%;aspect-ratio:1.1;z-index:2}
.creative-workflow .vf-portrait{left:49%;top:54%;width:19%;aspect-ratio:3/4;z-index:3;transform:rotate(-2deg)}
.creative-workflow .vf-video{left:76%;top:42%;width:18%;aspect-ratio:9/16;z-index:2}
.creative-workflow .vf-open{position:absolute;right:10px;bottom:10px;opacity:0;transition:opacity .2s;color:#fff}
.creative-workflow .vf-media:hover .vf-open,.creative-workflow .vf-media:focus-visible .vf-open{opacity:1}
.creative-workflow .vf-open svg,.creative-workflow .vf-video-open svg,.creative-workflow .vf-close svg{width:20px;height:20px;stroke-width:1.5}
.creative-workflow .vf-video-open{position:absolute;bottom:10px;left:10px;z-index:3;width:34px;height:34px;display:grid;place-items:center;border:1px solid #d5e2f252;border-radius:50%;background:#0a0e17b8;color:#eef4fc}
.creative-workflow .vf-video-open svg{width:16px;height:16px;fill:none;stroke:currentColor}
.creative-workflow .vf-caption{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px;font-size:11px;color:#adb5c3}
.creative-workflow .vf-motion{white-space:nowrap;padding:6px 0;border-bottom:1px solid #8897aa7a;min-width:56px;color:#d0dbea}
.creative-workflow .vf-disclosure{width:100%;max-width:1520px;margin:38px auto 0;text-align:right;font-size:11px;line-height:1.8;color:#929aab}
.creative-workflow button:focus-visible,.creative-workflow .vf-stage:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.creative-workflow .vf-stage .vf-interactive{transform-origin:center;user-select:none;-webkit-user-select:none}
.creative-workflow .vf-stage .vf-interactive img{-webkit-user-drag:none}
.creative-workflow .vf-stage .vf-interactive.is-moving{will-change:transform}
.creative-workflow .vf-stage .vf-interactive.is-focused{z-index:6}
.creative-workflow .vf-stage .vf-interactive.is-dragging{z-index:8;cursor:grabbing}
.creative-workflow .vf-stage.is-dragging,.creative-workflow .vf-stage.is-dragging *{cursor:grabbing!important}
.creative-workflow[data-interacting=true] .vf-lines g:not(.is-connected){opacity:.45}
.creative-workflow .vf-lines g{transition:opacity .3s}
.creative-workflow.vf-switching .vf-world{opacity:.2;transform:translateY(5px)}
.creative-workflow .vf-world{transition:opacity .2s ease,transform .2s ease}
.creative-workflow[data-case=fragrance] .vf-main{aspect-ratio:3/4;width:22%;top:8%}
.creative-workflow[data-case=fragrance] .vf-portrait{width:23%;aspect-ratio:4/3;top:62%;left:47%}

.creative-workflow[data-case=running] .vf-main{left:50%;width:29%;aspect-ratio:16/10}
.creative-workflow[data-case=running] .vf-portrait{left:49%;top:59%;width:21%;aspect-ratio:4/3}
.creative-workflow[data-case=running] .vf-video{left:72%;top:56%;width:23%;aspect-ratio:16/9}
.creative-workflow[data-case=running] .vf-film,.creative-workflow[data-case=powerbank] .vf-film{object-fit:contain}
.creative-workflow ::selection{background:#9bbddd50;color:#fff}
@media(hover:hover) and (pointer:fine){.creative-workflow .vf-interactive{cursor:grab}}
@media(min-width:1700px){.creative-workflow .vf-layout{gap:64px}.creative-workflow .vf-heading h2{font-size:72px}}
@media(max-width:1100px){.creative-workflow{min-height:0;padding-top:100px;padding-bottom:74px}.creative-workflow .vf-layout{grid-template-columns:250px minmax(0,1fr);gap:24px}.creative-workflow .vf-heading h2{font-size:42px}.creative-workflow .vf-stage{height:460px}.creative-workflow .vf-junction{height:64px}.creative-workflow .vf-steps li{font-size:10px}.creative-workflow .vf-case-picker img{width:40px;height:40px}}
@media(max-width:820px){.creative-workflow .vf-layout{grid-template-columns:1fr;gap:24px}.creative-workflow .vf-heading{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-items:end}.creative-workflow .vf-heading h2{grid-row:1/4}.creative-workflow .vf-intro{margin-top:0;font-size:12px}.creative-workflow .vf-case-picker{margin-top:20px}.creative-workflow .vf-status{margin-top:6px;min-height:14px}.creative-workflow .vf-stage{height:470px}.creative-workflow .vf-disclosure{text-align:left}.creative-workflow .vf-caption{font-size:10px}}
@media(max-width:600px){.creative-workflow{padding-top:70px;padding-bottom:60px}.creative-workflow .vf-heading{display:block}.creative-workflow .vf-heading h2{font-size:42px}.creative-workflow .vf-intro{margin-top:20px}.creative-workflow .vf-case-picker{margin-top:24px}.creative-workflow .vf-stage{height:440px;border-radius:20px}.creative-workflow .vf-source{left:5%;top:26%;width:26%}.creative-workflow .vf-process{left:36%;top:32%;width:26%}.creative-workflow .vf-junction{height:60px}.creative-workflow .vf-input-type{font-size:8px;gap:4px}.creative-workflow .vf-steps li{font-size:9px}.creative-workflow .vf-main{left:67%;top:7%;width:28%;aspect-ratio:.94}.creative-workflow .vf-detail{left:6%;top:70%;width:23%;aspect-ratio:1.05}.creative-workflow .vf-portrait{left:35%;top:65%;width:25%;aspect-ratio:3/4}.creative-workflow .vf-video{left:68%;top:50%;width:27%;aspect-ratio:9/16}.creative-workflow .vf-media{border-radius:12px}.creative-workflow[data-case=fragrance] .vf-main{left:67%;top:5%;width:28%}.creative-workflow[data-case=fragrance] .vf-portrait{left:35%;top:65%;width:25%;aspect-ratio:3/4}.creative-workflow[data-case=running] .vf-main{left:65%;top:7%;width:30%;aspect-ratio:1}.creative-workflow[data-case=running] .vf-portrait{left:36%;top:65%;width:27%;aspect-ratio:4/3}.creative-workflow[data-case=running] .vf-video{left:54%;top:83%;width:41%;aspect-ratio:16/9}.creative-workflow .vf-caption{align-items:start}.creative-workflow .vf-disclosure{font-size:10px;margin-top:28px}}
@media(prefers-reduced-motion:reduce){.creative-workflow .vf-travel,.creative-workflow .vf-backdrop-film,.creative-workflow .vf-film{display:none}.creative-workflow .vf-stage .vf-interactive{will-change:auto}.creative-workflow .vf-world,.creative-workflow .vf-lines g,.creative-workflow .vf-steps li{transition:none}.creative-workflow .vf-video{background:center/cover no-repeat}}

/* Keep the canvas self-explanatory without a permanent help paragraph. */
.creative-workflow .vf-case-picker{margin-top:36px}
.creative-workflow .vf-case-picker button{font-size:13px;gap:10px}
.creative-workflow .vf-input-type{font-size:13px;line-height:1.5;margin-bottom:10px}
.creative-workflow .vf-steps li{font-size:13px;line-height:1.6}
.creative-workflow .vf-caption{margin-top:16px;gap:16px;align-items:center}
.creative-workflow .vf-caption .vf-disclosure{width:auto;max-width:none;margin:0;text-align:left;font-size:13px;color:#adb5c3}
.creative-workflow .vf-motion{width:44px;min-width:44px;height:44px;padding:0;border:1px solid #ffffff30;border-radius:50%}
.creative-workflow .vf-status:not(.sr-only){font-size:14px;line-height:1.7;margin-top:16px;color:#f3bfaa}
@media(min-width:601px) and (max-width:820px){.creative-workflow .vf-heading h2{grid-row:auto}.creative-workflow .vf-case-picker{margin-top:0}.creative-workflow .vf-status{grid-column:2}}
@media(max-width:600px){.creative-workflow .vf-case-picker{margin-top:28px}.creative-workflow .vf-input-type{font-size:12px}.creative-workflow .vf-steps li{font-size:12px}}

/* Product workflow refinement */
.creative-workflow .vf-heading{font-family:"Studio Thin","Studio Light","Microsoft YaHei",sans-serif;font-weight:100}
.creative-workflow .vf-heading h2{font-weight:100;color:#f4f4f6;letter-spacing:-.025em}
.creative-workflow .vf-case-picker button{font-family:"Studio Light","Microsoft YaHei",sans-serif;font-weight:300}
.creative-workflow .vf-motion{display:none}
.creative-workflow[data-case=powerbank] .vf-main{aspect-ratio:3/2}
.creative-workflow[data-case=powerbank] .vf-detail{left:77%;width:20.16%;aspect-ratio:16/9}
.creative-workflow[data-case=powerbank] .vf-portrait{left:51.28%;width:14.44%}
.creative-workflow[data-case=powerbank] .vf-source>img{object-fit:contain;background:#fff}

/* Landscape power-bank film with case-specific node sizing. */
.creative-workflow[data-case=powerbank] .vf-video{left:69%;top:48%;width:28.512%;aspect-ratio:16/9;background-size:contain;background-color:#08090c}
@media(max-width:600px){.creative-workflow[data-case=powerbank] .vf-detail{left:3.7%;width:33.12%}.creative-workflow[data-case=powerbank] .vf-portrait{left:39%;width:19%}.creative-workflow[data-case=powerbank] .vf-video{left:54%;top:53%;width:42.768%}}
@media(max-width:600px){.creative-workflow[data-case=powerbank] .vf-process{left:32%;width:24%}}
@media(max-width:600px){.creative-workflow[data-case=powerbank] .vf-stage{height:500px}.creative-workflow[data-case=powerbank] .vf-source{top:12%}.creative-workflow[data-case=powerbank] .vf-process{left:37%;top:27%;width:24%}.creative-workflow[data-case=powerbank] .vf-video{top:58%}.creative-workflow[data-case=powerbank] .vf-portrait{top:78%}.creative-workflow[data-case=powerbank] .vf-detail{top:78%}}

/* VESKORA supplied assets retain their native framing on all screens. */
.creative-workflow[data-case=fragrance] .vf-detail{aspect-ratio:1}
.creative-workflow[data-case=fragrance] .vf-portrait{aspect-ratio:4/3}
.creative-workflow[data-case=fragrance] .vf-film{object-fit:contain}

.creative-workflow[data-case=fragrance] .vf-video{left:66%;top:48%;width:29%;aspect-ratio:16/9}
@media(max-width:600px){.creative-workflow[data-case=fragrance] .vf-video{left:54%;top:43%;width:41.76%;aspect-ratio:16/9}}
@media(max-width:600px){.creative-workflow[data-case=fragrance] .vf-process{top:12%}}