@font-face{font-family:"Chakra Petch";src:url(/static/fonts/chakra-petch-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url(/static/fonts/chakra-petch-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--bg:#05090f;--panel:#0b1422;--line:#1d3048;--text:#d6e2f0;--muted:#7f95ad;--blue:#4cc3ff;--blue2:#9fe3ff;--ok:#47e6a8;--red:#ff4d5e;--amber:#f2b134;
  --hud:"Chakra Petch",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;--body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 800px at 30% 45%,#0c1a2b 0%,var(--bg) 60%);color:var(--text);font:15px/1.5 var(--body);overflow-x:hidden}
.grid{position:fixed;inset:0;background-image:linear-gradient(rgba(76,195,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(76,195,255,.05) 1px,transparent 1px);background-size:44px 44px;pointer-events:none;mask-image:radial-gradient(circle at 40% 50%,#000 30%,transparent 80%)}
.scan{position:fixed;left:0;right:0;height:120px;top:-120px;background:linear-gradient(transparent,rgba(76,195,255,.07),transparent);animation:scan 7s linear infinite;pointer-events:none}
@keyframes scan{to{top:100%}}
.hud-top,.hud-bot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 28px;font:500 12px/1 var(--hud);letter-spacing:.22em;text-transform:uppercase}
.hud-top{border-bottom:1px solid var(--line)}
.hud-bot{border-top:1px solid var(--line);color:var(--muted);font-size:11px}
.brand{font-weight:700;font-size:14px;display:flex;align-items:center;gap:10px}
.mark{width:18px;height:18px;border:2px solid var(--blue);border-radius:50%;box-shadow:0 0 0 3px rgba(76,195,255,.15) inset}
.dim{color:var(--muted);font-weight:500}
.hud-right{display:flex;gap:14px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber);animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.scene{position:fixed;inset:0;overflow:hidden;background:#03070c}
/* 16:9 box that covers the viewport; door centre sits at (49.8%,47.5%) of the image */
.stagebox{position:absolute;left:50%;top:50%;width:max(100vw,177.78vh);aspect-ratio:16/9;transform:translate(calc(-50% - 12vw),-50%);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.still,.film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film{opacity:0;transition:opacity .25s}
.lens{position:absolute;left:49.8%;top:47.5%;width:25%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(2,8,16,.92) 0,rgba(2,8,16,.85) 52%,rgba(2,8,16,.35) 66%,transparent 71%);opacity:.7;transition:opacity .5s}
.reactor{position:absolute;left:49.8%;top:47.5%;width:36%;aspect-ratio:1;transform:translate(-50%,-50%);opacity:.9;transition:opacity .5s}
.emblem{position:absolute;left:49.8%;top:47.5%;width:10%;transform:translate(-50%,-50%);filter:drop-shadow(0 0 10px rgba(76,195,255,.75));transition:opacity .35s,transform .6s}
.vignette{position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,rgba(3,7,12,.55) 80%,rgba(3,7,12,.8)),radial-gradient(ellipse at 40% 50%,transparent 55%,rgba(0,0,0,.55));pointer-events:none;transition:opacity .4s}
.stage{position:relative;z-index:1;min-height:calc(100vh - 92px);display:flex;justify-content:flex-end;align-items:center;padding:3vh 4vw}
.panel{width:380px;max-width:100%}
.hud-top,.hud-bot{background:linear-gradient(180deg,rgba(3,7,12,.7),rgba(3,7,12,.35));backdrop-filter:blur(4px)}
.panel{background:linear-gradient(180deg,rgba(13,24,40,.92),rgba(8,15,26,.92));border:1px solid var(--line);border-radius:4px;padding:28px 28px 22px;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.panel:before,.panel:after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--blue)}
.panel:before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.panel:after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.eyebrow{margin:0 0 6px;font:700 11px var(--hud);letter-spacing:.28em;color:var(--amber)}
h1{margin:0 0 4px;font:700 28px/1.15 var(--hud);letter-spacing:.02em}
.hint{margin:0 0 18px;color:var(--muted)}
label{display:block;font:700 11px var(--hud);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:12px 0 6px}
input{width:100%;padding:12px 14px;background:#050b14;border:1px solid #284060;border-radius:3px;color:var(--text);font:500 16px var(--hud);letter-spacing:.06em;outline:none;transition:border-color .2s,box-shadow .2s}
input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(76,195,255,.18)}
button{margin-top:20px;width:100%;padding:14px;border:1px solid var(--blue);background:linear-gradient(180deg,#123a5a,#0b2740);color:#e9f8ff;font:700 13px var(--hud);letter-spacing:.3em;text-transform:uppercase;border-radius:3px;cursor:pointer;transition:filter .2s,transform .1s}
button:hover{filter:brightness(1.2)}
button:active{transform:translateY(1px)}
button:focus-visible{outline:2px solid var(--blue2);outline-offset:3px}
button[disabled]{opacity:.6;cursor:progress}
#msg{min-height:1.5em;margin:12px 0 0;font:700 12px var(--hud);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.readout{list-style:none;margin:18px 0 0;padding:14px 0 0;border-top:1px dashed var(--line);display:grid;gap:6px;font:500 11px var(--hud);letter-spacing:.18em;text-transform:uppercase}
.readout li{display:flex;justify-content:space-between;color:var(--muted)}
.readout b{color:var(--text);font-weight:700}

/* states */
body.verifying .reactor{opacity:1}
body.verifying .lens{opacity:1}
body.verifying .emblem{animation:throb 1s ease-in-out infinite}
@keyframes throb{50%{filter:drop-shadow(0 0 22px #9fe3ff) brightness(1.35)}}
body.denied .panel{animation:shake .45s}
body.denied #msg{color:var(--red)}
body.denied .emblem{filter:drop-shadow(0 0 14px var(--red))}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
body.granted #msg{color:var(--ok)}
body.granted .dot{background:var(--ok);box-shadow:0 0 10px var(--ok);animation:none}
body.granted .emblem{filter:drop-shadow(0 0 16px var(--ok))}
body.open .emblem{opacity:0;transform:translate(-50%,-50%) scale(.6)}
body.open .reactor,body.open .lens{opacity:0}
body.open .film{opacity:1}
body.open .panel{transition:opacity .5s,transform .5s;opacity:0;transform:translateX(30px)}
body.open .vignette{opacity:.3}
body.flash:after{content:"";position:fixed;inset:0;background:#dff6ff;animation:flash .5s ease-in forwards;z-index:9}
@keyframes flash{0%{opacity:0}100%{opacity:1}}

@media (max-width:860px){
  .stagebox{width:max(170vw,100%);transform:translate(-50%,0);top:calc(52px - 6vw);-webkit-mask-image:none;mask-image:none;transition:width .8s ease,top .8s ease,transform .8s ease}
  /* door opening fills the whole phone screen */
  body.open .stagebox{top:50%;width:max(100vw,177.78vh);width:max(100vw,177.78dvh);transform:translate(-50%,-50%)}
  body.open .vignette{opacity:0}
  body.open .hud-bot{transition:opacity .5s;opacity:0}
  .vignette{background:linear-gradient(180deg,transparent 40%,rgba(3,7,12,.85) 75%,#03070c)}
  .stage{display:block;padding:calc(88vw + 8px) 16px 28px}
  .panel{width:auto}
  .hud-top,.hud-bot{padding:12px 16px;letter-spacing:.14em}
  .hud-top .dim,.hud-bot .dim{display:none}
  h1{font-size:22px}
  .panel{padding:22px 18px 18px}
}
@media (prefers-reduced-motion:reduce){
  .dot{animation:none!important}
  .reactor{display:none}
}