/* 六步空间设计：本地预览，独立于线上旧版服务文案。 */
.brilean-trial #serviceFlow{--flow-accent:#f0ff66;--flow-bg:#191918;background:var(--flow-bg);color:#fff}
.brilean-trial #process.design-process{padding:0;position:relative;background:var(--flow-bg);min-height:100svh}
.flow-stage{position:relative;min-height:100svh;box-sizing:border-box;padding:clamp(110px,13vh,155px) var(--stage-pad) 60px;display:grid;grid-template-columns:34% 1fr;gap:5%}
.flow-label{align-self:start;justify-self:start;background:#515150;color:#fff;padding:4px 9px;font:400 12px/1.5 var(--tail-serif)}
.flow-timeline{position:relative;align-self:start;max-width:720px;padding-left:64px;border-left:1px solid #4a4a45}
.flow-progress{position:absolute;left:-1px;top:0;width:1px;height:var(--flow-progress,28px);background:var(--flow-accent);transition:height .2s ease-out}
.flow-step{position:relative}
.flow-toggle{display:block;width:100%;padding:7px 0;border:0;background:none;text-align:left;color:#777771;cursor:pointer;font:400 clamp(28px,2.8vw,42px)/1.35 var(--tail-serif);letter-spacing:-.025em;transition:color .45s}
.flow-toggle:hover{color:#c9c9c1}
.flow-toggle:focus-visible{outline:1px solid var(--flow-accent);outline-offset:5px}
.flow-index{position:absolute;left:-112px;top:26px;font:400 12px/1 var(--tail-sans);color:#777771;letter-spacing:0;transition:color .5s}
.flow-index:after{content:"";position:absolute;left:45px;top:3px;width:6px;height:6px;border-radius:50%;background:#666660;transition:background .5s}
.flow-step.is-active .flow-toggle{color:#fff}
.flow-step.is-active .flow-index,.flow-step.is-past .flow-index{color:#d5d5cb}
.flow-step.is-active .flow-index:after,.flow-step.is-past .flow-index:after{background:var(--flow-accent)}
.flow-panel{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .7s cubic-bezier(.22,1,.36,1),opacity .4s,visibility .7s}
.flow-step.is-active .flow-panel{grid-template-rows:1fr;opacity:1;visibility:visible}
.flow-panel-inner{overflow:hidden;min-height:0}
.flow-copy{max-width:600px;margin:8px 0 0;color:#fff;font:400 clamp(14px,1vw,17px)/1.85 var(--tail-serif)}
.flow-art{display:block;width:min(100%,510px);height:clamp(205px,25vh,270px);margin:22px 0 30px;overflow:visible;color:var(--flow-accent);fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.flow-art .quiet{opacity:.38}.flow-art .surface{fill:currentColor;fill-opacity:.065;stroke:none}
.flow-art .dot{fill:currentColor;stroke:none}
.flow-art .trace{stroke-dasharray:1;stroke-dashoffset:0;animation:flow-draw 6s cubic-bezier(.45,0,.2,1) infinite}
.flow-art .late{animation-delay:.65s}.flow-art .later{animation-delay:1.3s}
.flow-art .scan{animation:flow-scan 6s cubic-bezier(.45,0,.2,1) infinite}
.flow-art .settle{animation:flow-settle 6s cubic-bezier(.45,0,.2,1) infinite}
.flow-art .light{animation:flow-light 6s ease-in-out infinite}
.flow-art *{animation-play-state:paused!important}
.design-process.is-visible .flow-step.is-active .flow-art *{animation-play-state:running!important}
@keyframes flow-draw{0%,8%{stroke-dashoffset:1;opacity:.4}42%,78%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.55}}
@keyframes flow-scan{0%,8%{transform:translateX(0);opacity:0}16%{opacity:1}72%{transform:translateX(220px);opacity:1}88%,100%{transform:translateX(220px);opacity:0}}
@keyframes flow-settle{0%,8%{transform:translate(18px,-12px);opacity:.12}48%,80%{transform:translate(0,0);opacity:1}100%{transform:translate(0,0);opacity:.12}}
@keyframes flow-light{0%,12%,100%{opacity:.12}45%,75%{opacity:1}}
@media(max-height:760px) and (min-width:761px){.flow-stage{padding-top:95px;min-height:580px}.flow-toggle{font-size:28px;padding:7px 0}.flow-index{top:20px}.flow-art{height:180px;margin:12px 0 18px}.flow-copy{font-size:14px}}
@media(max-width:760px){.brilean-trial #process.design-process{min-height:0}.flow-stage{min-height:0;display:block;padding:70px 25px 70px}.flow-label{display:inline-block;margin-bottom:50px}.flow-timeline{margin-left:33px;padding-left:27px}.flow-toggle{font-size:28px}.flow-index{left:-61px;top:24px;font-size:10px}.flow-index:after{left:31px}.flow-copy{font-size:13px;max-width:360px}.flow-art{height:auto;aspect-ratio:290/195;margin:22px 0 44px}.flow-progress{display:none}}
@media(prefers-reduced-motion:reduce){.flow-panel,.flow-progress,.flow-toggle{transition:none}.flow-art *{animation:none!important}}

/* 标头 Z 与当前节点一起移动。位置由同一进度值驱动。 */
.flow-pointer{position:absolute;left:-210px;top:-13px;display:flex;align-items:center;gap:0;width:145px;height:26px;transform:translate3d(0,var(--flow-progress,28px),0);transition:transform .2s ease-out;will-change:transform;pointer-events:none}
.flow-pointer svg{width:26px;height:26px;flex:none;background:var(--flow-accent);border-radius:2px;padding:5px;box-sizing:border-box}.flow-pointer i{display:block;height:1px;flex:1;background:var(--flow-accent)}
.plan-partition{animation:plan-partition 7s ease-in-out infinite}
.plan-furniture{animation:plan-furniture 9s ease-in-out infinite}
.plan-route{stroke-dasharray:1;animation:plan-route 9s ease-in-out infinite}
.plan-walker{offset-path:path('M235 168V143Q235 138 230 138H136Q126 138 126 128V98Q126 87 137 87H202Q214 87 214 99V126Q214 138 202 138H230Q235 138 235 143V168');animation:plan-walk 9s linear infinite}
@keyframes plan-partition{0%,8%{transform:translateX(15px)}38%,85%{transform:translateX(0)}100%{transform:translateX(15px)}}
@keyframes plan-furniture{0%,8%{transform:translateY(9px);opacity:.45}38%,85%{transform:translateY(0);opacity:1}100%{transform:translateY(9px);opacity:.45}}
@keyframes plan-route{0%,34%{stroke-dashoffset:1;opacity:0}42%{opacity:.6}80%,88%{stroke-dashoffset:0;opacity:.6}100%{stroke-dashoffset:0;opacity:0}}
@keyframes plan-walk{0%,38%{offset-distance:0%;opacity:0}42%{opacity:1}80%{offset-distance:100%;opacity:1}90%,100%{offset-distance:100%;opacity:0}}
.follow-lens{animation:follow-inspect 8s cubic-bezier(.4,0,.2,1) infinite}
.follow-correct{animation:follow-correct 8s ease-in-out infinite}
.follow-check{animation:follow-confirm 8s ease-in-out infinite}.check-two{animation-delay:1.8s}.check-three{animation-delay:3.6s}
@keyframes follow-inspect{0%,7%{transform:translate(145px,70px);opacity:0}12%,25%{transform:translate(145px,70px);opacity:1}42%,48%{transform:translate(272px,70px);opacity:1}65%,73%{transform:translate(272px,128px);opacity:1}83%,100%{transform:translate(272px,128px);opacity:0}}
@keyframes follow-correct{0%,28%{transform:translate(6px,-5px);opacity:.45}44%,90%{transform:translate(0,0);opacity:1}100%{transform:translate(6px,-5px);opacity:.45}}
@keyframes follow-confirm{0%,17%{opacity:.12}26%,72%{opacity:1}95%,100%{opacity:.12}}
@media(max-width:1100px) and (min-width:761px){.flow-pointer{left:-150px;width:85px}}
@media(max-width:760px){.flow-pointer{left:-45px;width:34px;height:22px;top:-11px;gap:0}.flow-pointer svg{width:22px;height:22px}.flow-pointer i{min-width:9px}.flow-copy{color:#fff}.flow-toggle{padding:10px 0}.flow-index{left:-18px;top:25px;font-size:9px;transform:translateX(-100%);opacity:.7}.flow-index:after{display:none}}
@media(prefers-reduced-motion:reduce){.flow-pointer{transition:none}.plan-walker{display:none}.follow-lens{display:none}}

@media(min-width:761px){.flow-art{transform:scale(1.14);transform-origin:50% 50%}}