.workflow-demo { position: relative; min-width: 0; margin: 0; color: #28312d; --motion-rate: 1; }
.hero-demo { width: min(1260px, 98%); margin: 0 auto; --motion-rate: 1.1; }
.demo-canvas { position: relative; overflow: hidden; border-radius: 18px; background: radial-gradient(ellipse at 55% 60%, #f4e4db 0, #f4ede5 33%, #f8f8f6 72%); isolation: isolate; }
.hero-demo .demo-canvas { background: radial-gradient(ellipse at 47% 53%, #f5d9cb 0, #f4e7dc 34%, #f8f8f6 70%); }
.demo-drawing { display: block; width: 100%; height: auto; overflow: visible; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.wf-grid { opacity: .16; }
.wf-ground { fill: #b99787; opacity: .13; }
.wf-panel, .wf-floating { fill: #fffefc; stroke: #e2dcd2; stroke-width: 1; }
.wf-thumbnail { stroke: #f0c3ac; stroke-width: 1; }
.wf-heading { fill: #28312d; font-size: 23px; font-weight: 680; letter-spacing: -.8px; }
.wf-card-title { fill: #37433b; font-size: 13px; font-weight: 600; letter-spacing: -.1px; }
.wf-label { fill: #455346; font-size: 14px; }
.wf-micro { fill: #526149; font-size: 11px; }
.wf-small-label { fill: #5c695b; font-size: 10px; font-weight: 600; letter-spacing: 1.15px; }
.wf-tag-text { fill: #49628c; font-size: 11px; }
.wf-rule { fill: none; stroke: #e8e4dc; stroke-width: 1.1; }
.wf-skeleton { fill: none; stroke: #e2e2da; stroke-width: 4; stroke-linecap: round; }
.wf-art { fill: none; stroke: #bd725b; stroke-width: 2.5; }
.wf-art circle:nth-child(2) { stroke: #dd533b; }
.wf-sage { fill: #e1eccb; }
.wf-blue { fill: #dee7fa; }
.wf-amber { fill: #ffe5ad; }
.wf-red-wash { fill: #fbe0d4; }
.wf-accent-fill { fill: #d74736; }
.wf-accent, .wf-time-text { color: #bd4031; fill: #bd4031; }
.wf-time-text { font-size: 12px; font-weight: 550; }
.wf-white-text { fill: #fff; font-size: 13px; font-weight: 600; }
.wf-icon { color: #62725d; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wf-white-icon { color: #fff; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wf-note-icon { fill: none; stroke: #92734c; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wf-accent-stroke { fill: none; stroke: #bd4031; stroke-width: 1.7; stroke-linecap: round; }
.wf-connector { fill: none; stroke: #db886b; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 6; }
.wf-search-caret { stroke: #d74736; stroke-width: 1.5; }
.wf-json-braces { fill: #bd4031; font-size: 49px; letter-spacing: 8px; font-family: ui-monospace, monospace; }
.wf-time-value { fill: #344237; font-size: 33px; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.wf-progress-track { stroke: #d4c9b9; stroke-width: 4; stroke-linecap: round; }
.wf-progress-fill { stroke: #d74736; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 240; }
.wf-playhead { fill: #d74736; transform: translateX(240px); }
.wf-unmatched { opacity: .08; transform: translateX(24px); }
.wf-match > rect:first-child { stroke: #d4836c; stroke-width: 1.7; }
.wf-link-source, .hero-cursor, .hero-spark { opacity: 0; }
.hero-note { --note-x: 0px; transform: translateX(var(--note-x)) rotate(-6deg); }
.hero-time { --time-x: 0px; transform: translateX(var(--time-x)); }
.wf-board, .wf-enter, .wf-result, .wf-extra, .wf-context, .wf-saved, .wf-card, .wf-link-source, .hero-depth, .hero-cursor, .hero-spark, .wf-art, .wf-unmatched, .wf-playhead { transform-box: fill-box; transform-origin: center; }
.workflow-demo figcaption { display: grid; gap: 6px; max-width: 620px; margin: 0 auto; text-align: center; font-size: 12px; line-height: 1.65; }
.workflow-demo figcaption strong { font-size: 14px; font-weight: 600; color: #354238; }
.workflow-demo figcaption > span { color: #61695e; }
.feature-row .workflow-demo figcaption { font-size: 11px; }

/* Overlapping choreography. Every track ends before the finite 3.2s reveal. */
[data-motion="playing"] .wf-board { animation: motion-board calc(850ms * var(--motion-rate)) cubic-bezier(.16,1,.3,1) both; }
[data-motion="playing"] .hero-depth { animation: motion-depth calc(900ms * var(--motion-rate)) cubic-bezier(.16,1,.3,1) both; }
[data-motion="playing"] .wf-card-0 { animation: motion-card-left calc(900ms * var(--motion-rate)) calc(140ms * var(--motion-rate)) cubic-bezier(.16,1,.3,1) both; }
[data-motion="playing"] .wf-card-1 { animation: motion-card-center calc(950ms * var(--motion-rate)) calc(220ms * var(--motion-rate)) cubic-bezier(.16,1,.3,1) both; }
[data-motion="playing"] .wf-card-2 { animation: motion-card-right calc(1000ms * var(--motion-rate)) calc(300ms * var(--motion-rate)) cubic-bezier(.16,1,.3,1) both; }
[data-motion="playing"] .wf-link-source { animation: motion-link calc(1250ms * var(--motion-rate)) calc(100ms * var(--motion-rate)) cubic-bezier(.4,0,.2,1) both; }
[data-motion="playing"] .wf-enter { animation: motion-swoop calc(700ms * var(--motion-rate)) calc(240ms * var(--motion-rate)) cubic-bezier(.16,1,.3,1) both; }
[data-motion="playing"] .wf-result { animation: motion-pop calc(650ms * var(--motion-rate)) calc(720ms * var(--motion-rate)) cubic-bezier(.2,1.4,.4,1) both; }
[data-motion="playing"] .wf-context { animation: motion-pop calc(600ms * var(--motion-rate)) calc(1050ms * var(--motion-rate)) cubic-bezier(.2,1.4,.4,1) both; }
[data-motion="playing"] .wf-extra { animation: motion-swoop calc(700ms * var(--motion-rate)) calc(1400ms * var(--motion-rate)) cubic-bezier(.16,1,.3,1) both; }
[data-motion="playing"] .wf-saved { animation: motion-check calc(650ms * var(--motion-rate)) calc(1150ms * var(--motion-rate)) cubic-bezier(.2,1.5,.4,1) both; }
[data-motion="playing"] .hero-note { animation: motion-note calc(900ms * var(--motion-rate)) calc(1450ms * var(--motion-rate)) cubic-bezier(.16,1,.3,1) both; }
[data-motion="playing"] .hero-time { animation: motion-time calc(850ms * var(--motion-rate)) calc(1640ms * var(--motion-rate)) cubic-bezier(.16,1,.3,1) both; }
[data-motion="playing"] .hero-cursor { animation: motion-cursor calc(1800ms * var(--motion-rate)) calc(400ms * var(--motion-rate)) cubic-bezier(.4,0,.2,1) both; }
[data-motion="playing"] .hero-spark { animation: motion-spark calc(650ms * var(--motion-rate)) calc(1300ms * var(--motion-rate)) ease-out both; }
[data-motion="playing"] .wf-art { animation: motion-draw calc(1100ms * var(--motion-rate)) calc(250ms * var(--motion-rate)) ease-out both; }
[data-motion="playing"] .wf-unmatched { animation: motion-filter calc(1300ms * var(--motion-rate)) calc(250ms * var(--motion-rate)) cubic-bezier(.4,0,.2,1) both; }
[data-motion="playing"] .wf-progress-fill { animation: motion-progress calc(1400ms * var(--motion-rate)) calc(250ms * var(--motion-rate)) cubic-bezier(.76,0,.24,1) both; }
[data-motion="playing"] .wf-playhead { animation: motion-playhead calc(1400ms * var(--motion-rate)) calc(250ms * var(--motion-rate)) cubic-bezier(.76,0,.24,1) both; }
@keyframes motion-board { from { opacity: 0; transform: perspective(900px) translateY(65px) rotateX(14deg) rotateZ(-5deg) scale(.83); } to { opacity: 1; transform: none; } }
@keyframes motion-depth { from { opacity: 0; transform: translate(30px,80px) rotate(8deg) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes motion-card-left { from { opacity: 0; transform: translate(-100px,60px) rotate(-17deg) scale(.65); } 70% { opacity: 1; transform: translate(3px,-6px) rotate(1deg) scale(1.02); } to { transform: none; } }
@keyframes motion-card-center { from { opacity: 0; transform: translateY(100px) rotate(9deg) scale(.65); } 70% { opacity: 1; transform: translateY(-7px) rotate(-1deg) scale(1.03); } to { transform: none; } }
@keyframes motion-card-right { from { opacity: 0; transform: translate(110px,65px) rotate(19deg) scale(.65); } 70% { opacity: 1; transform: translate(-3px,-5px) rotate(-1deg) scale(1.02); } to { transform: none; } }
@keyframes motion-link { 0% { opacity: 0; transform: translate(-135px,45px) rotate(-12deg) scale(.8); } 25%,45% { opacity: 1; transform: translate(0,-18px) rotate(-3deg); } 100% { opacity: 0; transform: translate(165px,40px) scale(.3); } }
@keyframes motion-swoop { from { opacity: 0; transform: translate(55px,35px) rotate(7deg) scale(.75); } to { opacity: 1; transform: none; } }
@keyframes motion-pop { from { opacity: 0; transform: translateY(18px) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes motion-check { from { opacity: 0; transform: scale(0) rotate(-55deg); } to { opacity: 1; transform: none; } }
@keyframes motion-note { from { opacity: 0; transform: translate(80px,55px) rotate(18deg) scale(.6); } to { opacity: 1; transform: translateX(var(--note-x)) rotate(-6deg); } }
@keyframes motion-time { from { opacity: 0; transform: translate(-95px,35px) rotate(-16deg) scale(.6); } to { opacity: 1; transform: translateX(var(--time-x)); } }
@keyframes motion-cursor { 0% { opacity: 0; transform: translate(150px,80px); } 25%,45% { opacity: 1; transform: translate(0,0); } 52% { opacity: 1; transform: scale(.85); } 65% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(110px,65px); } }
@keyframes motion-spark { 0% { opacity: 0; transform: scale(.2); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes motion-draw { from { stroke-dasharray: 450; stroke-dashoffset: 450; opacity: .1; } to { stroke-dasharray: 450; stroke-dashoffset: 0; opacity: 1; } }
@keyframes motion-filter { 0%,30% { opacity: 1; transform: none; } 100% { opacity: .08; transform: translateX(24px); } }
@keyframes motion-progress { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }
@keyframes motion-playhead { from { transform: none; } to { transform: translateX(240px); } }
@media (max-width: 700px) {
  .hero-demo { width: 100%; margin-top: 8px; }
  .demo-canvas { border-radius: 10px; }
  .demo-drawing { width: 132%; max-width: none; margin-left: -16%; }
  .hero-demo .demo-drawing { width: 120%; margin-left: -10%; }
  .workflow-demo figcaption { margin-top: 4px; padding: 0 16px; font-size: 11px; }
  .workflow-demo figcaption strong { font-size: 13px; }
  .hero-note { --note-x: -28px; }
  .hero-time { --time-x: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .workflow-demo * { animation: none !important; transition: none !important; }
}