*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:#fff;color:#171717;font-family:Arial,Helvetica,sans-serif}body{min-height:100svh;overflow-x:clip}canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}main{position:relative;z-index:1;min-height:100svh;display:grid;place-items:center;padding:110px 24px}.entry{width:360px;aspect-ratio:1;height:auto;border:1px solid #292929;background:rgba(255,255,255,.48);padding:29px 35px 25px;backdrop-filter:blur(8px);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}h1{font-size:29px;font-weight:400;letter-spacing:-1px;margin:0 0 34px}form{width:100%;text-align:left}label{display:block;font-size:10px;color:#5a5a5a;margin-bottom:9px}.password-row{display:flex;width:100%;height:44px;border:1px solid #b8b8b8;background:white}.password-row:focus-within{border-color:#171717;outline:1px solid #171717;outline-offset:2px}input[type=password]{border:0;outline:none;min-width:0;flex:1;padding:0 12px;font:12px Arial;background:transparent;border-radius:0}input::placeholder{color:#8b8b8b}.error{min-height:23px;font-size:10px;line-height:1.4;color:#a52d21;margin:7px 0 0}@media(max-width:600px){.entry{width:min(360px,100%);height:auto;aspect-ratio:1;padding-inline:28px}main{padding-inline:24px}}@media(max-height:530px){.entry{height:340px}main{padding-block:70px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

@media(max-width:360px){.entry{padding:20px}h1{font-size:26px}.password-row{height:40px}.error{min-height:18px}}

/* The entrance is progressive enhancement: the form works without JavaScript. */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:6;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.flight-ready .entry{opacity:0;transform:translateY(10px)}
.flight-ready.form-visible .entry{transition:opacity 1.1s ease,transform 1.2s cubic-bezier(.65,0,.25,1)}
.flight-ready .entry:focus-within{transition:none}
.flight-ready.form-visible .entry,.flight-ready.flight-paused .entry,.entry:focus-within{opacity:1;transform:translateY(0)}





@media(prefers-reduced-motion:reduce){.flight-ready .entry{animation:none!important}}

/* Stack the full mark above the password square on narrow screens. */
@media(max-width:900px){canvas{position:absolute;min-height:100svh}main{min-height:100svh;padding-top:calc(110px + min(70vw,280px));padding-bottom:80px;align-items:start}.entry h1{font-size:26px;line-height:1.1}}
@media(max-width:360px){.entry h1{font-size:23px}}

/* The centered opening separates into two columns when the glass appears. */
@media(min-width:901px){
  :root{--pair-gap:clamp(32px,4vw,80px);--logo-width:640px}
  .flight-ready #flock{transform:translateX(0);transition:transform 1.2s cubic-bezier(.65,0,.25,1)}
  .flight-ready.form-visible #flock{transform:translateX(calc(-180px - var(--pair-gap)/2))}
  .flight-ready.form-visible .entry,.flight-ready.flight-paused .entry,.entry:focus-within{transform:translateX(calc((var(--logo-width) + var(--pair-gap))/2))}
}

/* The glass clears while the authenticated flock turns green and takes flight. */
.flight-ready.form-visible.departing .entry{
  opacity:0;
  pointer-events:none;
  transition:opacity .5s ease;
}