/* ===== WVA sign-in experience layer (demo only) ===== */
#gate{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:#FFF2E2;color:#142446;font-family:Inter,system-ui,sans-serif;transition:opacity .7s ease,visibility .7s}
html.unlocked #gate{opacity:0;visibility:hidden;pointer-events:none}
html:not(.unlocked) body{overflow:hidden}
#gate .night{position:relative;background:#0D1830;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 40px;overflow:hidden}
#gate .night::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 30%,rgba(30,49,87,.9),transparent 70%)}
#gate .stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#FFF2E2;opacity:.0;animation:twinkle 4s infinite ease-in-out}
@keyframes twinkle{0%,100%{opacity:.08}50%{opacity:.55}}
#gate .tower{position:relative;width:min(400px,78%);max-height:62vh}
#gate .tower svg{width:100%;height:auto;display:block;overflow:visible}
#gate .tower .st{stroke:#FFF2E2}
#gate .tower .peg,#gate .tower .pegdot{stroke:rgba(255,242,226,.5)}
#gate .tower .bp{stroke:rgba(255,242,226,.22)}
#gate .tower .winln{stroke:rgba(255,242,226,.7);transition:fill .5s ease,stroke .5s ease,filter .5s}
#gate .tower .win.on{fill:#FFF2E2;stroke:#FFF2E2;filter:drop-shadow(0 0 6px rgba(255,242,226,.75))}
#gate .tower .g{opacity:0;transition:opacity .8s ease}
#gate .tower .g.show{opacity:1}
#gate .tower .draw{stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.3s ease .1s}
#gate .tower .g.show .draw{stroke-dashoffset:0}
#gate .tower .beacon{opacity:0;transition:opacity .8s ease}
#gate.lit .tower .beacon{opacity:1;animation:beacon 2.4s ease-in-out infinite}
@keyframes beacon{50%{opacity:.55}}
#gate .night .cap{position:relative;margin-top:34px;text-align:center;color:#FFF2E2}
#gate .eyebrow{font:600 11px/1.2 Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase}
#gate .night .cap .eyebrow{opacity:.6}
#gate .night .cap p{font:700 clamp(20px,2.1vw,27px)/1.2 "Inter Tight",Inter,sans-serif;letter-spacing:-.02em;margin-top:10px;max-width:420px}
#gate .night .cap p span{font-weight:400;opacity:.62}

#gate .gside{display:flex;flex-direction:column;padding:clamp(28px,5vw,64px) clamp(24px,6vw,76px);min-height:100%;overflow-y:auto}
#gate .gside .logo{height:62px;width:auto;align-self:flex-start}
#gate .form{margin:auto 0;max-width:430px;padding:28px 0}
#gate .form .eyebrow{color:rgba(20,36,70,.6)}
#gate h1{font:700 clamp(32px,3.2vw,46px)/1.06 "Inter Tight",Inter,sans-serif;letter-spacing:-.025em;margin:14px 0 14px}
#gate h1 span{font-weight:400;color:rgba(20,36,70,.55)}
#gate .lede{font-size:16px;line-height:1.65;color:rgba(20,36,70,.78);max-width:400px}
#gate .for{display:flex;align-items:center;gap:12px;margin:22px 0 24px;padding:12px 16px 12px 12px;border:1px solid #E7E1D5;border-radius:14px;background:#fff;width:fit-content}
#gate .for small{display:block;font:600 10px/1 Inter;letter-spacing:.18em;text-transform:uppercase;color:rgba(20,36,70,.5);margin-bottom:4px}
#gate .for b{font:700 15px/1.2 "Inter Tight",sans-serif}
#gate label.pl{display:block;font-weight:600;font-size:13px;margin-bottom:10px}
#gate .pins{position:relative;display:flex;gap:12px;cursor:text}
#gate .pins i{width:62px;height:70px;border-radius:14px;border:1.5px solid #D8D3C8;background:#fff;display:grid;place-items:center;font:700 30px "Inter Tight",sans-serif;font-style:normal;transition:border-color .15s,transform .15s,box-shadow .15s}
#gate .pins i.f{border-color:#142446}
#gate .pins i.cur{border-color:#142446;box-shadow:0 0 0 4px rgba(20,36,70,.1)}
#gate .pins i.dot::after{content:"";width:12px;height:12px;border-radius:50%;background:#142446}
#gate .pins input{position:absolute;inset:0;opacity:0;width:100%;height:100%;font-size:16px;border:0;caret-color:transparent}
#gate .pins.bad{animation:shake .45s}
#gate .pins.ok i{border-color:#142446;background:#142446}
#gate .pins.ok i.dot::after{background:#FFF2E2}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
#gate .go{margin-top:22px;display:inline-flex;align-items:center;gap:10px;padding:.95rem 1.9rem;border-radius:999px;background:#142446;color:#FFF2E2;font:600 15px Inter,sans-serif;border:0;cursor:pointer;transition:transform .15s,opacity .15s}
#gate .go:hover{transform:translateY(-1px)}
#gate .go:disabled{opacity:.35;cursor:default;transform:none}
#gate .status{min-height:22px;margin-top:16px;font-size:13.5px;color:rgba(20,36,70,.72);display:flex;align-items:center;gap:9px}
#gate .status.err{color:#B5523B}
#gate .spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(20,36,70,.2);border-top-color:#142446;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#gate .fine{margin-top:18px;font-size:12.5px;line-height:1.6;color:rgba(20,36,70,.58);max-width:400px;padding-top:18px;border-top:1px solid #E7E1D5}
#gate .gfoot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;color:rgba(20,36,70,.5)}
#gate .gfoot a{color:inherit;text-decoration:none}
.signout{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;padding:0}
@media (max-width:860px){
  #gate{grid-template-columns:1fr;grid-template-rows:auto auto;overflow-y:auto;-webkit-overflow-scrolling:touch}
  #gate .gside{overflow:visible;min-height:0}
  #gate .night{padding:26px 20px 22px;min-height:0}
  #gate .tower{width:150px}
  #gate .night .cap{margin-top:14px}
  #gate .night .cap p{font-size:17px}
  #gate .gside{padding:24px 20px 28px}
  #gate .gside .logo{height:46px}
  #gate .form{padding:22px 0 28px}
  #gate .pins i{width:56px;height:62px}
}
@media (prefers-reduced-motion:reduce){#gate *,#gate{transition:none!important;animation:none!important}}