.auto{position:relative;width:100vw;margin:48px 0 48px calc(50% - 50vw);background:#0D0E13;color:#F4F6F8}
.auto__stick{position:relative;padding:72px 20px 56px}
.auto__part{--p:.75;position:relative}
.auto__part+.auto__part{margin-top:56px}
.auto__fb{position:relative;height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px}
.auto__fb--g{display:grid;place-items:center;gap:0}
.net__r{display:block;width:min(78vw,420px);height:14px;background:radial-gradient(circle at 50% 50%,rgba(90,196,148,calc(.3 + var(--p) * .7)) 0 4px,transparent 5px) 0 50%/16.666% 100% repeat-x;transform:translateX(calc((1 - var(--p)) * (var(--i) - 1.5) * 26px))}
.net__beam{position:absolute;left:50%;top:50%;width:2px;height:calc(var(--p) * 280px);margin-top:calc(var(--p) * -140px);transform:translateX(-50%);border-radius:2px;background:linear-gradient(#5AC494,#FFC857);opacity:.8}
.flow__g{grid-area:1/1;width:calc((var(--i) + 1) * 46px + var(--p) * 70px);aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,200,87,calc(.95 - var(--i) * .15));box-shadow:0 0 18px rgba(90,196,148,.22),0 0 18px rgba(90,196,148,.12) inset}
.auto__gl{display:none}
.auto__labels{list-style:none;margin:24px auto 0;padding:0;max-width:640px;display:grid;gap:8px;text-align:center}
.auto__labels li{font-weight:700;font-size:clamp(1.6rem,6vw,3rem);line-height:1.1;letter-spacing:-.03em}
.auto__hint{display:none}
.auto.live{height:600svh}
.auto.live .auto__stick{position:sticky;top:0;height:100svh;padding:0;overflow:hidden}
.auto.live .auto__part{position:absolute;inset:0;margin:0}
.auto.live[data-ph=a] .auto__part--b,.auto.live[data-ph=b] .auto__part--a{display:none}
.auto.live .auto__fb{position:absolute;inset:0;height:auto}
.auto.live .auto__labels{position:absolute;left:0;right:0;bottom:12svh;margin:0;max-width:none;display:block}
.auto.live .auto__labels li{position:absolute;left:0;right:0;font-size:clamp(2.2rem,10vw,5rem);opacity:0;transform:translateY(12px);transition:opacity .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1)}
.auto.live .auto__labels li.on{opacity:1;transform:none}
.auto.live .auto__hint{display:block;position:absolute;top:88px;left:0;right:0;margin:0;padding:0 24px;text-align:center;font-size:.875rem;color:#9AA0AD;transition:opacity .32s}
.auto.live .auto__part.moved .auto__hint{opacity:0}
.auto.live.gl .auto__fb{display:none}
.auto.live.gl .auto__gl{display:block;position:absolute;inset:0;width:100%;height:100%}