.login-yard{--ink:#22272c;--steel:#50565c;--paper:#f4f7f9;--grid:#dce2e7;--orange:var(--brand);--beam-top:2.25rem;--beam-height:1.125rem;--trolley:2.75rem;--hang:6.5rem;min-height:100svh;padding:calc(var(--beam-top) + var(--beam-height) + var(--trolley) - .25rem + var(--hang)) 1rem 3rem;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), linear-gradient(color-mix(in oklch, var(--grid) 45%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--grid) 45%, transparent) 1px, transparent 1px);background-position:top;background-size:120px 120px,120px 120px,24px 24px,24px 24px;justify-content:center;display:flex;position:relative;overflow:hidden}@supports (color:lab(0% 0 0)){.login-yard{--ink:lab(15.3037% -1.18998 -4.22518);--steel:lab(36.187% -1.25338 -4.25453);--paper:lab(97.1066% -.659496 -1.3224);--grid:lab(89.5755% -1.63132 -3.29609)}}.runway{inset:var(--beam-top) 0 auto;z-index:2;height:var(--beam-height);position:absolute}.beam{width:100%;height:100%;fill:var(--ink);display:block}.beam .web{fill:color-mix(in oklch, var(--steel) 35%, var(--paper))}.crane{flex-direction:column;align-items:center;width:100%;max-width:24rem;display:flex;position:relative}.trolley{top:calc(.25rem - var(--hang) - var(--trolley));z-index:3;width:6rem;margin-left:-3rem;position:absolute;left:50%}.trolley .body{fill:var(--orange)}.trolley .wheel{fill:var(--ink)}.trolley .drum{fill:color-mix(in oklch, var(--orange) 70%, black)}.drop{width:100%;clip-path:inset(calc(-1 * var(--hang)) -100vw -100vh -100vw)}.load{width:100%;padding-top:3.5rem;position:relative}.cable{background:var(--steel);width:2px;height:100vh;margin-left:-1px;position:absolute;bottom:calc(100% - .5rem);left:50%}.hook{width:2.5rem;margin-left:-1.25rem;position:absolute;top:0;left:50%}.hook .block{fill:var(--ink)}.hook .steel{fill:none;stroke:var(--ink);stroke-width:5px;stroke-linecap:round}.hook .shackle{fill:none;stroke:var(--orange);stroke-width:3px}.card{border:1px solid var(--border);border-top:3px solid var(--orange);background:var(--background);border-radius:.75rem;padding:1.75rem 1.5rem 1.5rem;position:relative;box-shadow:0 1px 2px #22272c0f,0 18px 40px -12px #22272c38;box-shadow:0 1px 2px lab(15.3037% -1.18998 -4.22518/.06),0 18px 40px -12px lab(15.3037% -1.18998 -4.22518/.22)}@media (prefers-reduced-motion:no-preference){.trolley,.drop{animation:2.8s both ride-in}.load{transform-origin:50% calc(-1 * var(--hang));animation:2.8s both lower,1.6s 2.8s both settle}@keyframes ride-in{0%{animation-timing-function:cubic-bezier(.35,0,.15,1);translate:-75vw}45%,to{translate:0}}@keyframes lower{0%,50%{transform:translateY(calc(.5rem - var(--hang)));animation-timing-function:cubic-bezier(.45,0,.25,1)}90%{animation-timing-function:ease-in-out;transform:translateY(.35rem)}to{transform:translateY(0)}}@keyframes settle{0%{rotate:0deg}25%{rotate:1deg}55%{rotate:-.5deg}80%{rotate:.15deg}to{rotate:0deg}}}@media (max-width:480px){.login-yard{--beam-top:1.25rem;--hang:4rem}}