.workflow-demo-section {
  --workflow-accent: #ff5a00;
  --workflow-ink: #111;
  --workflow-muted: rgba(17,17,17,.5);
  position: relative;
  overflow: hidden;
  padding: 152px 0;
  background: #fff;
  color: var(--workflow-ink);
  font-family: "Geist", "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.workflow-demo-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1180px, calc(100% - 48px));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent);
}

.workflow-demo-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 5%;
  left: 50%;
  width: 44rem;
  height: 30rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(255,90,0,.055);
  filter: blur(150px);
  pointer-events: none;
}

.workflow-demo-container {
  position: relative;
  z-index: 1;
  width: min(1260px, calc(100% - 48px));
  margin-inline: auto;
}

.workflow-demo-heading {
  max-width: 860px;
  margin: 0 auto 66px;
  text-align: center;
}

.workflow-demo-heading > p {
  margin: 0 0 22px;
  color: #e64c18;
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.workflow-demo-heading h2 {
  margin: 0;
  color: #111;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(48px, 5.4vw, 76px);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.045em;
  text-transform: none;
  text-wrap: balance;
}

.workflow-demo-heading h2 em {
  color: var(--workflow-accent);
  font-weight: 600;
}

.workflow-demo-heading > span {
  display: block;
  margin-top: 25px;
  color: rgba(0,0,0,.56);
  font-size: 17px;
  line-height: 1.55;
}

.workflow-app {
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.075);
  border-radius: 30px;
  background: rgba(250,250,250,.96);
  box-shadow: 0 30px 100px rgba(0,0,0,.085), inset 0 1px rgba(255,255,255,.9);
}

.workflow-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(0,0,0,.065);
  background: rgba(255,255,255,.88);
}

.workflow-brand,
.workflow-brand span {
  display: flex;
  align-items: center;
}

.workflow-brand { gap: 17px; }
.workflow-brand strong { font-size: 12px; font-weight: 790; letter-spacing: .14em; }
.workflow-brand span { gap: 7px; color: rgba(0,0,0,.42); font-size: 9px; font-weight: 690; letter-spacing: .13em; }
.workflow-brand span i { width: 6px; height: 6px; border-radius: 50%; background: var(--workflow-accent); box-shadow: 0 0 0 4px rgba(255,90,0,.08); }

.workflow-zoom {
  padding: 7px 10px;
  border: 1px solid rgba(0,0,0,.065);
  border-radius: 8px;
  color: rgba(0,0,0,.42);
  background: #fafafa;
  font-size: 10px;
  font-weight: 680;
  letter-spacing: .05em;
}

.workflow-canvas {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 220px) minmax(260px, 1fr) 106px minmax(270px, 328px);
  grid-template-rows: 1fr 1fr;
  align-items: center;
  gap: 28px 44px;
  min-height: 690px;
  padding: 45px;
  isolation: isolate;
  background-color: #f8f8f8;
  background-image: radial-gradient(rgba(0,0,0,.075) .8px, transparent .8px);
  background-size: 20px 20px;
}

.workflow-connections {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.workflow-connection {
  fill: none;
  stroke: rgba(0,0,0,.16);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.workflow-energy {
  fill: var(--workflow-accent);
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255,90,0,.3));
}

.workflow-node {
  position: relative;
  z-index: 2;
  min-width: 0;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  outline: none;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 36px rgba(0,0,0,.065), inset 0 1px rgba(255,255,255,.98);
  opacity: 0;
  transform: translateY(16px) scale(.985);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
  cursor: pointer;
}

.workflow-node:hover { transform: translateY(-3px); border-color: rgba(0,0,0,.14); box-shadow: 0 18px 48px rgba(0,0,0,.09), inset 0 1px #fff; }
.workflow-node:focus-visible,
.workflow-node.is-selected { border-color: rgba(255,90,0,.72); box-shadow: 0 0 0 3px rgba(255,90,0,.08), 0 18px 48px rgba(0,0,0,.09); }

.workflow-node-top,
.workflow-node-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.workflow-node-top { padding: 13px 14px 11px; border-bottom: 1px solid rgba(0,0,0,.065); }
.workflow-node-top span,
.workflow-node-top small,
.workflow-node-footer span {
  font-size: 8px;
  font-weight: 720;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.workflow-node-top span { color: rgba(0,0,0,.58); }
.workflow-node-top small { color: rgba(0,0,0,.3); }
.workflow-node-footer { padding: 12px 14px 14px; }
.workflow-node-footer strong { font-size: 12px; font-weight: 780; letter-spacing: -.01em; }
.workflow-node-footer span { color: rgba(0,0,0,.34); text-align: right; }

.workflow-character { grid-column: 1; grid-row: 1; align-self: end; }
.workflow-character-media { aspect-ratio: 1 / .88; overflow: hidden; margin: 12px 12px 0; border-radius: 12px; background: #eee; }
.workflow-character-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

.workflow-plus {
  position: absolute;
  z-index: 3;
  left: 155px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 50%;
  color: var(--workflow-accent);
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  transform: translate(-50%, -50%);
  font-size: 17px;
  font-weight: 580;
}

.workflow-references { grid-column: 1; grid-row: 2; align-self: start; }
.workflow-reference-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 5px; margin: 12px 12px 0; }
.workflow-reference { position: relative; min-width: 0; margin: 0; overflow: hidden; border-radius: 10px; background: #e8e8e8; }
.workflow-reference img { display: block; width: 100%; height: 100%; min-height: 112px; object-fit: cover; }
.workflow-reference-1 img { object-position: center; }
.workflow-reference-2 img { object-position: center; }
.workflow-reference figcaption { position: absolute; right: 6px; bottom: 6px; padding: 4px 6px; border-radius: 5px; color: #fff; background: rgba(0,0,0,.54); backdrop-filter: blur(7px); font-size: 7px; font-weight: 720; letter-spacing: .1em; }

.workflow-prompt { grid-column: 2; grid-row: 1 / 3; align-self: center; padding-bottom: 14px; }
.workflow-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 15px 15px 0; }
.workflow-chips span { padding: 6px 8px; border: 1px solid rgba(255,90,0,.13); border-radius: 7px; color: #dc4b13; background: rgba(255,90,0,.055); font-size: 8px; font-weight: 720; letter-spacing: .07em; }
.workflow-prompt-copy { position: relative; min-height: 142px; margin: 12px 15px; padding: 15px; overflow: hidden; border: 1px solid rgba(0,0,0,.07); border-radius: 12px; background: #fafafa; }
.workflow-prompt-copy::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 52px; background: linear-gradient(transparent, #fafafa 74%); pointer-events: none; }
.workflow-prompt-copy p { margin: 0; color: rgba(0,0,0,.64); font-size: 12px; line-height: 1.65; }
.workflow-generate { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 30px); min-height: 43px; margin: 0 15px; border: 0; border-radius: 10px; color: #fff; background: #111; box-shadow: 0 8px 24px rgba(0,0,0,.15); font: inherit; font-size: 9px; font-weight: 760; letter-spacing: .13em; }
.workflow-generate i { width: 6px; height: 6px; border-radius: 50%; background: var(--workflow-accent); box-shadow: 0 0 0 4px rgba(255,90,0,.12); }

.workflow-ai { grid-column: 3; grid-row: 1 / 3; display: grid; justify-items: center; align-self: center; padding: 18px 12px; text-align: center; }
.workflow-ai > span { color: rgba(0,0,0,.3); font-size: 8px; font-weight: 720; letter-spacing: .13em; }
.workflow-ai-mark { display: flex; align-items: center; justify-content: center; gap: 4px; width: 42px; height: 42px; margin: 12px 0 10px; border: 1px solid rgba(255,90,0,.16); border-radius: 12px; background: rgba(255,90,0,.055); }
.workflow-ai-mark i { width: 4px; height: 4px; border-radius: 50%; background: var(--workflow-accent); }
.workflow-ai strong { font-size: 8px; font-weight: 760; letter-spacing: .1em; }
.workflow-ai-progress { width: 58px; height: 3px; margin-top: 13px; overflow: hidden; border-radius: 999px; background: rgba(0,0,0,.08); }
.workflow-ai-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--workflow-accent); }

.workflow-result { grid-column: 4; grid-row: 1 / 3; align-self: center; overflow: hidden; }
.workflow-result-media { position: relative; aspect-ratio: 9 / 16; overflow: hidden; margin: 12px 12px 0; border-radius: 14px; background: #e9e9e9; }
.workflow-result-media video { display: block; width: 100%; height: 100%; object-fit: contain; background: #111; }
.workflow-result-media > span { position: absolute; top: 10px; left: 10px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; color: rgba(255,255,255,.88); background: rgba(0,0,0,.5); backdrop-filter: blur(9px); font-size: 7px; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }
.workflow-result-media::after { content: ""; position: absolute; inset: 0; transform: translateX(-130%) skewX(-14deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); pointer-events: none; }

.workflow-port { position: absolute; z-index: 4; display: block; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--workflow-accent); box-shadow: 0 0 0 1px rgba(255,90,0,.2), 0 0 10px rgba(255,90,0,.18); }
.workflow-port-out { top: 50%; right: -6px; transform: translateY(-50%); }
.workflow-port-in { top: 50%; left: -6px; transform: translateY(-50%); }
.workflow-prompt .workflow-port-in-top { top: 35%; }
.workflow-prompt .workflow-port-in-bottom { top: 65%; }

.workflow-demo-note { max-width: 760px; margin: 33px auto 0; color: rgba(0,0,0,.5); font-size: 15px; line-height: 1.65; text-align: center; }
.workflow-demo-note strong { color: #111; font-weight: 710; }

.workflow-demo-section.is-running .workflow-node,
.workflow-demo-section.is-complete .workflow-node { animation: workflow-node-in .72s cubic-bezier(.22,1,.36,1) forwards; }
.workflow-demo-section.is-running .workflow-character { animation-delay: .08s; }
.workflow-demo-section.is-running .workflow-references { animation-delay: .26s; }
.workflow-demo-section.is-running .workflow-prompt { animation-delay: 1.17s; }
.workflow-demo-section.is-running .workflow-ai { animation-delay: 2.02s; }
.workflow-demo-section.is-running .workflow-result { animation: workflow-result-in .82s cubic-bezier(.22,1,.36,1) 2.77s forwards; }
.workflow-demo-section.is-running .workflow-connection { animation: workflow-line-in .72s cubic-bezier(.22,1,.36,1) forwards; }
.workflow-demo-section.is-running .workflow-connection-1 { animation-delay: .48s; }
.workflow-demo-section.is-running .workflow-connection-2 { animation-delay: .68s; }
.workflow-demo-section.is-running .workflow-connection-3 { animation-delay: 1.47s; }
.workflow-demo-section.is-running .workflow-connection-4 { animation-delay: 2.3s; }
.workflow-demo-section.is-running .workflow-energy { animation: workflow-energy-show .78s ease forwards; }
.workflow-demo-section.is-running .workflow-energy-1 { animation-delay: .58s; }
.workflow-demo-section.is-running .workflow-energy-2 { animation-delay: .79s; }
.workflow-demo-section.is-running .workflow-energy-3 { animation-delay: 1.57s; }
.workflow-demo-section.is-running .workflow-energy-4 { animation-delay: 2.4s; }
.workflow-demo-section.is-running .workflow-generate { animation: workflow-generate-click .46s ease 1.72s both; }
.workflow-demo-section.is-running .workflow-ai-mark i { animation: workflow-dot .75s ease-in-out 2.08s 2 alternate; }
.workflow-demo-section.is-running .workflow-ai-mark i:nth-child(2) { animation-delay: 2.18s; }
.workflow-demo-section.is-running .workflow-ai-mark i:nth-child(3) { animation-delay: 2.28s; }
.workflow-demo-section.is-running .workflow-ai-progress span { animation: workflow-process .72s ease 2.14s forwards; }
.workflow-demo-section.is-running .workflow-result-media::after { animation: workflow-shimmer 1s cubic-bezier(.22,1,.36,1) 3.05s forwards; }

.workflow-demo-section.is-complete .workflow-node { opacity: 1; animation: none; }
.workflow-demo-section.is-complete .workflow-node:not(:hover) { transform: translateY(0) scale(1); }
.workflow-demo-section.is-complete .workflow-connection { stroke: rgba(255,90,0,.42); stroke-dashoffset: 0; animation: none; }
.workflow-demo-section.is-complete .workflow-energy { display: none; }
.workflow-demo-section.is-complete .workflow-ai-progress span { width: 100%; }

@keyframes workflow-node-in { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes workflow-result-in {
  from { opacity: 0; filter: blur(14px); transform: translateY(16px) scale(.97); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}
@keyframes workflow-line-in { to { stroke: var(--workflow-accent); stroke-dashoffset: 0; filter: drop-shadow(0 0 3px rgba(255,90,0,.13)); } }
@keyframes workflow-energy-show { 0%, 100% { opacity: 0; } 18%, 82% { opacity: 1; } }
@keyframes workflow-generate-click { 0%, 100% { transform: scale(1); } 48% { transform: scale(.975); background: #282828; box-shadow: 0 0 0 4px rgba(255,90,0,.08); } }
@keyframes workflow-dot { from { opacity: .28; transform: translateY(0); } to { opacity: 1; transform: translateY(-3px); } }
@keyframes workflow-process { to { width: 100%; } }
@keyframes workflow-shimmer { to { transform: translateX(130%) skewX(-14deg); } }

@media (max-width: 1120px) {
  .workflow-canvas { grid-template-columns: 190px minmax(235px, 1fr) 92px minmax(245px, 285px); gap: 24px 32px; padding: 36px; }
  .workflow-plus { left: 131px; }
  .workflow-node-footer span { display: none; }
  .workflow-reference img { min-height: 96px; }
}

@media (max-width: 900px) {
  .workflow-demo-section { padding: 118px 0; }
  .workflow-demo-container { width: min(100% - 32px, 760px); }
  .workflow-demo-heading { margin-bottom: 48px; }
  .workflow-canvas { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 64px; min-height: 0; padding: 32px; }
  .workflow-character,
  .workflow-references,
  .workflow-prompt,
  .workflow-ai,
  .workflow-result { grid-column: 1; grid-row: auto; width: min(100%, 560px); justify-self: center; align-self: auto; }
  .workflow-character { order: 1; }
  .workflow-plus { position: relative; order: 2; left: auto; top: auto; justify-self: center; margin: -48px 0; transform: none; }
  .workflow-references { order: 3; }
  .workflow-prompt { order: 4; }
  .workflow-ai { order: 5; width: min(100%, 240px); }
  .workflow-result { order: 6; width: min(100%, 480px); }
  .workflow-character-media { aspect-ratio: 1.25 / 1; }
  .workflow-reference img { min-height: 170px; }
  .workflow-port-out { top: auto; right: 50%; bottom: -6px; transform: translateX(50%); }
  .workflow-port-in { top: -6px; left: 50%; transform: translateX(-50%); }
  .workflow-prompt .workflow-port-in-top,
  .workflow-prompt .workflow-port-in-bottom { top: -6px; }
  .workflow-prompt .workflow-port-in-bottom { display: none; }
  .workflow-result-media { max-height: 680px; }
}

@media (max-width: 720px) {
  .workflow-demo-section { padding: 96px 0; }
  .workflow-demo-heading h2 { font-size: clamp(42px, 12vw, 58px); }
  .workflow-demo-heading > span { margin-top: 20px; font-size: 15px; }
  .workflow-app { border-radius: 22px; }
  .workflow-toolbar { min-height: 57px; padding: 0 16px; }
  .workflow-brand { gap: 11px; }
  .workflow-brand strong { font-size: 10px; }
  .workflow-brand span { font-size: 8px; }
  .workflow-canvas { gap: 58px; padding: 20px 16px 28px; background-size: 18px 18px; }
  .workflow-node { border-radius: 16px; }
  .workflow-node-top { padding: 12px; }
  .workflow-character-media,
  .workflow-reference-grid,
  .workflow-result-media { margin-right: 10px; margin-left: 10px; }
  .workflow-node-footer { padding: 11px 12px 13px; }
  .workflow-reference img { min-height: 132px; }
  .workflow-prompt-copy { min-height: 132px; margin-right: 12px; margin-left: 12px; }
  .workflow-chips { padding-right: 12px; padding-left: 12px; }
  .workflow-generate { width: calc(100% - 24px); margin-right: 12px; margin-left: 12px; }
  .workflow-demo-note { margin-top: 27px; font-size: 14px; }
}

@media (max-width: 430px) {
  .workflow-demo-container { width: calc(100% - 24px); }
  .workflow-demo-heading { margin-bottom: 38px; }
  .workflow-demo-heading > p { margin-bottom: 17px; font-size: 9px; }
  .workflow-demo-heading h2 { font-size: clamp(38px, 11.6vw, 50px); }
  .workflow-demo-heading > span br { display: none; }
  .workflow-zoom { display: none; }
  .workflow-canvas { padding-inline: 12px; }
  .workflow-reference-grid { grid-template-columns: 1fr; }
  .workflow-reference img { min-height: 154px; }
  .workflow-result { width: 100%; }
  .workflow-result-media { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .workflow-node,
  .workflow-connection,
  .workflow-energy,
  .workflow-generate,
  .workflow-ai-mark i,
  .workflow-ai-progress span,
  .workflow-result-media::after { animation: none !important; transition: none !important; }
  .workflow-node { opacity: 1; transform: none; }
  .workflow-connection { stroke-dashoffset: 0; }
  .workflow-energy { display: none; }
  .workflow-ai-progress span { width: 100%; }
}