.v4-doc .flow{margin:0;padding:0;list-style:none}.v4-doc .flow-step{gap:20px;padding:0 0 clamp(48px,6vw,80px) 28px;display:grid;position:relative}.v4-doc .flow-step:before{content:"";background:#111a1433;width:1px;position:absolute;top:8px;bottom:-8px;left:0}.v4-doc .flow-step:last-child:before{background:linear-gradient(#111a1433,#0000);height:120px;bottom:auto}.v4-doc .flow-step:after{content:"";background:var(--green);border-radius:50%;width:7px;height:7px;position:absolute;top:6px;left:-3px}.v4-doc .flow-text h2{letter-spacing:-.02em;color:var(--ink);margin:14px 0 0;font-size:clamp(30px,3.6vw,54px);font-weight:900;line-height:1.2}.v4-doc .flow-text p{max-width:26em;color:var(--muted);margin:18px 0 0;font-size:16px;line-height:1.9}.v4-doc .flow-points{border-top:1px solid var(--line);max-width:30em;margin:24px 0 0}.v4-doc .flow-points>div{border-bottom:1px solid var(--line);padding:16px 0 18px}.v4-doc .flow-points dt{color:var(--ink);font-size:17px;font-weight:800;line-height:1.5}.v4-doc .flow-points dd{color:var(--muted);margin:6px 0 0;font-size:15px;line-height:1.85}.v4-doc .flow-text .more{margin-top:16px}.v4-doc .flow-art{justify-self:center;width:100%;max-width:420px;height:auto}.v4-doc .flow-stage{display:none}@media (min-width:900px){.v4-doc .flow-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;display:grid}.v4-doc .flow-art{display:none}.v4-doc .flow-step{align-content:start;min-height:70vh;padding-bottom:0}.v4-doc .flow-text{opacity:.28;transition:opacity .5s,translate .7s cubic-bezier(.2,.7,.2,1);translate:0 12px}.v4-doc .flow-step[data-on] .flow-text{opacity:1;translate:0}.v4-doc .flow-stage{height:calc(100vh - 64px);display:block;position:sticky;top:64px}.v4-doc .stage-box{height:100%;position:relative}.v4-doc .stage-num{font-family:var(--mono);letter-spacing:-.04em;color:#0000;-webkit-text-stroke:1px #111a1429;font-size:clamp(160px,18vw,260px);font-weight:700;line-height:1;animation:.9s cubic-bezier(.2,.7,.2,1) both flow-num-in;position:absolute;top:8%;right:0}.v4-doc .stage-floor,.v4-doc .stage-ring{aspect-ratio:3;border-radius:50%;width:78%;position:absolute;top:66%;left:50%;translate:-50% -50%}.v4-doc .stage-floor{background:radial-gradient(closest-side,#111a1424,#0000);box-shadow:inset 0 0 0 1px #111a141a}.v4-doc .stage-ring{box-shadow:inset 0 0 0 2px var(--green);opacity:0;animation:1.1s ease-out both flow-ring}.v4-doc .stage-art{width:min(86%,520px);transition:opacity .5s,translate .9s cubic-bezier(.34,1.4,.64,1),rotate .9s cubic-bezier(.34,1.4,.64,1),scale .9s cubic-bezier(.34,1.4,.64,1);position:absolute;top:46%;left:50%;translate:-50% -50%}.v4-doc .stage-art img{width:100%;height:auto;display:block}.v4-doc .stage-art[data-state=next]{opacity:0;translate:-50%;rotate:-6deg;scale:.9}.v4-doc .stage-art[data-state=past]{opacity:0;transition-duration:.5s;translate:-50% -90%;rotate:4deg;scale:.92}.v4-doc .stage-art[data-state=on] img{animation:6s ease-in-out .9s infinite doc-float}.v4-doc .stage-ticks{gap:8px;margin:0;padding:0;list-style:none;display:flex;position:absolute;bottom:7%;left:50%;translate:-50%}.v4-doc .stage-ticks li{background:#111a1424;border-radius:2px;width:22px;height:3px;transition:width .5s cubic-bezier(.2,.7,.2,1),background-color .5s}.v4-doc .stage-ticks li[data-on]{background:var(--green);width:40px}}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){.v4-doc .flow-step{view-timeline:--flow-step}.v4-doc .flow-step:before{background:linear-gradient(var(--green), var(--green)) top / 1px 0% no-repeat, #111a1433;animation:linear both flow-line;animation-timeline:--flow-step;animation-range:contain exit 50%}.v4-doc .flow-step:last-child:before{background:linear-gradient(var(--green), transparent) top / 1px 0% no-repeat, linear-gradient(#111a1433, transparent)}.v4-doc .flow-step:after{animation:linear both flow-dot;animation-timeline:--flow-step;animation-range:entry 50% contain 20%}}}@media (prefers-reduced-motion:reduce){.v4-doc .flow-text,.v4-doc .stage-art,.v4-doc .stage-ticks li{transition:none}.v4-doc .stage-num,.v4-doc .stage-ring,.v4-doc .stage-art img{animation:none}}@keyframes flow-line{to{background-size:1px 100%,auto}}@keyframes flow-dot{0%{scale:0;box-shadow:0 0 #2f6b3e80}60%{scale:1.8;box-shadow:0 0 0 6px #2f6b3e40}to{scale:1;box-shadow:0 0 0 16px #2f6b3e00}}@keyframes flow-num-in{0%{opacity:0;translate:0 40px}}@keyframes flow-ring{0%{opacity:.7;scale:.7}to{opacity:0;scale:1.25}}
