.lay{position:relative;width:100vw;margin:48px 0 48px calc(50% - 50vw);background:#0D0E13;color:#F4F6F8;--p:.75}
.lay__stick{position:relative;padding:72px 20px 56px}
.lay__fb{position:relative;height:320px;display:grid;place-items:center;perspective:900px}
.lay__l{grid-area:1/1;width:min(62vw,520px);aspect-ratio:1.6;border-radius:18px;border:1px solid rgba(244,246,248,.25);background:linear-gradient(rgba(244,246,248,.5),rgba(244,246,248,.5)) 18px 62px/40% 10px no-repeat,linear-gradient(rgba(244,246,248,.2),rgba(244,246,248,.2)) 18px 86px/60% 6px no-repeat,linear-gradient(rgba(90,196,148,.85),rgba(90,196,148,.85)) 18px 112px/22% 14px no-repeat,rgba(16,20,28,.9);box-shadow:0 0 0 1px rgba(90,196,148,.35) inset,0 0 24px rgba(90,196,148,.18);transform:rotateX(58deg) rotateZ(-24deg) translateZ(calc((var(--i) - 2) * (14px + var(--p) * 90px)))}
.lay__gl{display:none}
.lay__labels{list-style:none;margin:24px auto 0;padding:0;max-width:640px;display:grid;gap:8px;text-align:center}
.lay__labels li{font-weight:700;font-size:clamp(1.6rem,6vw,3rem);line-height:1.1;letter-spacing:-.03em}
.lay__hint{display:none}
.lay.live{height:320svh}
.lay.live .lay__stick{position:sticky;top:0;height:100svh;padding:0;overflow:hidden}
.lay.live .lay__fb{position:absolute;inset:0;height:auto}
.lay.live .lay__labels{position:absolute;left:0;right:0;bottom:12svh;margin:0;max-width:none;display:block}
.lay.live .lay__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)}
.lay.live .lay__labels li.on{opacity:1;transform:none}
.lay.live .lay__hint{display:block;position:absolute;top:88px;left:0;right:0;margin:0;text-align:center;font-size:.875rem;color:#9AA0AD;transition:opacity .32s}
.lay.live.moved .lay__hint{opacity:0}
.lay.live.gl .lay__fb{display:none}
.lay.live.gl .lay__gl{display:block;position:absolute;inset:0;width:100%;height:100%}