body.pin-locked{overflow:hidden}
body.pin-locked>.topbar,body.pin-locked>main,body.pin-locked>footer{visibility:hidden}
.pin-gate{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 72% 18%,rgba(255,209,0,.12),transparent 38%),linear-gradient(135deg,#030505 0%,#080a07 50%,#121205 100%)}
.pin-gate[hidden]{display:none}
.pin-card{width:min(100%,580px);padding:46px 48px 50px;border:1px solid #353a38;border-radius:17px;background:#151817;box-shadow:0 30px 90px #000b}
.pin-logo{display:block;width:64px;height:64px;margin-bottom:28px;border-radius:15px}
.pin-eyebrow{margin-bottom:18px;color:#ffd100;font:800 12px/1 Manrope,sans-serif;letter-spacing:.18em}
.pin-card h1{margin:0;color:#f6f7f6;font:700 clamp(34px,6vw,46px)/1.06 Oxanium,Manrope,sans-serif;letter-spacing:-.035em}
.pin-card>p{max-width:455px;margin:20px 0 32px;color:#969b99;font-size:16px;line-height:1.65}
.pin-card label{display:block;margin-bottom:10px;color:#a8acab;font-size:12px;font-weight:800;letter-spacing:.08em}
.pin-card input{width:100%;height:76px;border:1px solid #3b413f;border-radius:11px;background:#090c0b;color:#fff;text-align:center;font:700 26px/1 Oxanium,monospace;letter-spacing:.5em;outline:none;transition:border-color .2s,box-shadow .2s}
.pin-card input::placeholder{color:#727775;opacity:1}
.pin-card input:focus{border-color:#ffd100;box-shadow:0 0 0 3px rgba(255,209,0,.12)}
.pin-card input[aria-invalid="true"]{border-color:#ff665e;box-shadow:0 0 0 3px rgba(255,102,94,.1)}
.pin-message{min-height:21px;margin:8px 2px 8px;color:#ff817a;font-size:12px}
.pin-card button{width:100%;height:70px;border:0;border-radius:11px;background:#ffd100;color:#0b0d0c;font:800 13px/1 Manrope,sans-serif;letter-spacing:.08em;cursor:pointer;transition:transform .18s,filter .18s}
.pin-card button:hover{filter:brightness(1.06);transform:translateY(-1px)}
.pin-card button:active{transform:translateY(1px)}
.pin-card button span{margin-left:5px;font-size:17px}
.pin-error .pin-card{animation:pin-shake .32s ease}
@keyframes pin-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@media(max-width:600px){.pin-gate{padding:18px}.pin-card{padding:34px 24px 30px}.pin-logo{width:58px;height:58px;margin-bottom:24px}.pin-card>p{margin-bottom:26px;font-size:14px}.pin-card input{height:68px}.pin-card button{height:62px}}