/* SVG has a fixed paint order. All movement stays on a single 2D plane. */
@property --flow-accent { syntax: '<color>'; inherits: true; initial-value: #b4ed79; }
@property --flow-ink { syntax: '<color>'; inherits: true; initial-value: #426429; }
@property --flow-tint { syntax: '<color>'; inherits: true; initial-value: #e7f2d9; }
.flow-scene { --cycle: 16s; --paper: #fffefa; --ink: #282e24; --muted: #646c5e; --line: #d0d7c7; position: relative; margin: 0; min-width: 0; padding: 18px 22px 20px; border: 1px solid var(--studio-line); border-radius: 12px; background: var(--studio-panel); overflow: hidden; }
.flow-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; color: var(--ch-muted); font-size: 10px; }
.flow-heading > span { display: flex; align-items: center; gap: 9px; }
.flow-heading .craft-mark { width: 12px; height: 12px; color: var(--flow-ink); }
[data-theme="dark"] .flow-heading .craft-mark { color: var(--flow-accent); }
.flow-pause { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ch-muted); font: inherit; font-size: 10px; cursor: pointer; }
.flow-pause[hidden] { display: none; }
.flow-pause:hover { color: var(--ch-text); border-color: var(--ch-border); }
.flow-pause:focus-visible { outline: 2px solid var(--ch-green); outline-offset: 3px; }
.build-canvas { display: block; width: calc(100% + 24px); height: auto; aspect-ratio: 500 / 405; margin: 4px -12px 0; overflow: visible; pointer-events: none; user-select: none; }
.build-canvas g { transform-box: view-box; }
.build-canvas text { font-family: Manrope,sans-serif; }
.svg-grid { color: var(--studio-line); opacity: .3; }
.svg-cross { stroke: var(--ch-muted); stroke-width: 1; opacity: .45; }
.svg-shadow { fill: #15210c; opacity: .07; }
.svg-paper { fill: var(--paper); }
.svg-ink { fill: var(--ink); }
.svg-muted { fill: var(--muted); }
.svg-outline, .svg-panel-border { stroke: var(--line); stroke-width: 1; }
.svg-divider { fill: none; stroke: var(--line); stroke-width: .7; }
.svg-lights { fill: none; stroke: #9caa90; stroke-width: 1; }
.svg-url { font-family: ui-monospace,monospace !important; font-size: 7px; fill: var(--muted); }
.svg-logo { font-size: 18px; font-weight: 800; letter-spacing: -1px; fill: var(--ink); }
.svg-accent-ink { fill: var(--flow-ink); }
.svg-accent-fill { fill: var(--flow-accent); }
.svg-accent-text { fill: var(--flow-ink); }
.svg-tint { fill: var(--flow-tint); }
.svg-nav-item, .svg-nav-selected { font-size: 7px; }
.svg-nav-item { fill: var(--muted); }
.svg-nav-selected { fill: var(--flow-ink); font-weight: 600; }
.svg-nav-item rect, .svg-nav-selected rect { fill: none; stroke: currentColor; stroke-width: 1; }
.svg-nav-item rect { stroke: var(--muted); }
.svg-nav-selected rect { stroke: var(--flow-ink); }
.svg-eyebrow { font-size: 6px; letter-spacing: .5px; fill: var(--muted); }
.svg-product-title { font-size: 21px; font-weight: 600; letter-spacing: -1px; fill: var(--ink); }
.svg-chart-area { fill: var(--flow-accent); opacity: .55; }
.svg-chart-line { fill: none; stroke: var(--flow-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-task-checks { fill: var(--flow-ink); font-size: 8px; }
.svg-task-titles { fill: var(--ink); font-size: 7px; font-weight: 600; }
.svg-task-details { fill: var(--muted); font-size: 5px; }
.svg-button { fill: #26321e; }
.svg-selection { fill: var(--paper); stroke: #4263c7; stroke-width: 1; opacity: 0; }
.svg-connections { opacity: 0; }
.svg-connection-path { fill: none; stroke: var(--flow-ink); stroke-width: 1.4; stroke-dasharray: 6 6; }
.svg-connections circle { fill: var(--flow-accent); stroke: var(--flow-ink); stroke-width: 1; }
.svg-code { opacity: 0; }
.svg-code-label { font: 8px ui-monospace,monospace !important; fill: #d5c9e7; }
.svg-code-lines text, .svg-code-lines tspan { font: 9px ui-monospace,SFMono-Regular,Consolas,monospace; }
.svg-code-lines { fill: #e4edda; }
.svg-compile { font: 7px ui-monospace,monospace !important; fill: #cfb6ff; }
.svg-phone-title { fill: #26321e; font-size: 13px; font-weight: 600; letter-spacing: -.5px; }
.svg-phone-bars { fill: #426429; }
.svg-design-tag { opacity: 0; }
/* Explicit origins prevent SVG groups from pivoting around changing bounds. */
.svg-browser { transform-origin: 248px 216px; }
.svg-nav { transform-origin: 84px 230px; --x: -16px; --y: 5px; --r: -3deg; }
.svg-title-panel { transform-origin: 294px 157px; --x: 7px; --y: -22px; --r: 0deg; }
.svg-chart-panel { transform-origin: 226px 252px; --x: -15px; --y: 12px; --r: -3deg; }
.svg-tasks-panel { transform-origin: 376px 252px; --x: 27px; --y: -18px; --r: 4deg; }
.svg-bottom-panel { transform-origin: 296px 330px; --x: 2px; --y: 18px; --r: 1deg; }
.svg-code { transform-origin: 205px 140px; }
.svg-phone { transform-origin: 429px 292px; transform: rotate(8deg); }
.svg-completion { transform-origin: 205px 372px; }
.svg-design-tag { transform-origin: 408px 50px; }
.flow-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 22px 0 0; }
.flow-step { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 0 0 12px; color: var(--ch-muted); border-bottom: 1px solid var(--studio-line); font-size: clamp(17px,1.8vw,24px); font-weight: 600; letter-spacing: -.04em; line-height: 1.3; }
.flow-step small { font-size: 8px; font-weight: 400; letter-spacing: 0; }
.flow-step i { position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: var(--step-color); transform-origin: left; transform: scaleX(0); }
.flow-step-design { --step-color: #4263c7; }
.flow-step-code { --step-color: #7952b4; }
.flow-step-create { --step-color: #426429; color: var(--ch-text); }
.flow-step-create i { transform: scaleX(1); }
[data-theme="dark"] .flow-step-design { --step-color: #a0b6ff; }
[data-theme="dark"] .flow-step-code { --step-color: #cfb6ff; }
[data-theme="dark"] .flow-step-create { --step-color: #b4ed79; }
.flow-scene > figcaption { padding-top: 16px; color: var(--ch-text); font-size: 9px; line-height: 1.8; }
.flow-scene > figcaption > span { display: block; color: var(--ch-muted); font-size: 8px; margin-top: 2px; }
@media (prefers-reduced-motion:no-preference) {
  .flow-ready { animation: phase-palette var(--cycle) linear infinite; }
  .flow-ready .svg-browser { animation: browser-journey var(--cycle) cubic-bezier(.45,0,.2,1) infinite; }
  .flow-ready .svg-panel { animation: panel-journey var(--cycle) cubic-bezier(.22,1,.36,1) infinite; }
  .flow-ready .svg-panel-border { animation: panel-outline var(--cycle) ease infinite; }
  .flow-ready .svg-material { animation: content-material var(--cycle) ease infinite; }
  .flow-ready .svg-selection { animation: selection-state var(--cycle) ease infinite; }
  .flow-ready .svg-design-tag { animation: design-gesture var(--cycle) ease infinite; }
  .flow-ready .svg-code { animation: code-journey var(--cycle) cubic-bezier(.22,1,.36,1) infinite; }
  .flow-ready .svg-code-lines > text { animation: code-line-in var(--cycle) ease infinite; animation-delay: calc(var(--line,0) * .07s); }
  .flow-ready .svg-connections { animation: connection-journey var(--cycle) ease infinite; }
  .flow-ready .svg-connection-path { animation: connection-travel var(--cycle) linear infinite; }
  .flow-ready .svg-phone { animation: phone-journey var(--cycle) cubic-bezier(.22,1,.36,1) infinite; }
  .flow-ready .svg-completion { animation: completion-journey var(--cycle) cubic-bezier(.22,1,.36,1) infinite; }
  .flow-ready .svg-chart-line { stroke-dasharray: 1; animation: draw-chart var(--cycle) ease infinite; }
  .flow-ready .flow-step { animation: step-state var(--cycle) linear infinite; }
  .flow-ready .flow-step i { animation: step-progress var(--cycle) linear infinite; }
  .flow-ready .flow-step-code, .flow-ready .flow-step-code i { animation-delay: -10.667s; }
  .flow-ready .flow-step-create, .flow-ready .flow-step-create i { animation-delay: -5.334s; }
  .flow-scene[data-running="false"], .flow-scene[data-running="false"] *, .flow-scene[data-running="false"] *::after { animation-play-state: paused !important; }
}
@keyframes phase-palette { 0%,27%,100% { --flow-accent: #a6bcff; --flow-ink: #3552a3; --flow-tint: #eaf0ff; } 34%,53% { --flow-accent: #cfb6ff; --flow-ink: #7952a8; --flow-tint: #f1eafb; } 63%,87% { --flow-accent: #b4ed79; --flow-ink: #426429; --flow-tint: #e7f2d9; } }
@keyframes browser-journey { 0%,5%,100% { transform: translate(0px,10px) rotate(-6deg) skewY(-4deg) scale(.88); } 24%,44% { transform: translate(3px,14px) rotate(-7deg) skewY(-5deg) scale(.85); } 64%,83% { transform: translate(-7px,-7px) rotate(-2deg) skewY(0deg) scale(1); } }
@keyframes panel-journey { 0%,8%,62%,86%,100% { transform: translate(0px,0px) rotate(0deg); } 22%,44% { transform: translate(var(--x),var(--y)) rotate(var(--r)); } }
@keyframes panel-outline { 0%,8%,22%,44%,100% { stroke: var(--flow-accent); } 62%,86% { stroke: transparent; } }
@keyframes content-material { 0%,12%,100% { opacity: .22; } 28%,44% { opacity: .5; } 61%,85% { opacity: 1; } }
@keyframes selection-state { 0%,22%,100% { opacity: 1; } 30%,92% { opacity: 0; } }
@keyframes design-gesture { 0%,8%,100% { opacity: 1; transform: translate(0px,0px); } 22% { opacity: 1; transform: translate(-12px,15px); } 30%,92% { opacity: 0; transform: translate(-12px,15px); } }
@keyframes code-journey { 0%,25%,94%,100% { opacity: 0; visibility: hidden; transform: translate(-16px,35px) rotate(-8deg) scale(.85); } 34%,46% { opacity: 1; visibility: visible; transform: translate(8px,-5px) rotate(-4deg) scale(1); } 57%,85% { opacity: 0; visibility: hidden; transform: translate(45px,-35px) rotate(0deg) scale(.7); } }
@keyframes code-line-in { 0%,27%,94%,100% { opacity: 0; transform: translateX(8px); } 34%,50% { opacity: 1; transform: translateX(0px); } 62%,85% { opacity: 0; transform: translateX(0px); } }
@keyframes connection-journey { 0%,22%,61%,100% { opacity: 0; visibility: hidden; } 32%,50% { opacity: .7; visibility: visible; } }
/* Match the previous dash speed only while connections can be seen. Reset while hidden. */
@keyframes connection-travel { 0%,22% { stroke-dashoffset: 0; } 61%,100% { stroke-dashoffset: -149.76; } }
@keyframes phone-journey { 0%,58%,100% { opacity: 0; visibility: hidden; transform: translate(22px,25px) rotate(15deg) scale(.7); } 68%,84% { opacity: 1; visibility: visible; transform: translate(0px,0px) rotate(8deg) scale(1); } 94% { opacity: 0; visibility: hidden; transform: translate(20px,20px) rotate(12deg) scale(.8); } }
@keyframes completion-journey { 0%,56%,100% { opacity: 0; transform: translateY(20px) scale(.94); } 67%,83% { opacity: 1; transform: translateY(0px) scale(1); } 92% { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes draw-chart { 0%,48%,100% { stroke-dashoffset: 1; } 68%,87% { stroke-dashoffset: 0; } }
@keyframes step-state { 0%,29%,100% { color: var(--step-color); } 33%,94% { color: var(--ch-muted); } }
@keyframes step-progress { 0% { transform: scaleX(0); opacity: 1; } 30% { transform: scaleX(1); opacity: 1; } 33%,99% { transform: scaleX(1); opacity: 0; } 100% { transform: scaleX(0); opacity: 1; } }
@media (max-width:1100px) and (min-width:769px) { .flow-scene { padding: 14px; } }
@media (max-width:768px) { .flow-scene { width: 100%; max-width: 540px; justify-self: center; padding: 14px 16px 18px; }.build-canvas { width: calc(100% + 20px); margin-left: -10px; margin-right: -10px; }.flow-steps { margin-top: 12px; gap: 12px; }.flow-step { font-size: 22px; } }
@media (max-width:400px) { .flow-heading { font-size: 9px; }.flow-step { font-size: 19px; }.flow-scene > figcaption { font-size: 8px; } }