section.login{--field-h:3.5rem;min-height:100svh;padding:var(--sp-2) var(--m) clamp(1.25rem, 1vw + 1rem, 2rem);background:var(--clr-mint-50);grid-template-rows:1fr auto;justify-items:center;display:grid;position:relative;overflow:clip}section.login div.column{z-index:1;flex-direction:column;align-self:center;align-items:center;width:min(100%,28rem);padding-block:clamp(2rem,5svh,4rem);display:flex;position:relative}section.login a.mark{width:clamp(3rem,1vw + 2.5rem,3.75rem);color:var(--clr-black-900);transition:color .4s var(--ease);display:block}section.login a.mark svg{width:100%;height:auto}@media (hover:hover){section.login a.mark:hover{color:var(--clr-celadon-500)}}section.login h1{text-align:center;color:var(--clr-black-900);margin:clamp(1.25rem,1vw + .75rem,2rem) 0 clamp(2.5rem,2.5vw + 1.25rem,3.75rem);font-size:clamp(2.25rem,1.4vw + 1.5rem,3rem);line-height:1.1}section.login div.login-form{flex-direction:column;row-gap:1rem;width:100%;display:flex}section.login form.fields{flex-direction:column;row-gap:.75rem;display:flex}section.login form.fields input{width:100%;height:var(--field-h);background:var(--clr-mint-100);color:var(--clr-black-900);font-family:var(--font-sans), system-ui, sans-serif;letter-spacing:-.02rem;transition:border-color .3s var(--ease), background-color .3s var(--ease);border:1px solid #0000;padding:0 1.1rem;font-size:1rem;font-weight:500}section.login form.fields input::placeholder{color:var(--clr-body-light);opacity:1}@media (hover:hover){section.login form.fields input:hover{border-color:var(--clr-mint-300)}}section.login form.fields input:focus-visible{border-color:var(--clr-black-900);background:#fff;outline:none}section.login form.fields p.forgot{align-self:flex-end}section.login form.fields p.forgot a,section.login p.new a{text-underline-offset:.2em;transition:color .3s var(--ease), text-decoration-color .3s var(--ease);text-decoration:underline}section.login form.fields p.forgot a{color:var(--clr-body);-webkit-text-decoration-color:var(--clr-mint-300);text-decoration-color:var(--clr-mint-300)}@media (hover:hover){section.login form.fields p.forgot a:hover{color:var(--clr-black-900);text-decoration-color:currentColor}}section.login form.fields div.submit-wrap{margin-top:.5rem}section.login div.btn.submit{width:100%}section.login div.btn.submit .btn-inner.primary{min-height:var(--field-h);justify-content:center;padding-block:0;font-size:1rem}section.login p.new{text-align:center;color:var(--clr-body);margin-top:.5rem}section.login p.new a{color:var(--clr-black-900);-webkit-text-decoration-color:var(--clr-celadon-400);text-decoration-color:var(--clr-celadon-400);font-weight:600}section.login form.fields p.forgot a,section.login p.new a{position:relative}section.login form.fields p.forgot a:after,section.login p.new a:after{content:"";position:absolute;inset:-.625rem 0}section.login p.legal{text-align:center;text-wrap:balance;max-width:34rem;color:var(--clr-body);z-index:1;position:relative}section.login p.legal a{color:color-mix(in srgb, var(--clr-celadon-500) 45%, var(--clr-black-900));transition:color .3s var(--ease);font-weight:600}@media (hover:hover){section.login p.legal a:hover{color:var(--clr-black-900)}}section.login div.side{--cell:min(5vw, 9svh);width:calc(var(--cell) * 4);height:calc(var(--cell) * 8);z-index:0;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(4,1fr);display:grid;position:absolute;top:50%;translate:0 -50%}section.login div.side.left{left:0}section.login div.side.right{right:0}section.login div.side span.cell{background:var(--clr-black-900);opacity:0;margin:-.5px}section.login div.side span.cell.on{opacity:1}section.login div.side span.px{left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);aspect-ratio:1;background:var(--clr-black-900);width:clamp(.75rem,.6vw + .5rem,1.25rem);position:absolute;translate:-50% -50%}@media (min-width:58.75rem){section.login h1{white-space:nowrap}}@media (min-width:58.75rem) and (max-height:50rem){section.login{--field-h:3.25rem}section.login div.column{padding-block:1rem}section.login a.mark{width:3rem}section.login h1{margin:1rem 0 2rem}section.login div.or{margin-block:.5rem}}@media not (min-width:58.75rem){section.login{padding-top:var(--m)}section.login div.side{display:none}}