/* Main-page workflow demonstration. All geometry stays flat like the editor. */
.ams4 .s-workflow-hero{--wf-cycle:20s;display:block;min-width:0;margin:0 0 20px;border:1px solid #343434;border-radius:14px;background-color:#141414;background-image:radial-gradient(#414141 .8px,transparent .8px);background-size:24px 24px;overflow:hidden}
.ams4 .s-workflow-hero[hidden]{display:none!important}
.ams4 .s-workflow-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 22px 12px;background:transparent;border:0}
.ams4 .s-workflow-header h1{margin:0;color:#f0f0f0;font-size:18px;line-height:1.5;font-weight:600;letter-spacing:-.5px}
.ams4 .s-workflow-actions{display:flex;align-items:center;gap:10px;flex:none}
.ams4 .s-workflow-start{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:37px;padding:8px 13px;border:1px solid transparent;border-radius:7px;font:inherit;font-size:11px;font-weight:600;white-space:nowrap;cursor:pointer;transition:filter .2s,border-color .2s}
.ams4 .s-workflow-start:hover{border-color:#ddd;filter:brightness(1.1)}
.ams4 .s-workflow-start svg{width:15px;height:15px}
.ams4 .s-workflow-toggle{display:grid;place-items:center;flex:none;width:29px;height:29px;padding:6px;background:transparent;border:0;border-radius:5px;color:#dedede;cursor:pointer}
.ams4 .s-workflow-toggle:hover{background:#333;color:#fff}
.ams4 .s-workflow-toggle svg{width:14px;height:14px}
.ams4 .s-workflow-toggle:disabled{opacity:.45;cursor:default}
.ams4 .s-workflow-hero button:focus-visible,.ams4 .s-workflow-visual:focus-visible{outline:2px solid #ddd;outline-offset:-3px}
.ams4 .s-workflow-visual{min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#555 #191919;touch-action:pan-x pan-y}
.ams4 .s-workflow-stage{position:relative;width:100%;min-width:960px;height:360px;overflow:hidden;pointer-events:none;transform:none;background:transparent}
.ams4 .s-workflow-node.s-node{position:absolute;display:flex;flex-direction:column;min-width:0;border-radius:12px;background:#222;border:1px solid #494949;box-shadow:0 8px 24px #0005;animation-duration:var(--wf-cycle);animation-timing-function:ease;animation-iteration-count:infinite;animation-fill-mode:both;z-index:2}
.ams4 .s-workflow-stage .s-node-head{flex:none;height:30px;min-height:30px;padding:5px 7px;gap:5px;border-radius:11px 11px 0 0;border-bottom:1px solid #383838;cursor:default}
.ams4 .s-workflow-stage .s-node-icon{display:grid;place-items:center;flex:none;width:17px;height:18px;background:transparent;color:var(--type-color)}
.ams4 .s-workflow-stage .s-node-icon svg{width:15px;height:15px}
.ams4 .s-workflow-stage .s-inline-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f0f0f0;font-size:11px;font-weight:600}
.ams4 .s-workflow-stage .s-node-note{flex:none;display:grid;place-items:center;width:16px;height:18px;padding:0;color:#b9b9b9;background:transparent}
.ams4 .s-workflow-stage .s-node-note svg{width:12px;height:12px}
.ams4 .s-workflow-stage .s-node-media{position:relative;display:block;flex:1;min-height:0;width:calc(100% - 14px);margin:6px 7px 0;border:1px solid #ffffff0f;border-radius:7px;background:#191919;overflow:hidden}
.ams4 .s-workflow-stage .s-node-media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.ams4 .s-workflow-stage .s-node-meta{display:flex;align-items:center;justify-content:space-between;flex:none;gap:4px;min-height:24px;padding:5px 7px;color:#dedede;font-size:8px;line-height:1.5;white-space:nowrap}
.ams4 .s-workflow-stage .s-node-meta small{font-size:8px;color:var(--type-color)}
.ams4 .s-workflow-stage .s-port{width:11px;height:11px;top:50%;margin-top:-5.5px;border:2px solid #222;border-radius:50%;background:var(--type-color)!important;z-index:4}
.ams4 .s-workflow-stage .s-port.in{left:-5.5px}.ams4 .s-workflow-stage .s-port.out{right:-5.5px}
.ams4 .s-workflow-character-one{left:4%;top:5%;width:clamp(96px,10%,122px);height:auto;animation-name:wf-character-one}
.ams4 .s-workflow-character-two{left:16%;top:25%;width:clamp(96px,10%,122px);height:auto;animation-name:wf-character-two}
.ams4 .s-workflow-background{left:30%;top:15%;width:19%;height:43%;animation-name:wf-background}
.ams4 .s-workflow-text{left:26%;top:66%;width:22%;height:30%;animation-name:wf-text}
.ams4 .s-workflow-sound{left:52%;top:74%;width:21%;height:20%;animation-name:wf-sound}
.ams4 .s-workflow-output.s-node{left:55%;top:4%;width:20%;height:46%;border-color:#dedede;box-shadow:0 0 0 2px #ffffff13,0 12px 30px #0007;animation-name:wf-video;z-index:3}
.ams4 .s-workflow-text .s-node-media p{margin:0;padding:6px 8px;white-space:pre-line;font-size:10px;line-height:1.6;color:#dedede}
.ams4 .s-workflow-wave{height:100%;display:flex;align-items:center;gap:7px;padding:3px 9px;color:var(--type-color)}
.ams4 .s-workflow-wave>svg:first-child{width:18px;height:18px;flex:none}
.ams4 .s-workflow-wave>svg:last-child{width:100%;height:25px;min-width:0;fill:currentColor;opacity:.85}
.ams4 .s-workflow-sound .s-node-meta{min-height:21px;padding-top:3px;padding-bottom:4px}
.ams4 .s-workflow-wires{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;z-index:1}
.ams4 .s-workflow-edge{stroke:var(--wire-color,#929292);stroke-width:1.7;stroke-dasharray:1;stroke-dashoffset:1;stroke-opacity:.75;animation-duration:var(--wf-cycle);animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both}
.ams4 .s-workflow-edge-0{animation-name:wf-edge-0}.ams4 .s-workflow-edge-1{animation-name:wf-edge-1}.ams4 .s-workflow-edge-2{animation-name:wf-edge-2}.ams4 .s-workflow-edge-3{animation-name:wf-edge-3}.ams4 .s-workflow-edge-4{animation-name:wf-edge-4}
.ams4 .s-workflow-signals path{stroke:#ededed;stroke-width:2;stroke-dasharray:.035 .965;stroke-dashoffset:1;animation:wf-flow var(--wf-cycle) linear infinite}
.ams4 .s-workflow-frame::after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#0009);pointer-events:none}
.ams4 .s-workflow-result{animation:wf-result var(--wf-cycle) ease infinite}
.ams4 .s-workflow-play{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);display:grid;place-items:center;z-index:1;width:28px;height:28px;border:1px solid #ffffff88;border-radius:50%;background:#0003;animation:wf-reveal var(--wf-cycle) ease infinite}
.ams4 .s-workflow-play svg{width:15px;height:15px;fill:#fff;stroke:#fff}
.ams4 .s-workflow-frame-caption{position:absolute;bottom:10px;left:10px;z-index:1;display:flex;flex-direction:column;gap:3px;color:#fff;animation:wf-reveal var(--wf-cycle) ease infinite}
.ams4 .s-workflow-frame-caption small{font-size:8px;letter-spacing:.12em;color:#eee}
.ams4 .s-workflow-frame-caption strong{font-size:11px;font-weight:600}
.ams4 .s-workflow-output .s-node-meta{position:relative}
.ams4 .s-workflow-done{position:absolute;right:7px;animation:wf-reveal var(--wf-cycle) ease infinite}
.ams4 .s-workflow-wait{animation:wf-wait var(--wf-cycle) ease infinite}
.ams4 .s-workflow-composer{position:absolute;left:78%;top:29%;width:20%;height:65%;z-index:5;display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid #484848;border-radius:11px;background:#222;box-shadow:0 12px 30px #0008;animation:wf-composer var(--wf-cycle) ease infinite}
.ams4 .s-workflow-references{display:flex;align-items:center;gap:4px;flex:none;color:#dedede;font-size:9px;flex-wrap:wrap}
.ams4 .s-workflow-references>small{font-size:8px;margin-right:4px}
.ams4 .s-workflow-references img,.ams4 .s-workflow-text-reference{display:grid;place-items:center;width:22px;height:22px;object-fit:cover;object-position:center 25%;border:1px solid #555;border-radius:4px;background:#303030}
.ams4 .s-workflow-text-reference svg{width:13px;height:13px}
.ams4 .s-workflow-prompt{display:flex;flex-direction:column;flex:1;min-height:0;border:1px solid #555;border-radius:8px;background:#1b1b1b;overflow:hidden}
.ams4 .s-workflow-prompt-head{display:flex;align-items:center;gap:5px;padding:9px 8px 0;flex-wrap:wrap;flex:none;font-size:9px;color:#dedede}
.ams4 .s-workflow-prompt-head strong{font-size:10px;font-weight:600;color:#f0f0f0}
.ams4 .s-workflow-prompt-head>span{font-size:8px}
.ams4 .s-workflow-prompt-tools{display:flex;gap:8px;padding:7px 8px 0;flex:none;color:#dedede;font-size:8px}
.ams4 .s-workflow-typing{flex:1;min-height:70px;padding:10px 8px;font-size:11px;line-height:1.8;color:#dedede;overflow:hidden}
.ams4 .s-workflow-typing>span{display:block;max-width:100%;clip-path:inset(0 100% 0 0)}
.ams4 .s-workflow-line-one{animation:wf-type-one var(--wf-cycle) steps(24,end) infinite}
.ams4 .s-workflow-line-two{animation:wf-type-two var(--wf-cycle) steps(22,end) infinite}
.ams4 .s-workflow-options{display:flex;align-items:center;gap:4px;padding:6px;border-top:1px solid #383838;font-size:8px;color:#dedede;flex:none;flex-wrap:wrap}
.ams4 .s-workflow-options>span:first-child{max-width:100%;flex-basis:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ams4 .s-workflow-generate{margin-left:auto;padding:4px 7px;border:1px solid #656565;border-radius:5px;background:#353535;color:#f0f0f0;animation:wf-generate var(--wf-cycle) ease infinite}
.ams4 .s-workflow-canvas-zoom{position:absolute;left:12px;bottom:10px;z-index:6;font-size:9px;letter-spacing:.06em;color:#dedede;background:#252525;padding:5px 8px;border:1px solid #444;border-radius:6px}
.ams4 .s-workflow-paused *{animation-play-state:paused!important}
.ams4 .s-workflow-static .s-workflow-stage *{animation:none!important;transform:none}
.ams4 .s-workflow-static .s-workflow-edge{stroke-dashoffset:0}
.ams4 .s-workflow-static .s-workflow-signals,.ams4 .s-workflow-static .s-workflow-wait{opacity:0}
.ams4 .s-workflow-static .s-workflow-typing>span{clip-path:none}
.ams4 .s-workflow-static .s-workflow-play{transform:translate(-50%,-50%)}
@keyframes wf-character-one{0%{opacity:0;transform:translateY(8px)}3.333333%,100%{opacity:1;transform:none}}
@keyframes wf-character-two{0%,2.222222%{opacity:0;transform:translateY(8px)}5.555555%,100%{opacity:1;transform:none}}
@keyframes wf-background{0%,6.666667%{opacity:0;transform:translateY(8px)}10%,100%{opacity:1;transform:none}}
@keyframes wf-text{0%,10.555556%{opacity:0;transform:translateY(8px)}12.777778%,100%{opacity:1;transform:none}}
@keyframes wf-sound{0%,12.777778%{opacity:0;transform:translateY(8px)}15%,100%{opacity:1;transform:none}}
@keyframes wf-video{0%,15.555556%{opacity:0;transform:translateY(8px)}18.888889%,100%{opacity:1;transform:none}}
@keyframes wf-edge-0{0%,19.444444%{stroke-dashoffset:1;opacity:0}20%{opacity:1}22.222223%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes wf-edge-1{0%,22.222223%{stroke-dashoffset:1;opacity:0}22.777777%{opacity:1}25%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes wf-edge-2{0%,25%{stroke-dashoffset:1;opacity:0}25.555556%{opacity:1}27.777778%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes wf-edge-3{0%,27.777778%{stroke-dashoffset:1;opacity:0}28.333333%{opacity:1}30.555556%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes wf-edge-4{0%,30.555556%{stroke-dashoffset:1;opacity:0}31.111111%{opacity:1}33.333333%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes wf-composer{0%,34.444444%{opacity:0;transform:translateX(8px)}37.222223%,100%{opacity:1;transform:none}}
@keyframes wf-type-one{0%,37.777777%{clip-path:inset(0 100% 0 0)}41.666667%,100%{clip-path:inset(0)}}
@keyframes wf-type-two{0%,41.666667%{clip-path:inset(0 100% 0 0)}45%,100%{clip-path:inset(0)}}
@keyframes wf-generate{0%,45%{background:#353535;border-color:#656565}46.111111%,47.777778%{background:#555;border-color:#ddd}50%,100%{background:#353535;border-color:#656565}}
@keyframes wf-result{0%,47.222222%{opacity:0;transform:scale(1)}50%,100%{opacity:1;transform:scale(1)}}
@keyframes wf-reveal{0%,47.777778%{opacity:0}50%,100%{opacity:1}}
@keyframes wf-wait{0%,47.777778%{opacity:1}50%,100%{opacity:0}}
@keyframes wf-flow{0%,33.888889%{stroke-dashoffset:1;opacity:0}34.444444%{stroke-dashoffset:1;opacity:1}50%,100%{stroke-dashoffset:0;opacity:0}}
@media(max-width:1100px){.ams4 .s-workflow-header{padding:15px 18px}.ams4 .s-workflow-header h1{font-size:18px}.ams4 .s-workflow-stage{height:340px}}
@media(max-width:700px){.ams4 .s-workflow-header{gap:12px;padding:15px;flex-wrap:wrap}.ams4 .s-workflow-header h1{font-size:17px;letter-spacing:-.5px;flex-basis:100%}.ams4 .s-workflow-actions{justify-content:space-between;width:100%}.ams4 .s-workflow-stage{min-width:960px;height:330px}.ams4 .s-workflow-composer{top:24%;height:71%}.ams4 .s-workflow-start{min-height:34px;font-size:10px}.ams4 .s-workflow-hero{border-radius:11px}.ams4 .s-workflow-typing{font-size:9.5px;line-height:1.6;padding:6px 8px}.ams4 .s-workflow-header h1{line-height:1.5}}
@media(prefers-reduced-motion:reduce){.ams4 .s-workflow-stage *{animation:none!important;transform:none}.ams4 .s-workflow-edge{stroke-dashoffset:0}.ams4 .s-workflow-signals,.ams4 .s-workflow-wait{opacity:0}.ams4 .s-workflow-typing>span{clip-path:none}.ams4 .s-workflow-play{transform:translate(-50%,-50%)}}

/* Secondary generation controls sit behind their nodes; video remains the focus. */
.ams4 .s-workflow-ghost{position:absolute;z-index:0;pointer-events:none;animation-duration:var(--wf-cycle);animation-timing-function:ease;animation-iteration-count:infinite;animation-fill-mode:both}
.ams4 .s-workflow-ghost-panel{display:flex;flex-direction:column;gap:0;width:100%;height:100%;min-height:70px;border:1px solid #737373;border-radius:9px;background:#292929;box-shadow:0 5px 18px #0005;opacity:.38;transform:translate(16%,-12px);overflow:hidden}
.ams4 .s-workflow-ghost-head{display:flex;align-items:center;gap:5px;padding:6px 7px;border-bottom:1px solid #646464;flex:none;color:#ececec;font-size:8px;white-space:nowrap}
.ams4 .s-workflow-ghost-head svg{width:11px;height:11px;flex:none}
.ams4 .s-workflow-ghost-head strong{font-size:9px;font-weight:600}
.ams4 .s-workflow-ghost-head>span{margin-left:auto;font-size:8px;color:#dedede}
.ams4 .s-workflow-ghost-panel p{flex:1;min-height:0;margin:0;padding:7px 8px;color:#dedede;font-size:9px;line-height:1.6;overflow:hidden}
.ams4 .s-workflow-ghost-options{display:flex;align-items:center;gap:6px;padding:5px 7px;border-top:1px solid #565656;color:#dedede;font-size:8px;white-space:nowrap;flex:none}
.ams4 .s-workflow-ghost-options>span:last-child{margin-left:auto;padding:2px 5px;border:1px solid #777;border-radius:4px}
.ams4 .s-workflow-static .s-workflow-ghost-panel{transform:translate(16%,-12px)}
@media(prefers-reduced-motion:reduce){.ams4 .s-workflow-ghost-panel{transform:translate(16%,-12px)}}

/* Portrait character previews and tightly tucked prompt silhouettes. */
.ams4 .s-workflow-stage .s-workflow-node:is(.s-workflow-character-one,.s-workflow-character-two) .s-node-media{flex:none;aspect-ratio:9/16;height:auto;border:0}
.ams4 .s-workflow-ghost-space{flex:1;min-height:0}
.ams4 .s-workflow-ghost-head{justify-content:center;padding:1px 3px;border-bottom:0}
.ams4 .s-workflow-ghost-head strong{font-size:8px;line-height:10px}
.ams4 .s-workflow-ghost-options{justify-content:flex-end;padding:3px;border-top:0}
.ams4 .s-workflow-ghost-options>span:last-child{font-size:7px;line-height:12px;padding:1px 3px}
.ams4 .s-workflow-ghost:is(.s-workflow-character-one,.s-workflow-character-two) .s-workflow-ghost-panel{width:120%;transform:translate(10%,-12px)}
.ams4 .s-workflow-static .s-workflow-ghost:is(.s-workflow-character-one,.s-workflow-character-two) .s-workflow-ghost-panel{transform:translate(10%,-12px)}
@media(prefers-reduced-motion:reduce){.ams4 .s-workflow-ghost:is(.s-workflow-character-one,.s-workflow-character-two) .s-workflow-ghost-panel{transform:translate(10%,-12px)}}