/* ---------- SIGN IN ---------- */
body.signin{min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto 1fr;background:radial-gradient(110% 80% at 50% 0%,#131A20 0%,var(--ink) 62%);overflow:hidden}
.rude{font-family:var(--display);font-weight:400;font-size:1.15em;letter-spacing:0;color:var(--sand);margin:0 .15em}

.si-top{position:relative;z-index:2;padding:calc(18px + env(safe-area-inset-top,0px)) var(--gut) 18px}
.si-top .brand svg{height:26px}

/* The hinge: the mark at cinema scale in slate, swinging round its dot once on arrival. */
.si-hinge{position:fixed;z-index:0;right:max(-12vw,-160px);bottom:-18vh;height:min(118vh,1100px);aspect-ratio:147/207;pointer-events:none}
.si-hinge svg{display:block;width:100%;height:100%;overflow:visible}
.si-hinge .arc{fill:var(--slate);opacity:.55;transform-box:view-box;transform-origin:43.96px 103.38px;animation:siSwing 2.2s var(--eo) .15s both}
.si-hinge .dot{fill:var(--slate-2);opacity:.28;transform-box:fill-box;transform-origin:50% 50%;animation:dotIn 1.1s var(--es) both}
@keyframes siSwing{from{transform:rotate(-150deg);opacity:0}25%{opacity:.55}}

.si{position:relative;z-index:1;align-self:center;width:min(640px,100%);margin:0 auto;padding:0 var(--gut) calc(12vh + env(safe-area-inset-bottom,0px))}
.si>*{animation:fadeUp 1s var(--eo) both}
.si>:nth-child(2){animation-delay:.08s}.si>:nth-child(3){animation-delay:.16s}.si>:nth-child(4){animation-delay:.24s}
.si h1{font:500 clamp(34px,5.2vw,62px)/1.04 var(--ui);letter-spacing:-.04em;margin:0 0 16px;text-wrap:balance}
.si .sub{margin:0 0 clamp(28px,5vh,44px);color:var(--mist);font-size:clamp(15px,1.3vw,18px);max-width:46ch;text-wrap:pretty}

#si-form label{display:block;font-size:14px;font-weight:600;color:var(--bone);margin-bottom:10px}
.si-row{display:flex;gap:10px}
.si-row input{flex:1;min-width:0;height:50px;padding:0 18px;border:0;border-radius:10px;background:rgba(15,19,22,.85);box-shadow:inset 0 0 0 1px var(--slate-2);color:var(--bone);font:500 17px/1 var(--mono);letter-spacing:.06em;font-variant-numeric:tabular-nums;caret-color:var(--sand);transition:box-shadow .3s var(--eo),background .3s}
.si-row input::placeholder{color:var(--dim);letter-spacing:.06em}
.si-row input:hover{box-shadow:inset 0 0 0 1px var(--mist)}
.si-row input:focus{outline:none;background:var(--night);box-shadow:inset 0 0 0 2px var(--sand)}
.si-row input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--sand-hi)}
.si-row .btn{flex:none}
.si-row .btn[aria-busy="true"]{pointer-events:none}
.si-row .btn[aria-busy="true"]{opacity:.8}
.shake{animation:siShake .45s var(--eo)}
@keyframes siShake{20%{transform:translateX(-8px)}45%{transform:translateX(6px)}70%{transform:translateX(-3px)}}

.si-err{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border-radius:10px;background:rgba(235,221,185,.08);color:var(--bone);font-size:14.5px;line-height:1.45}
.si-err[hidden]{display:none}
.si-err svg{color:var(--sand);margin-top:1px}
.si-help{margin:clamp(28px,5vh,40px) 0 0;color:var(--dim);font-size:14px}
.si-help a{color:var(--mist);text-underline-offset:3px;text-decoration-color:var(--slate-2);transition:color .25s,text-decoration-color .25s}
.si-help a:hover{color:var(--bone);text-decoration-color:var(--sand)}

.si.leave{animation:siLeave .6s var(--ei) both}
@keyframes siLeave{to{opacity:0;transform:scale(.98);filter:blur(8px)}}

@media (max-width:560px){
  .si-row{flex-direction:column}
  .si-row .btn{justify-content:center}
  .si-hinge{right:-38vw;bottom:-10vh;height:80vh}
}
@media (prefers-reduced-motion:reduce){
  .si>*,.si-hinge .arc,.si-hinge .dot,.shake,.si.leave{animation:none!important}
}