:root {
  --flow-lime: #c8ff3d;
  --flow-violet: #7b68ff;
  --flow-cyan: #42e8ff;
  --flow-orange: #ff9c70;
  --flow-bg: #06080d;
  --flow-panel: rgba(13, 17, 25, 0.78);
}

.flow-body {
  min-height: 100svh;
  overflow: hidden;
  background: #06080d;
}

#flow-particle-canvas,
.flow-ambient,
.flow-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

#flow-particle-canvas { z-index: 0; width: 100%; height: 100%; opacity: 0.58; }
.flow-ambient { z-index: 0; overflow: hidden; filter: blur(90px); }
.flow-ambient i { position: absolute; border-radius: 50%; animation: flow-ambient-drift 14s ease-in-out infinite alternate; }
.flow-ambient i:nth-child(1) { top: -22vw; right: -14vw; width: 52vw; height: 52vw; background: rgba(123, 104, 255, 0.15); }
.flow-ambient i:nth-child(2) { bottom: -26vw; left: -14vw; width: 48vw; height: 48vw; background: rgba(66, 232, 255, 0.08); animation-delay: -5s; }
.flow-ambient i:nth-child(3) { right: 22vw; bottom: -20vw; width: 40vw; height: 40vw; background: rgba(200, 255, 61, 0.06); animation-delay: -9s; }
.flow-noise { z-index: 1; opacity: 0.055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }

.flow-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(150px,1fr) auto auto minmax(230px,auto);
  align-items: center;
  width: 100%;
  height: 72px;
  padding: 0 clamp(20px, 3vw, 52px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(6, 8, 13, 0.7);
  backdrop-filter: blur(24px) saturate(125%);
}

.flow-header .logo { justify-self: start; margin-left: 38px; }
.flow-header .logo strong { letter-spacing: 0.12em; }
.flow-header-switch { grid-column: 2; }

.flow-back {
  position: absolute;
  left: clamp(20px, 3vw, 52px);
  display: flex;
  align-items: center;
  gap: 7px;
  color: #747d89;
  font-size: 10px;
}

.flow-back span { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; color: #dbe0da; transition: transform 0.3s ease, border-color 0.3s ease; }
.flow-back em { display: none; font-style: normal; }
.flow-back:hover span { border-color: var(--flow-lime); transform: translateX(-3px); }

.flow-header__center { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 100px; color: #8a939f; background: rgba(255, 255, 255, 0.025); font-size: 9px; letter-spacing: 0.06em; }
.flow-header__center { grid-column: 3; justify-self: center; }
.flow-header__center > b { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.1); }
.flow-live { display: flex; align-items: center; gap: 7px; color: #c7cdc6; }
.flow-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--flow-lime); box-shadow: 0 0 12px var(--flow-lime); animation: status-blink 1.8s ease-in-out infinite; }

.flow-header__actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.flow-header__actions > span { padding: 6px 9px; border: 1px solid rgba(200, 255, 61, 0.16); border-radius: 100px; color: var(--flow-lime); background: rgba(200, 255, 61, 0.04); font-size: 8px; letter-spacing: 0.1em; }
.flow-header__actions button { height: 34px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 100px; color: #959eaa; background: rgba(255, 255, 255, 0.025); cursor: pointer; font-size: 9px; transition: color 0.25s ease, border-color 0.25s ease; }
.flow-header__actions button:hover { border-color: rgba(200, 255, 61, 0.3); color: var(--flow-lime); }
.flow-header__actions .flow-global-reset { border-color:rgba(255,156,112,.2); color:#a78676; }
.flow-header__actions .flow-global-reset:hover,.flow-header__actions .flow-global-reset[data-armed="true"] { border-color:rgba(255,156,112,.45); color:#ff9c70; background:rgba(255,156,112,.08); }

.flow-main { position: relative; z-index: 3; min-height: 100svh; }
.flow-stage { display: none; min-height: 100svh; }
.flow-stage.is-active { display: block; animation: flow-stage-in 0.8s var(--ease-out) both; }
.flow-stage.is-leaving { animation: flow-stage-out 0.5s ease both; }

.brief-stage { overflow: auto; }
.brief-stage__content { display: grid; grid-template-columns: minmax(480px, 0.94fr) minmax(470px, 0.76fr); align-items: center; gap: clamp(48px, 7vw, 120px); width: min(100%, 1500px); min-height: 100svh; margin: 0 auto; padding: 116px clamp(30px, 6vw, 100px) 56px; }
.brief-copy { max-width: 670px; }
.flow-kicker { display: flex; align-items: center; gap: 11px; color: #878f9b; font-size: 9px; font-weight: 750; letter-spacing: 0.22em; }
.flow-kicker span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(200, 255, 61, 0.24); border-radius: 50%; color: var(--flow-lime); letter-spacing: 0; }
.flow-kicker > i { width: 38px; height: 1px; background: linear-gradient(90deg, var(--flow-lime), transparent); }
.flow-kicker em { font-style: normal; }

.brief-copy h1 { margin: 32px 0 22px; font-size: clamp(49px, 5vw, 78px); font-weight: 560; letter-spacing: -0.07em; line-height: 1.04; }
.brief-copy h1 span { color: transparent; background: linear-gradient(100deg, var(--flow-lime), var(--flow-cyan), #a994ff); -webkit-background-clip: text; background-clip: text; }
.brief-copy > p { max-width: 580px; margin: 0 0 28px; color: #929ba7; font-size: 14px; line-height: 1.85; }

.incoming-idea { display: flex; align-items: center; gap: 12px; max-width: 620px; padding: 12px 14px; border: 1px solid rgba(123, 104, 255, 0.18); border-radius: 16px; background: linear-gradient(110deg, rgba(123, 104, 255, 0.07), rgba(66, 232, 255, 0.025)); }
.incoming-idea > div { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.incoming-idea small { color: #7771bd; font-size: 8px; font-weight: 800; letter-spacing: 0.11em; }
.incoming-idea strong { overflow: visible; font-size: 11px; font-weight: 520; line-height: 1.55; text-overflow: clip; white-space: normal; }
.incoming-idea strong.is-changing { animation: brief-choice-change 0.45s var(--ease-out); }
.incoming-idea > em { color: var(--flow-lime); font-size: 8px; font-style: normal; white-space: nowrap; }

.brief-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 13px 0; }
.brief-choice { position: relative; min-height: 118px; padding: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 16px; color: inherit; background: rgba(255, 255, 255, 0.025); cursor: pointer; text-align: left; transition: transform 0.35s var(--ease-out), border-color 0.3s ease, background 0.3s ease; }
.brief-choice::after { position: absolute; right: -22px; bottom: -30px; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 255, 61, 0.12), transparent 70%); content: ""; opacity: 0; transition: opacity 0.3s ease; }
.brief-choice:hover { border-color: rgba(200, 255, 61, 0.25); background: rgba(200, 255, 61, 0.035); transform: translateY(-3px); }
.brief-choice:hover::after { opacity: 1; }
.brief-choice > span { display: flex; align-items: center; gap: 7px; color: #6f7885; font-size: 8px; }
.brief-choice > span i { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 7px; color: var(--flow-lime); font-size: 6px; font-style: normal; }
.brief-choice > span em { font-style: normal; }
.brief-choice > strong { display: block; min-height: 34px; margin-top: 15px; font-size: 12px; font-weight: 580; line-height: 1.45; }
.brief-choice > b { position: absolute; bottom: 12px; left: 14px; color: #545d6a; font-size: 7px; font-weight: 500; }
.brief-choice.is-changing > strong { animation: brief-choice-change 0.45s var(--ease-out); }

.brief-action-row { display: flex; align-items: center; gap: 18px; margin-top: 15px; }
.flow-primary-button { position: relative; display: flex; align-items: center; gap: 18px; height: 57px; padding: 0 10px 0 22px; overflow: hidden; border: 0; border-radius: 17px; color: #080b0d; background: var(--flow-lime); cursor: pointer; font-size: 11px; font-weight: 800; transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease; }
.flow-primary-button::before { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.4), transparent 75%); content: ""; transform: translateX(-120%); transition: transform .7s ease; }
.flow-primary-button:hover { box-shadow: 0 18px 50px rgba(200, 255, 61, 0.16); transform: translateY(-3px); }
.flow-primary-button:hover::before { transform: translateX(120%); }
.flow-primary-button > i { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 12px; color: var(--flow-lime); background: #090c0f; font-style: normal; }
.brief-action-row > small { display: flex; align-items: center; gap: 7px; color: #666f7c; font-size: 8px; }
.brief-action-row > small i { color: var(--flow-violet); font-style: normal; }

.living-brief { position: relative; min-height: 630px; padding: 23px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 28px; background: linear-gradient(150deg, rgba(20, 25, 36, 0.84), rgba(8, 11, 17, 0.75)); box-shadow: 0 45px 110px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.05); backdrop-filter: blur(24px); }
.living-brief::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(200,255,61,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(200,255,61,.035) 1px, transparent 1px); background-size: 34px 34px; content: ""; mask-image: linear-gradient(black, transparent 76%); }
.living-brief__halo { position: absolute; top: -25%; right: -25%; width: 65%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(123,104,255,.18), transparent 66%); filter: blur(20px); }
.living-brief__head { position: relative; display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.living-brief__head > div { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.living-brief__head small { color: #7871bd; font-size: 7px; font-weight: 800; letter-spacing: .16em; }
.living-brief__head strong { font-size: 11px; font-weight: 550; }
.living-brief__head > em { display: flex; align-items: center; gap: 6px; color: #77818e; font-size: 8px; font-style: normal; }
.living-brief__head > em i { width: 6px; height: 6px; border-radius: 50%; background: var(--flow-lime); box-shadow: 0 0 10px var(--flow-lime); }

.brief-signal { position: relative; margin: 17px 0 5px; padding: 17px 17px 15px; overflow: hidden; border: 1px solid rgba(200,255,61,.11); border-radius: 15px; background: rgba(200,255,61,.025); }
.brief-signal > span { color: #65707d; font-size: 7px; font-weight: 800; letter-spacing: .16em; }
.brief-signal > strong { display: block; margin: 8px 0 12px; color: #dce2d9; font-size: 11px; font-weight: 540; letter-spacing: .1em; }
.signal-wave { display: flex; align-items: center; gap: 5px; height: 25px; }
.signal-wave i { display: block; width: 2px; height: 5px; border-radius: 5px; background: linear-gradient(var(--flow-lime), var(--flow-cyan)); animation: signal-wave 1.4s ease-in-out infinite; }
.signal-wave i:nth-child(2) { height: 14px; animation-delay: -.15s; }.signal-wave i:nth-child(3) { height: 22px; animation-delay: -.3s; }.signal-wave i:nth-child(4) { height: 10px; animation-delay: -.45s; }.signal-wave i:nth-child(5) { height: 19px; animation-delay: -.6s; }.signal-wave i:nth-child(6) { height: 7px; animation-delay: -.75s; }.signal-wave i:nth-child(7) { height: 16px; animation-delay: -.9s; }.signal-wave i:nth-child(8) { height: 24px; animation-delay: -1.05s; }.signal-wave i:nth-child(9) { height: 8px; animation-delay: -1.2s; }

.brief-facts { position: relative; margin: 0; }
.brief-facts > div { display: grid; grid-template-columns: 82px 1fr auto; align-items: center; min-height: 52px; border-bottom: 1px solid rgba(255,255,255,.07); }
.brief-facts dt { color: #626c78; font-size: 8px; }.brief-facts dd { margin: 0; font-size: 10px; }.brief-facts em { padding: 4px 6px; border: 1px solid rgba(255,255,255,.07); border-radius: 100px; color: #697380; font-size: 6px; font-style: normal; }

.page-constellation { position: relative; margin-top: 18px; }.page-constellation > small { color: #65707d; font-size: 7px; letter-spacing: .08em; }
.page-map { position: relative; height: 160px; margin-top: 5px; }
.page-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }.page-map path { fill: none; stroke: rgba(200,255,61,.2); stroke-dasharray: 3 5; animation: flow-dash 8s linear infinite; }
.page-map__core,.page-map__node { position: absolute; z-index: 2; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.11); color: #77818d; background: rgba(7,10,15,.84); font-size: 6px; letter-spacing: .08em; }
.page-map__core { top: 50%; left: 50%; width: 72px; height: 72px; border-color: rgba(200,255,61,.25); border-radius: 26px; color: var(--flow-lime); transform: translate(-50%,-50%) rotate(45deg); box-shadow: 0 0 30px rgba(200,255,61,.06); }.page-map__core i { position:absolute; inset:10px; border:1px solid rgba(200,255,61,.18); border-radius:20px; }.page-map__core { text-indent: 2px; }.page-map__core::first-line { transform: rotate(-45deg); }
.page-map__node { min-width: 73px; height: 28px; border-radius: 9px; }.page-map__node--one { top: 6px; left: 3%; }.page-map__node--two { top: 9px; right: 2%; }.page-map__node--three { bottom: 5px; left: 1%; }.page-map__node--four { right: 1%; bottom: 7px; }
.brief-boundary { position: relative; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid rgba(255,156,112,.12); border-radius: 12px; color: #717b87; background: rgba(255,156,112,.025); }.brief-boundary > i { display:grid; place-items:center; flex:0 0 auto; width:19px; height:19px; border:1px solid rgba(255,156,112,.2); border-radius:50%; color:var(--flow-orange); font-size:8px; font-style:normal; }.brief-boundary p { margin:0; font-size:8px; line-height:1.5; }.brief-boundary strong { color:#9a765f; font-weight:600; }

.flow-reveal { opacity: 0; transform: translateY(24px); animation: flow-reveal .8s .15s var(--ease-out) forwards; }.living-brief.flow-reveal { animation-delay: .3s; }

.build-stage { position: relative; grid-template-columns: minmax(320px,.64fr) minmax(610px,1.36fr); gap: clamp(30px,4vw,70px); align-items: center; height: 100svh; padding: 95px clamp(24px,4vw,70px) 116px; overflow: clip; }
.build-stage.is-active { display: grid; animation: build-stage-in .8s var(--ease-out) both; }
.build-atmosphere { position:absolute; inset:0; pointer-events:none; }
.build-atmosphere i { position: absolute; border:1px solid rgba(255,255,255,.05); border-radius:50%; pointer-events:none; }.build-atmosphere i:first-child { top:-40%; right:-10%; width:70vw; height:70vw; animation:spin 60s linear infinite; }.build-atmosphere i:last-child { right:35%; bottom:-55%; width:60vw; height:60vw; border-style:dashed; animation:spin-reverse 48s linear infinite; }
.build-story { position: relative; z-index: 6; max-width: 510px; }
.process-heading { min-height: 285px; }
.process-heading.is-changing { animation: process-change .55s var(--ease-out); }
.process-heading__top { display:flex; align-items:center; gap:10px; margin-bottom:25px; }.process-heading__top span { display:grid; place-items:center; width:35px; height:35px; border:1px solid rgba(200,255,61,.25); border-radius:50%; color:var(--flow-lime); font-size:9px; }.process-heading__top > i { width:38px; height:1px; background:linear-gradient(90deg,var(--flow-lime),transparent); }.process-heading__top em { color:#737d89; font-size:8px; font-style:normal; font-weight:800; letter-spacing:.18em; }
.process-heading h1 { margin:0; font-size:clamp(38px,3.45vw,56px); font-weight:560; letter-spacing:-.065em; line-height:1.06; }.process-heading > p { max-width:450px; margin:23px 0 0; color:#8c96a2; font-size:13px; line-height:1.8; }
.agent-narration { display:flex; align-items:center; gap:12px; min-height:67px; padding:12px 14px; border:1px solid rgba(123,104,255,.17); border-radius:16px; background:linear-gradient(110deg,rgba(123,104,255,.06),rgba(66,232,255,.02)); }.agent-narration > div { display:flex; flex:1; flex-direction:column; gap:5px; }.agent-narration small { color:#8e83e2; font-size:7px; font-weight:800; letter-spacing:.12em; }.agent-narration strong { font-size:10px; font-weight:520; line-height:1.5; }.agent-narration > em { display:flex; gap:3px; }.agent-narration > em i { width:3px; height:3px; border-radius:50%; background:var(--flow-violet); animation:typing 1.2s ease-in-out infinite; }.agent-narration > em i:nth-child(2){animation-delay:.15s}.agent-narration > em i:nth-child(3){animation-delay:.3s}
.process-evidence { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 19px; }.process-evidence span { padding:6px 8px; border:1px solid rgba(255,255,255,.07); border-radius:100px; color:#707a86; font-size:7px; }.process-evidence i { margin-right:4px; color:var(--flow-lime); font-style:normal; }
.build-controls { display:flex; gap:8px; }.build-controls button { display:flex; align-items:center; gap:8px; height:37px; padding:0 11px; border:1px solid rgba(255,255,255,.09); border-radius:11px; color:#7d8693; background:rgba(255,255,255,.025); cursor:pointer; font-size:8px; transition:all .25s ease; }.build-controls button:hover { border-color:rgba(200,255,61,.25); color:#dce1db; }.build-controls button i { color:var(--flow-lime); font-style:normal; }.build-controls button:last-child { margin-left:auto; }

.generation-stage { position:relative; z-index:5; height:min(69vh,690px); min-height:510px; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:30px; background:radial-gradient(circle at 70% 25%,rgba(123,104,255,.1),transparent 35%),linear-gradient(145deg,rgba(16,21,30,.78),rgba(7,10,15,.72)); box-shadow:0 45px 110px rgba(0,0,0,.33),inset 0 1px rgba(255,255,255,.04); backdrop-filter:blur(22px); }
.generation-stage::before { position:absolute; inset:0; background-image:linear-gradient(rgba(200,255,61,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(200,255,61,.03) 1px,transparent 1px); background-size:38px 38px; content:""; mask-image:linear-gradient(black,transparent); }.generation-glow { position:absolute; top:50%; left:50%; width:60%; height:60%; border-radius:50%; background:radial-gradient(circle,rgba(200,255,61,.09),transparent 68%); filter:blur(45px); transform:translate(-50%,-50%); transition:background .6s ease; }
.site-window { position:absolute; top:50%; left:50%; width:88%; height:82%; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:17px; background:#f0f2eb; box-shadow:0 28px 70px rgba(0,0,0,.38); transform:translate(-50%,-50%) perspective(1100px) rotateY(-1deg); transition:all .85s var(--ease-out); }
.site-window__bar { display:flex; align-items:center; gap:10px; height:34px; padding:0 10px; border-bottom:1px solid #cdd1ca; color:#6f7670; background:#e4e7e1; font-size:6px; }.window-lights { display:flex; gap:4px; }.window-lights i { width:5px; height:5px; border-radius:50%; background:#a8ada7; }.site-address { display:flex; align-items:center; gap:6px; width:45%; height:19px; margin:auto; padding:0 8px; border:1px solid #d2d6cf; border-radius:6px; background:#f7f8f4; }.site-address i { width:4px; height:4px; border-radius:50%; background:#7b827c; }.site-window__bar > em { font-size:5px; font-style:normal; font-weight:800; letter-spacing:.12em; }
.site-viewport { position:relative; height:calc(100% - 34px); overflow:hidden; color:#121612; background:#f1f3ec; scroll-behavior:smooth; }.site-skeleton { position:absolute; inset:12px; z-index:0; display:grid; grid-template-rows:35px 1fr 70px 120px; gap:7px; transition:opacity .5s ease; }.site-skeleton i { border:1px dashed #bac0b8; background:linear-gradient(90deg,#e0e3dc,#eceee8,#e0e3dc); background-size:200% 100%; animation:skeleton-flow 2s linear infinite; }
.generated-module { position:relative; z-index:2; opacity:0; transform:translateY(20px) scale(.985); transition:opacity .7s var(--ease-out),transform .8s var(--ease-out); }.generated-module.is-ready { opacity:1; transform:translateY(0) scale(1); }.generated-module.is-building::after { position:absolute; inset:0; z-index:20; border:1px solid var(--flow-lime); background:linear-gradient(90deg,transparent,rgba(200,255,61,.08),transparent); content:""; animation:module-flash 1.3s ease forwards; pointer-events:none; }
.generated-nav { color:#f1f3ee; background:#101412; }.generated-promo { display:grid; place-items:center; height:16px; border-bottom:1px solid rgba(255,255,255,.14); font-size:4px; letter-spacing:.12em; }.generated-nav nav { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; height:38px; padding:0 17px; }.generated-nav nav strong { font-size:10px; letter-spacing:.13em; }.generated-nav nav strong span { color:var(--flow-lime); }.generated-nav nav div { display:flex; justify-content:center; gap:14px; font-size:4px; }.generated-nav nav em { justify-self:end; font-size:5px; font-style:normal; }
.generated-hero { display:grid; grid-template-columns:1fr 1fr; height:300px; overflow:hidden; color:#f4f6ef; background:linear-gradient(125deg,#0e1617,#213235 60%,#596a3b); }.generated-hero__copy { position:relative; z-index:3; padding:45px 0 0 12%; }.generated-hero__copy small { color:var(--flow-lime); font-size:4px; font-weight:800; letter-spacing:.18em; }.generated-hero__copy h2 { margin:13px 0 10px; font-size:34px; letter-spacing:-.07em; line-height:.84; }.generated-hero__copy p { margin:0 0 15px; color:#bbc3bc; font-size:6px; }.generated-hero__copy button { padding:8px 10px; border:0; color:#0c100d; background:var(--flow-lime); font-size:5px; font-weight:800; }.generated-hero__art { position:relative; overflow:hidden; }.generated-hero__art::before { position:absolute; top:-26%; left:0; width:112%; aspect-ratio:1; border:1px solid rgba(200,255,61,.6); border-radius:50%; box-shadow:0 0 80px rgba(200,255,61,.1); content:""; }.generated-hero__art i { position:absolute; right:25%; bottom:-14%; width:43%; height:82%; border-radius:46% 46% 13% 13%; background:linear-gradient(145deg,#48585c,#111719); transform:rotate(-7deg); }.generated-hero__art i::before { position:absolute; top:7%; left:-22%; width:144%; height:23%; border-radius:50%; background:inherit; content:""; }.generated-hero__art span,.generated-hero__art b { position:absolute; border:1px solid rgba(255,255,255,.13); border-radius:50%; }.generated-hero__art span { top:14%; right:12%; width:62px; height:62px; }.generated-hero__art b { right:4%; bottom:7%; width:110px; height:110px; }.generated-hero > em { position:absolute; right:14px; bottom:10px; font-size:5px; font-style:normal; }
.generated-values { display:grid; grid-template-columns:repeat(3,1fr); min-height:66px; color:#131713; background:#eef0e9; }.generated-values > div { display:flex; align-items:center; gap:9px; padding:11px; border-right:1px solid #d7dad3; }.generated-values i { color:#7c847d; font-size:5px; font-style:normal; }.generated-values span { display:flex; flex-direction:column; gap:3px; }.generated-values strong { font-size:5px; letter-spacing:.08em; }.generated-values small { color:#7f8780; font-size:4px; }
.generated-products { padding:18px; color:#111411; background:#f3f4ef; }.generated-products header { display:flex; align-items:end; justify-content:space-between; margin-bottom:10px; }.generated-products header span { display:flex; flex-direction:column; gap:4px; }.generated-products header small { color:#788079; font-size:4px; letter-spacing:.15em; }.generated-products header strong { font-size:13px; }.generated-products header em { color:#747b75; font-size:4px; font-style:normal; }.generated-product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.generated-product-grid article > strong { display:block; margin-top:6px; font-size:5px; }.generated-product-grid article > small { display:block; margin-top:3px; color:#7c847d; font-size:4px; }.generated-product-art { position:relative; height:140px; overflow:hidden; background:linear-gradient(145deg,#d4d9d0,#9da8a3); }.generated-product-art::before { position:absolute; inset:-20%; background:radial-gradient(circle at 30% 25%,rgba(200,255,61,.7),transparent 18%),radial-gradient(circle at 75% 75%,rgba(123,104,255,.7),transparent 22%); content:""; filter:blur(18px); }.generated-product-art i { position:absolute; top:15%; left:28%; width:44%; height:76%; border-radius:45% 45% 13% 13%; background:linear-gradient(145deg,#30383b,#121719); }.generated-product-art i::before { position:absolute; top:8%; left:-24%; width:148%; height:22%; border-radius:50%; background:inherit; content:""; }.art-two { background:linear-gradient(145deg,#d3cbc0,#858979); }.art-two i { top:23%; height:68%; border-radius:28% 28% 16% 16%; }.art-three { background:linear-gradient(145deg,#c5d7d4,#829c9c); }
.generated-story { display:grid; grid-template-columns:1fr 1fr; gap:25px; padding:25px 28px; color:#eff2eb; background:#151b1c; }.generated-story small { color:var(--flow-lime); font-size:4px; letter-spacing:.16em; }.generated-story h3 { margin:8px 0 0; font-size:19px; letter-spacing:-.05em; line-height:.95; }.generated-story p { align-self:end; margin:0; color:#919b96; font-size:5px; line-height:1.7; }.generated-footer { display:flex; align-items:center; justify-content:space-between; min-height:66px; padding:0 22px; color:#eff2eb; background:#0e1211; }.generated-footer strong { font-size:9px; }.generated-footer span { color:#808982; font-size:4px; }.generated-footer em { color:var(--flow-lime); font-size:4px; font-style:normal; }
.assembly-scan { position:absolute; top:-5%; right:0; left:0; z-index:30; height:1px; background:var(--flow-lime); box-shadow:0 0 18px 3px var(--flow-lime); opacity:0; }.assembly-scan.is-scanning { animation:assembly-scan 1.5s ease-in-out; }

.generation-stage[data-process="intent"] .site-window,.generation-stage[data-process="dna"] .site-window,.generation-stage[data-process="structure"] .site-window { opacity:.27; filter:blur(1.8px); transform:translate(-50%,-50%) scale(.88); }.generation-stage[data-process="layout"] .site-window,.generation-stage[data-process="quality"] .site-window,.generation-stage[data-process="ready"] .site-window { opacity:.14; filter:blur(2px); transform:translate(-66%,-50%) scale(.72); }
.process-overlay { position:absolute; inset:0; z-index:40; visibility:hidden; opacity:0; pointer-events:none; transform:scale(.96); transition:opacity .6s ease,transform .7s var(--ease-out),visibility .6s ease; }.generation-stage[data-process="dna"] [data-overlay="dna"],.generation-stage[data-process="layout"] [data-overlay="layout"],.generation-stage[data-process="responsive"] [data-overlay="responsive"],.generation-stage[data-process="quality"] [data-overlay="quality"],.generation-stage[data-process="ready"] [data-overlay="ready"] { visibility:visible; opacity:1; transform:scale(1); }

.dna-cloud { position:absolute; top:50%; left:50%; width:280px; height:280px; border:1px solid rgba(200,255,61,.2); border-radius:50%; transform:translate(-50%,-50%); animation:spin 26s linear infinite; }.dna-cloud::before,.dna-cloud::after { position:absolute; top:50%; left:50%; border:1px dashed rgba(255,255,255,.12); border-radius:50%; content:""; transform:translate(-50%,-50%); }.dna-cloud::before { width:205px; height:205px; }.dna-cloud::after { width:360px; height:360px; }.dna-cloud > i { position:absolute; top:50%; left:50%; width:115px; height:115px; border-radius:37%; background:conic-gradient(var(--flow-violet),var(--flow-cyan),var(--flow-lime),var(--flow-violet)); box-shadow:0 0 70px rgba(123,104,255,.3); transform:translate(-50%,-50%) rotate(20deg); animation:spin-reverse 26s linear infinite; }.dna-cloud > strong,.dna-cloud > small { position:absolute; top:50%; left:50%; z-index:2; text-align:center; transform:translate(-50%,-50%); }.dna-cloud > strong { font-size:12px; letter-spacing:.12em; line-height:1.2; }.dna-cloud > small { margin-top:31px; font-size:5px; letter-spacing:.1em; }.dna-cloud > span { position:absolute; z-index:3; padding:7px 9px; border:1px solid rgba(255,255,255,.1); border-radius:100px; color:#8c96a2; background:rgba(7,10,15,.86); font-size:6px; animation:spin-reverse 26s linear infinite; }.dna-cloud > span:nth-child(1){top:-12px;left:42%}.dna-cloud > span:nth-child(2){top:46%;right:-30px}.dna-cloud > span:nth-child(3){bottom:-10px;left:42%}.dna-cloud > span:nth-child(4){top:45%;left:-28px}.brand-dna-overlay > p { position:absolute; bottom:10%; left:50%; display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid rgba(200,255,61,.14); border-radius:100px; color:#9aa3ae; background:rgba(7,10,15,.8); font-size:8px; transform:translateX(-50%); }.brand-dna-overlay > p i { width:5px; height:5px; border-radius:50%; background:var(--flow-lime); box-shadow:0 0 10px var(--flow-lime); animation:status-blink 1.5s infinite; }

.layout-blueprint { position:absolute; top:50%; left:53%; width:76%; padding:24px; border:1px solid rgba(255,255,255,.13); border-radius:21px; background:rgba(9,12,18,.88); box-shadow:0 28px 80px rgba(0,0,0,.38),0 0 70px rgba(123,104,255,.07); transform:translate(-50%,-50%); backdrop-filter:blur(20px); }.layout-blueprint > small { color:#7b73bd; font-size:7px; font-weight:800; letter-spacing:.17em; }.layout-blueprint > div { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:18px 0; }.layout-blueprint > div i { position:relative; display:grid; place-items:end start; height:185px; padding:10px; overflow:hidden; border-radius:13px; color:#dbe0dc; background:linear-gradient(145deg,#172126,#52615b); font-size:7px; font-style:normal; }.layout-blueprint > div i:nth-child(2){background:linear-gradient(145deg,#292637,#756e93)}.layout-blueprint > div i:nth-child(3){background:linear-gradient(145deg,#26301e,#7d914b)}.layout-blueprint > div i::before { position:absolute; top:14%; left:28%; width:44%; height:72%; border-radius:44% 44% 13% 13%; background:rgba(9,13,16,.72); content:""; }.layout-blueprint > strong { display:block; font-size:17px; }.layout-blueprint > span { display:block; margin-top:5px; color:#717b87; font-size:8px; }.layout-test-overlay > p { position:absolute; right:7%; bottom:6%; display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid rgba(255,156,112,.18); border-radius:100px; color:var(--flow-orange); background:rgba(8,11,16,.9); font-size:7px; }.layout-test-overlay > p i { font-style:normal; }

.ready-overlay { display:grid; place-items:center; }.ready-portal { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:78%; height:72%; overflow:hidden; border:1px solid rgba(200,255,61,.18); border-radius:28px; background:radial-gradient(circle at 50% 40%,rgba(200,255,61,.08),transparent 33%),rgba(8,11,17,.9); box-shadow:0 35px 100px rgba(0,0,0,.4),0 0 80px rgba(200,255,61,.05); text-align:center; }.ready-portal > i { position:absolute; width:330px; height:330px; border:1px solid rgba(200,255,61,.12); border-radius:50%; animation:spin 25s linear infinite; }.ready-portal > i:nth-child(2) { width:470px; height:470px; border-color:rgba(123,104,255,.12); border-style:dashed; animation-direction:reverse; animation-duration:36s; }.ready-portal .one-avatar { z-index:2; width:61px; height:61px; margin-bottom:23px; }.ready-portal small,.ready-portal strong,.ready-portal p { position:relative; z-index:2; }.ready-portal small { color:var(--flow-lime); font-size:7px; font-weight:800; letter-spacing:.19em; }.ready-portal strong { margin-top:13px; font-size:27px; font-weight:560; letter-spacing:-.05em; line-height:1.05; }.ready-portal p { margin:14px 0 0; color:#78828d; font-size:8px; }

.source-capsule,.result-capsule { position:absolute; top:50%; width:28%; min-width:150px; padding:13px; border:1px solid rgba(255,255,255,.12); border-radius:17px; background:rgba(13,17,25,.88); box-shadow:0 25px 60px rgba(0,0,0,.34); transform:translateY(-50%) rotate(-5deg); }.source-capsule { left:7%; }.result-capsule { right:6%; transform:translateY(-50%) rotate(5deg); }.source-capsule small,.result-capsule small { color:#66717e; font-size:5px; font-weight:800; letter-spacing:.15em; }.source-capsule > i,.result-capsule > i { position:relative; display:block; height:165px; margin:9px 0; overflow:hidden; border-radius:10px; background:linear-gradient(145deg,#cbd1c9,#718188); }.source-capsule > i::before,.result-capsule > i::before { position:absolute; top:17%; left:27%; width:46%; height:75%; border-radius:45% 45% 13% 13%; background:linear-gradient(145deg,#3c474a,#121719); content:""; }.result-capsule > i { background:linear-gradient(145deg,#b9d8cd,#314a52); }.source-capsule strong,.result-capsule strong { display:block; font-size:9px; }.source-capsule em,.result-capsule em { display:block; margin-top:4px; color:var(--flow-orange); font-size:6px; font-style:normal; }.result-capsule em { color:var(--flow-lime); }.pipeline-core { position:absolute; top:50%; left:50%; display:flex; flex-direction:column; align-items:center; gap:16px; transform:translate(-50%,-50%); }.pipeline-core::before { position:absolute; top:-31px; width:105px; height:105px; border:1px dashed rgba(123,104,255,.25); border-radius:50%; content:""; animation:spin 9s linear infinite; }.pipeline-core .one-avatar { width:39px; height:39px; }.pipeline-core small { color:#8a83c6; font-size:6px; }.pipeline-beam i { position:absolute; top:50%; left:34%; width:5px; height:5px; border-radius:50%; background:var(--flow-violet); box-shadow:0 0 12px var(--flow-violet); animation:pipeline-data 2s linear infinite; }.pipeline-beam i:nth-child(2){animation-delay:-.65s}.pipeline-beam i:nth-child(3){animation-delay:-1.3s}.product-pipeline-overlay > p { position:absolute; right:8%; bottom:7%; padding:8px 11px; border:1px solid rgba(255,156,112,.16); border-radius:100px; color:var(--flow-orange); background:rgba(8,11,16,.85); font-size:7px; }.product-pipeline-overlay > p i { margin-right:6px; font-style:normal; }

.generation-stage[data-process="responsive"] .site-window { left:33%; width:62%; height:76%; transform:translate(-50%,-50%) scale(.9); }.responsive-rings i { position:absolute; top:50%; right:11%; border:1px solid rgba(66,232,255,.15); border-radius:50%; transform:translate(50%,-50%); animation:responsive-wave 4s ease-out infinite; }.responsive-rings i:nth-child(1){width:120px;height:120px}.responsive-rings i:nth-child(2){width:230px;height:230px;animation-delay:-1.3s}.responsive-rings i:nth-child(3){width:350px;height:350px;animation-delay:-2.6s}.phone-preview { position:absolute; top:50%; right:10%; width:22%; min-width:145px; height:62%; padding:9px; overflow:hidden; border:6px solid #171a1e; border-radius:26px; color:#111511; background:#f1f2ec; box-shadow:0 28px 65px rgba(0,0,0,.42); transform:translateY(-50%) rotate(4deg); animation:phone-float 5s ease-in-out infinite; }.phone-preview header { display:flex; justify-content:space-between; height:8%; font-size:7px; }.phone-preview header em { font-style:normal; }.phone-art { position:relative; height:56%; overflow:hidden; background:linear-gradient(145deg,#14272c,#425d4b); }.phone-art::before { position:absolute; top:-22%; left:3%; width:94%; aspect-ratio:1; border:1px solid var(--flow-lime); border-radius:50%; content:""; }.phone-art i { position:absolute; right:28%; bottom:-14%; width:44%; height:82%; border-radius:45% 45% 12% 12%; background:#263134; }.phone-preview h3 { margin:11px 3px 8px; font-size:14px; line-height:.9; }.phone-preview button { margin-left:3px; padding:6px 8px; border:0; color:#101310; background:var(--flow-lime); font-size:5px; }.responsive-overlay > span { position:absolute; right:7%; bottom:8%; padding:8px 11px; border:1px solid rgba(66,232,255,.16); border-radius:100px; color:#a9cbd0; background:rgba(7,10,15,.83); font-size:7px; }.responsive-overlay > span i { margin-right:5px; color:var(--flow-cyan); font-style:normal; }

.domain-orbits i { position:absolute; top:50%; left:56%; border:1px solid rgba(200,255,61,.15); border-radius:50%; transform:translate(-50%,-50%); animation:domain-wave 4.5s ease-out infinite; }.domain-orbits i:nth-child(1){width:160px;height:160px}.domain-orbits i:nth-child(2){width:330px;height:330px;animation-delay:-1.5s}.domain-orbits i:nth-child(3){width:540px;height:540px;animation-delay:-3s}.domain-hologram { position:absolute; top:48%; left:55%; width:78%; padding:28px; border:1px solid rgba(255,255,255,.14); border-radius:20px; background:rgba(9,12,18,.84); box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 60px rgba(200,255,61,.06); transform:translate(-50%,-50%); backdrop-filter:blur(20px); }.domain-hologram > small { color:#697481; font-size:6px; font-weight:800; letter-spacing:.18em; }.domain-hologram h3 { margin:14px 0 17px; color:var(--flow-lime); font-size:clamp(24px,3.6vw,50px); font-weight:560; letter-spacing:-.06em; white-space:nowrap; }.domain-hologram h3 span,.domain-hologram h3 em { color:#646e7a; font-size:.28em; font-style:normal; letter-spacing:0; }.domain-hologram p { display:flex; align-items:center; gap:7px; margin:0; color:#89929e; font-size:7px; }.domain-hologram p i { width:6px; height:6px; border-radius:50%; background:var(--flow-lime); box-shadow:0 0 10px var(--flow-lime); }.domain-path { position:absolute; bottom:10%; left:55%; display:flex; align-items:center; justify-content:center; gap:12px; width:70%; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:12px; color:#68727e; background:rgba(9,12,17,.7); font-size:6px; letter-spacing:.12em; transform:translateX(-50%); }.domain-path i { color:var(--flow-lime); font-style:normal; }

.quality-overlay { display:flex; align-items:center; justify-content:center; gap:45px; }.quality-ring { position:relative; display:grid; place-items:center; width:210px; height:210px; border-radius:50%; background:conic-gradient(var(--flow-lime) 0 84%,rgba(255,255,255,.07) 84%); }.quality-ring::before { position:absolute; inset:8px; border-radius:50%; background:#0b0f15; content:""; }.quality-ring::after { position:absolute; inset:-30px; border:1px dashed rgba(200,255,61,.14); border-radius:50%; content:""; animation:spin 22s linear infinite; }.quality-ring span { position:relative; z-index:2; display:flex; align-items:baseline; }.quality-ring strong { font-size:50px; font-weight:540; letter-spacing:-.07em; }.quality-ring small { color:#737d89; font-size:9px; }.quality-list { min-width:225px; padding:20px; border:1px solid rgba(255,255,255,.1); border-radius:17px; background:rgba(12,16,23,.82); }.quality-list > small { color:#727c88; font-size:6px; font-weight:800; letter-spacing:.18em; }.quality-list p { display:flex; align-items:center; gap:8px; margin:13px 0; color:#b8c0c7; font-size:8px; }.quality-list p i { display:grid; place-items:center; width:18px; height:18px; border-radius:6px; color:#0b0e10; background:var(--flow-lime); font-style:normal; }.quality-list p.is-pending { color:var(--flow-orange); }.quality-list p.is-pending i { border:1px solid rgba(255,156,112,.25); color:var(--flow-orange); background:transparent; }

.growth-overlay svg { position:absolute; inset:4%; width:92%; height:92%; }.growth-overlay path { fill:none; stroke:url(#none); stroke:rgba(123,104,255,.35); stroke-dasharray:7 9; animation:flow-dash 7s linear infinite; }.growth-orb { position:absolute; top:48%; left:52%; display:flex; flex-direction:column; align-items:center; gap:5px; transform:translate(-50%,-50%); }.growth-orb::before,.growth-orb::after { position:absolute; top:50%; left:50%; width:125px; height:125px; border:1px solid rgba(123,104,255,.24); border-radius:50%; content:""; transform:translate(-50%,-50%); animation:spin 10s linear infinite; }.growth-orb::after { width:175px; height:175px; border-style:dashed; animation-direction:reverse; animation-duration:17s; }.growth-orb .one-avatar { z-index:2; width:54px; height:54px; }.growth-orb strong,.growth-orb small { position:relative; z-index:2; }.growth-orb strong { margin-top:9px; font-size:10px; }.growth-orb small { color:#746ca8; font-size:5px; letter-spacing:.13em; }.growth-signal { position:absolute; display:flex; align-items:center; gap:9px; min-width:140px; padding:11px; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(10,13,20,.82); box-shadow:0 17px 36px rgba(0,0,0,.27); animation:signal-float 5s ease-in-out infinite; }.growth-signal > i { display:grid; place-items:center; width:27px; height:27px; border:1px solid rgba(123,104,255,.3); border-radius:8px; color:#a99fff; font-size:6px; font-style:normal; }.growth-signal > span { display:flex; flex-direction:column; gap:3px; font-size:8px; }.growth-signal small { color:var(--flow-orange); font-size:5px; }.signal-a{top:13%;left:7%}.signal-b{top:18%;right:5%;animation-delay:-1.6s}.signal-c{bottom:17%;left:7%;animation-delay:-3.2s}.growth-gate { position:absolute; right:5%; bottom:9%; display:flex; align-items:center; gap:7px; padding:10px 12px; border:1px solid rgba(200,255,61,.16); border-radius:12px; color:#78828e; background:rgba(9,12,18,.86); font-size:6px; }.growth-gate i { color:#56606c; font-style:normal; }.growth-gate strong { color:var(--flow-lime); font-size:6px; }

.build-toast { position:absolute; top:16px; left:50%; z-index:80; display:flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid rgba(255,255,255,.1); border-radius:100px; color:#a7b0ba; background:rgba(7,10,15,.86); font-size:7px; opacity:0; transform:translate(-50%,-10px); backdrop-filter:blur(14px); }.build-toast.is-visible { animation:build-toast 2.1s ease both; }.build-toast i { width:5px; height:5px; border-radius:50%; background:var(--flow-lime); box-shadow:0 0 10px var(--flow-lime); }

.process-filmstrip { position:absolute; right:clamp(24px,4vw,70px); bottom:22px; left:clamp(24px,4vw,70px); z-index:60; padding-top:10px; }.filmstrip-progress { position:absolute; top:0; right:0; left:0; height:1px; background:rgba(255,255,255,.08); }.filmstrip-progress i { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--flow-violet),var(--flow-cyan),var(--flow-lime)); box-shadow:0 0 10px var(--flow-lime); transition:width .7s var(--ease-out); }.filmstrip-steps { display:grid; grid-template-columns:repeat(10,1fr); gap:6px; margin-top:9px; }.filmstrip-steps button { display:flex; flex-direction:column; gap:4px; min-width:0; padding:7px 8px; border:1px solid transparent; border-radius:10px; color:#4f5966; background:transparent; cursor:pointer; text-align:left; transition:all .3s ease; }.filmstrip-steps button i { color:#59636f; font-size:6px; font-style:normal; }.filmstrip-steps button strong { overflow:hidden; font-size:7px; font-weight:550; text-overflow:ellipsis; white-space:nowrap; }.filmstrip-steps button.is-done { color:#838d99; }.filmstrip-steps button.is-done i { color:var(--flow-lime); }.filmstrip-steps button.is-active { border-color:rgba(200,255,61,.18); color:#e5e9e2; background:rgba(200,255,61,.045); }.filmstrip-steps button.is-active i { color:var(--flow-lime); }

.decision-moment { position:absolute; right:clamp(28px,5vw,85px); bottom:103px; z-index:90; display:flex; align-items:center; gap:12px; width:min(650px,calc(100% - 56px)); padding:12px 13px; border:1px solid rgba(200,255,61,.26); border-radius:18px; background:rgba(11,15,21,.92); box-shadow:0 24px 70px rgba(0,0,0,.42),0 0 40px rgba(200,255,61,.05); visibility:hidden; opacity:0; transform:translateY(15px); backdrop-filter:blur(24px); transition:all .45s var(--ease-out); }.decision-moment.is-visible { visibility:visible; opacity:1; transform:translateY(0); }.decision-moment > div { display:flex; flex:1; flex-direction:column; gap:3px; }.decision-moment small { color:var(--flow-lime); font-size:6px; font-weight:800; letter-spacing:.13em; }.decision-moment strong { font-size:10px; }.decision-moment p { margin:0; color:#717b88; font-size:7px; }.decision-moment p em { color:var(--flow-lime); font-style:normal; }.decision-moment button { height:34px; padding:0 11px; border:1px solid rgba(255,255,255,.1); border-radius:10px; color:#9ba4af; background:rgba(255,255,255,.03); cursor:pointer; font-size:7px; }.decision-moment button:last-child { border-color:var(--flow-lime); color:#0b0e10; background:var(--flow-lime); font-weight:800; }

.view-result-button { position:absolute; right:clamp(28px,5vw,85px); bottom:105px; z-index:90; display:flex; align-items:center; gap:15px; height:48px; padding:0 8px 0 18px; border:0; border-radius:100px; color:#090c0e; background:var(--flow-lime); box-shadow:0 20px 55px rgba(200,255,61,.15); cursor:pointer; font-size:9px; font-weight:800; visibility:hidden; opacity:0; transform:translateY(15px); transition:all .45s var(--ease-out); }.view-result-button.is-visible { visibility:visible; opacity:1; transform:translateY(0); }.view-result-button i { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:var(--flow-lime); background:#0a0e10; font-style:normal; }

.result-stage { position:relative; place-items:center; min-height:100svh; padding:110px 28px 50px; overflow:auto; }.result-stage.is-active { display:grid; }.result-rings { position:absolute; top:50%; left:50%; width:min(85vw,950px); aspect-ratio:1; transform:translate(-50%,-50%); }.result-rings i { position:absolute; top:50%; left:50%; border:1px solid rgba(255,255,255,.07); border-radius:50%; transform:translate(-50%,-50%); }.result-rings i:nth-child(1){width:100%;height:100%;border-style:dashed;animation:spin 60s linear infinite}.result-rings i:nth-child(2){width:72%;height:72%;border-color:rgba(200,255,61,.1);animation:spin-reverse 42s linear infinite}.result-rings i:nth-child(3){width:42%;height:42%;border-color:rgba(123,104,255,.14)}
.result-content { position:relative; z-index:4; display:flex; flex-direction:column; align-items:center; width:min(100%,1200px); text-align:center; }.result-avatar { width:56px; height:56px; margin-bottom:22px; }.result-content .flow-kicker { justify-content:center; }.result-content h1 { margin:24px 0 18px; font-size:clamp(43px,5.4vw,78px); font-weight:560; letter-spacing:-.065em; line-height:1.08; }.result-content h1 span { color:var(--flow-lime); }.result-content > p { max-width:720px; margin:0; color:#8b95a1; font-size:13px; line-height:1.8; }
.result-chain { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; width:100%; margin:40px 0 27px; }.result-chain article { display:grid; grid-template-columns:28px 1fr; min-height:118px; padding:15px; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:rgba(255,255,255,.025); text-align:left; backdrop-filter:blur(14px); }.result-chain article > i { color:var(--flow-lime); font-size:7px; font-style:normal; }.result-chain article > span { display:flex; flex-direction:column; }.result-chain small { color:#68727f; font-size:6px; font-weight:800; letter-spacing:.14em; }.result-chain strong { margin-top:6px; font-size:10px; }.result-chain em { margin-top:5px; color:#727c88; font-size:7px; font-style:normal; line-height:1.5; }.result-chain b { grid-column:2; align-self:end; width:max-content; margin-top:10px; padding:4px 6px; border:1px solid rgba(255,156,112,.15); border-radius:100px; color:var(--flow-orange); font-size:6px; font-weight:550; }.result-chain b.is-ready { border-color:rgba(200,255,61,.15); color:var(--flow-lime); }
.result-actions { display:flex; gap:9px; }.result-actions button,.result-actions a { display:flex; align-items:center; justify-content:center; min-width:158px; height:46px; padding:0 15px; border:1px solid rgba(255,255,255,.1); border-radius:100px; color:#929ca7; background:rgba(255,255,255,.025); cursor:pointer; font-size:10px; }.result-actions a { gap:12px; }.result-actions .result-open-site { border-color:var(--flow-lime); color:#0a0d0f; background:var(--flow-lime); font-weight:800; }.result-actions .result-next-task { border-color:rgba(66,232,255,.24); color:var(--flow-cyan); background:rgba(66,232,255,.045); }

@keyframes flow-ambient-drift { from{transform:translate3d(-4%,-3%,0) scale(.92)}to{transform:translate3d(8%,6%,0) scale(1.12)} }
@keyframes flow-stage-in { from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)} }
@keyframes build-stage-in { from{opacity:0}to{opacity:1} }
@keyframes flow-stage-out { to{opacity:0;transform:scale(1.015);filter:blur(5px)} }
@keyframes flow-reveal { to{opacity:1;transform:translateY(0)} }
@keyframes brief-choice-change { 0%{opacity:0;transform:translateY(7px)}100%{opacity:1;transform:none} }
@keyframes signal-wave { 0%,100%{transform:scaleY(.55);opacity:.5}50%{transform:scaleY(1.2);opacity:1} }
@keyframes flow-dash { to{stroke-dashoffset:-100} }
@keyframes process-change { 0%{opacity:.2;transform:translateY(12px)}100%{opacity:1;transform:none} }
@keyframes skeleton-flow { to{background-position:-200% 0} }
@keyframes module-flash { 0%{opacity:0}30%{opacity:1}100%{opacity:0} }
@keyframes assembly-scan { 0%{top:-5%;opacity:0}15%{opacity:.85}85%{opacity:.85}100%{top:105%;opacity:0} }
@keyframes pipeline-data { 0%{left:32%;opacity:0;transform:translateY(-12px)}25%{opacity:1}60%{transform:translateY(10px)}100%{left:68%;opacity:0;transform:translateY(-2px)} }
@keyframes responsive-wave { 0%{opacity:.6;transform:translate(50%,-50%) scale(.72)}100%{opacity:0;transform:translate(50%,-50%) scale(1.18)} }
@keyframes phone-float { 0%,100%{transform:translateY(-52%) rotate(4deg)}50%{transform:translateY(-48%) rotate(1deg)} }
@keyframes build-toast { 0%{opacity:0;transform:translate(-50%,-10px)}15%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,8px)} }

@media (max-width: 1120px) {
  .brief-stage__content { grid-template-columns: minmax(420px,1fr) minmax(390px,.82fr); gap:35px; padding-inline:35px; }
  .brief-copy h1 { font-size:55px; }
  .living-brief { min-height:590px; }
  .build-stage { grid-template-columns:minmax(285px,.58fr) minmax(540px,1.42fr); gap:25px; padding-inline:28px; }
  .process-heading h1 { font-size:36px; }.process-heading { min-height:255px; }
  .filmstrip-steps button { padding-inline:5px; }
}

@media (max-width: 820px) {
  .flow-body { overflow:auto; }
  .flow-header { height:66px; grid-template-columns:1fr auto; padding-inline:18px; }.flow-header .logo { margin-left:34px; }.flow-header__center { display:none; }.flow-header__actions > span { display:none; }.flow-header__actions button { width:34px; padding:0; overflow:hidden; color:transparent; }.flow-header__actions button::after { color:#9ca5af; content:"↻"; }
  .brief-stage__content { grid-template-columns:1fr; align-items:start; gap:38px; min-height:auto; padding:105px 20px 60px; }.brief-copy { max-width:none; }.brief-copy h1 { font-size:clamp(43px,11vw,66px); }.living-brief { width:100%; min-height:610px; }
  .build-stage { height:auto; min-height:100svh; overflow:auto; }.build-stage.is-active { display:flex; flex-direction:column; gap:25px; padding:92px 18px 118px; }.build-story { width:100%; max-width:none; }.process-heading { min-height:0; }.process-heading h1 { font-size:42px; }.process-heading > p { margin-top:17px; }.agent-narration { margin-top:22px; }.process-evidence { margin-bottom:12px; }.generation-stage { width:100%; height:560px; min-height:560px; }.process-filmstrip { position:fixed; right:0; bottom:0; left:0; z-index:120; padding:9px 12px 11px; background:rgba(6,8,13,.88); backdrop-filter:blur(20px); }.filmstrip-steps { display:flex; overflow-x:auto; scrollbar-width:none; }.filmstrip-steps::-webkit-scrollbar{display:none}.filmstrip-steps button { flex:0 0 78px; }.decision-moment { position:fixed; right:14px; bottom:82px; left:14px; width:auto; }.view-result-button { position:fixed; right:18px; bottom:84px; }
  .result-chain { grid-template-columns:repeat(2,1fr); }.result-chain article:last-child { grid-column:1 / 3; }.result-stage { padding-top:100px; }
}

@media (max-width: 900px) {
  .flow-header { height:66px; }
}

@media (max-width: 520px) {
  .flow-header .logo small { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .flow-header__actions {
    display: flex;
    position: fixed;
    top: 74px;
    right: 12px;
    z-index: 250;
  }
  .flow-header__actions > span,
  .flow-header__actions #restart-flow-top { display: none; }
  .flow-header__actions .flow-global-reset {
    display: block;
    width: auto;
    height: 28px;
    padding: 0 9px;
    overflow: visible;
    font-size: 8px;
  }
  .flow-kicker { font-size:7px; }.flow-kicker > i { width:24px; }.brief-copy h1 { margin-top:25px; font-size:44px; }.brief-copy > p { font-size:12px; }.incoming-idea strong { font-size:10px; }.incoming-idea > em { display:none; }
  .brief-choices { grid-template-columns:1fr; }.brief-choice { min-height:78px; }.brief-choice > strong { min-height:0; margin-top:9px; }.brief-choice > b { right:13px; bottom:14px; left:auto; }.brief-action-row { align-items:flex-start; flex-direction:column; }.flow-primary-button { width:100%; justify-content:space-between; }
  .living-brief { min-height:585px; padding:18px; }.brief-facts > div { grid-template-columns:72px 1fr auto; }.page-map { height:150px; }
  .build-stage.is-active { padding-inline:14px; }.process-heading h1 { font-size:36px; }.process-heading > p { font-size:11px; line-height:1.7; }.agent-narration strong { font-size:9px; }.process-evidence span { font-size:6px; }.build-controls button span { display:none; }.build-controls button { width:38px; justify-content:center; }.build-controls button:last-child { width:auto; margin-left:0; }.build-controls button:last-child span { display:inline; }
  .generation-stage { height:440px; min-height:440px; border-radius:23px; }.site-window { width:94%; height:78%; }.generated-hero { height:230px; }.generated-hero__copy { padding-top:32px; }.generated-hero__copy h2 { font-size:25px; }.generated-product-art { height:90px; }
  .dna-cloud { transform:translate(-50%,-50%) scale(.72); }.source-capsule,.result-capsule { min-width:108px; width:34%; padding:8px; }.source-capsule{left:2%}.result-capsule{right:2%}.source-capsule > i,.result-capsule > i { height:115px; }.pipeline-core { transform:translate(-50%,-50%) scale(.72); }.product-pipeline-overlay > p { right:2%; bottom:5%; font-size:6px; }
  .layout-blueprint { left:50%; width:92%; padding:14px; }.layout-blueprint > div { gap:5px; margin:12px 0; }.layout-blueprint > div i { height:130px; }.layout-test-overlay > p { right:3%; bottom:4%; left:3%; justify-content:center; border-radius:12px; text-align:center; }.ready-portal { width:92%; height:78%; }.ready-portal strong { font-size:22px; }.ready-portal p { max-width:80%; line-height:1.5; }
  .generation-stage[data-process="responsive"] .site-window { left:31%; width:58%; }.phone-preview { right:3%; min-width:118px; height:64%; }.responsive-overlay > span { right:2%; bottom:4%; }
  .domain-hologram { left:50%; width:92%; padding:20px 14px; }.domain-hologram h3 { font-size:28px; }.domain-path { left:50%; width:88%; }
  .quality-overlay { gap:18px; }.quality-ring { width:130px; height:130px; }.quality-ring strong { font-size:34px; }.quality-list { min-width:165px; padding:13px; }.quality-list p { margin:9px 0; font-size:6px; }
  .growth-signal { min-width:103px; padding:7px; }.growth-signal > i { width:22px; height:22px; }.signal-a{left:2%}.signal-b{right:2%}.signal-c{left:2%;bottom:20%}.growth-gate { right:2%; bottom:7%; max-width:190px; flex-wrap:wrap; }.growth-orb { transform:translate(-50%,-50%) scale(.76); }
  .decision-moment { flex-wrap:wrap; }.decision-moment > div { min-width:190px; }.decision-moment button { flex:1; }.decision-moment > .one-avatar { display:none; }
  .result-content h1 { font-size:39px; }.result-content > p { font-size:11px; }.result-chain { grid-template-columns:1fr; gap:7px; }.result-chain article:last-child { grid-column:auto; }.result-chain article { min-height:90px; }.result-actions { width:100%; flex-direction:column; }.result-actions button,.result-actions a { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-reveal { opacity:1; transform:none; }
}

/* Rich merchant brief: decisions are visible at once instead of cycling through one label. */
.brief-stage__content { grid-template-columns:minmax(610px,1.12fr) minmax(450px,.88fr); gap:clamp(34px,4vw,72px); padding-top:96px; padding-bottom:32px; }
.brief-copy { max-width:790px; }
.brief-copy h1 { margin:20px 0 13px; font-size:clamp(43px,4.15vw,66px); }
.brief-copy > p { margin-bottom:16px; font-size:12px; line-height:1.7; }
.incoming-idea { padding-block:9px; }
.brief-command-board { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.brief-field { min-width:0; padding:10px; border:1px solid rgba(255,255,255,.075); border-radius:13px; background:rgba(255,255,255,.018); transition:border-color .3s ease,background .3s ease; }
.brief-field:hover { border-color:rgba(200,255,61,.13); background:rgba(200,255,61,.018); }
.brief-field--wide { grid-column:1/3; }
.brief-field header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.brief-field header > span { display:flex; align-items:center; gap:7px; }
.brief-field header i { display:grid; place-items:center; width:20px; height:20px; border:1px solid rgba(123,104,255,.22); border-radius:6px; color:#9187e2; font-size:6px; font-style:normal; }
.brief-field header strong { color:#b9c0c9; font-size:9px; font-weight:650; }
.brief-field header small { color:#59636f; font-size:6px; text-align:right; }
.brief-options { display:flex; flex-wrap:wrap; gap:5px; }
.brief-options button { min-height:27px; padding:0 9px; border:1px solid rgba(255,255,255,.075); border-radius:8px; color:#6c7682; background:rgba(7,10,15,.58); cursor:pointer; font-size:7px; transition:all .25s var(--ease-out); }
.brief-options button:hover { border-color:rgba(66,232,255,.2); color:#bfc7cf; transform:translateY(-1px); }
.brief-options button.is-selected { border-color:rgba(200,255,61,.32); color:#0b0f0d; background:var(--flow-lime); box-shadow:0 8px 24px rgba(200,255,61,.08); font-weight:800; }
.brief-options--compact button { min-height:25px; padding-inline:7px; }
.brief-action-row { margin-top:11px; }
.flow-primary-button { height:51px; border-radius:14px; }
.brief-action-row > small b { color:#a5ad9d; font-weight:750; }
.living-brief { min-height:620px; padding:20px; }
.brief-signal { margin-top:13px; padding-block:13px; }
.brief-signal > strong { margin:6px 0 8px; }
.brief-signal > strong.is-changing { animation:brief-choice-change .45s var(--ease-out); }
.signal-wave { height:18px; }
.brief-facts > div { min-height:43px; }
.brief-output-map { position:relative; margin-top:13px; }
.brief-output-map > small { color:#65707d; font-size:7px; letter-spacing:.1em; }
.brief-output-map > div { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:8px 0 11px; }
.brief-output-map span { display:grid; grid-template-columns:22px 1fr; align-items:center; gap:7px; min-height:46px; padding:7px; border:1px solid rgba(255,255,255,.065); border-radius:10px; background:rgba(7,10,15,.5); }
.brief-output-map span > i { grid-row:1/3; display:grid; place-items:center; width:21px; height:21px; border:1px solid rgba(200,255,61,.16); border-radius:7px; color:var(--flow-lime); font-size:6px; font-style:normal; }
.brief-output-map b { font-size:8px; font-weight:620; }
.brief-output-map em { color:#5e6874; font-size:6px; font-style:normal; }

.generated-hero__art > img { position:absolute; z-index:2; right:8%; bottom:-16%; width:78%; height:112%; object-fit:contain; filter:drop-shadow(0 18px 26px rgba(0,0,0,.24)); transform:rotate(-3deg); }
.generated-hero__art > i { opacity:.18; }
.generated-product-grid { grid-template-columns:repeat(4,1fr); }
.generated-product-art { height:116px; background:#cbd5ce; }
.generated-product-art::before,.generated-product-art i { display:none; }
.generated-product-art img { width:100%; height:100%; object-fit:cover; transition:transform .45s var(--ease-out); }
.generated-product-grid article:hover img { transform:scale(1.05); }
.phone-product-art { height:48%; margin:2px -2px 0; overflow:hidden; background:#cbdeda; }
.phone-product-art img { width:100%; height:100%; object-fit:cover; }
.phone-preview > small { display:block; margin:7px 3px 3px; color:#6f7872; font-size:4px; font-weight:800; letter-spacing:.1em; }
.phone-preview h3 { margin:0 3px 2px; font-size:10px; line-height:1; }
.phone-preview > p { margin:0 3px 6px; color:#687269; font-size:5px; }
.phone-buy-row { display:flex; align-items:center; gap:4px; margin-inline:3px; }
.phone-buy-row button { flex:1; margin:0; }
.phone-buy-row > i { display:grid; place-items:center; width:24px; height:22px; color:var(--flow-lime); background:#111511; font-size:7px; font-style:normal; }

@media (max-width:1120px) {
  .brief-stage__content { grid-template-columns:minmax(500px,1fr) minmax(390px,.78fr); padding-inline:28px; }
  .brief-copy h1 { font-size:48px; }
  .living-brief { min-height:610px; }
}

@media (max-width:920px) {
  .brief-stage__content { grid-template-columns:1fr; padding-top:100px; }
  .brief-copy { max-width:none; }
  .living-brief { width:100%; }
}

@media (max-width:520px) {
  .brief-copy h1 { margin-top:20px; font-size:39px; }
  .brief-command-board { grid-template-columns:1fr; }
  .brief-field--wide { grid-column:auto; }
  .brief-field header { align-items:flex-start; }
  .brief-options { flex-wrap:nowrap; overflow-x:auto; padding-bottom:3px; scrollbar-width:none; }
  .brief-options::-webkit-scrollbar { display:none; }
  .brief-options button { flex:0 0 auto; min-height:30px; }
  .brief-action-row { gap:9px; }
  .living-brief { min-height:auto; }
  .brief-output-map > div { grid-template-columns:1fr; }
  .brief-facts > div { grid-template-columns:72px 1fr; padding-block:5px; }
  .brief-facts em { display:none; }
  .generated-product-grid { grid-template-columns:repeat(2,1fr); }
  .generated-product-art { height:92px; }
  .phone-preview { min-width:125px; }
}