@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{color-scheme:dark;--accent:#c95b5b;--muted:#858585}*{box-sizing:border-box}body{margin:0;background:#060606;color:#eee;font-family:'IBM Plex Mono',monospace;font-size:12px;min-height:100svh}header{height:87px;border-bottom:1px solid #242424;margin:0 5%;display:flex;align-items:center;justify-content:space-between;letter-spacing:1.5px}.wordmark{font-size:12px}.wordmark i{color:#777;margin:0 16px}.secure{color:#888;font-size:10px}.secure b{display:inline-block;width:5px;height:5px;background:#eee;border-radius:50%;margin-right:9px}#clock{margin-left:24px}main{max-width:1440px;margin:auto;padding:54px 7% 48px;display:grid;grid-template-columns:1fr 1.12fr;gap:8%;align-items:center}.logo{width:67px;height:77px;object-fit:contain;filter:invert(1);mix-blend-mode:screen;margin-bottom:26px}.eyebrow{font-size:9px;letter-spacing:2px;color:#858585}h1{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:clamp(56px,6.6vw,98px);line-height:.96;letter-spacing:-1.5px;font-weight:600;margin:24px 0}h1 em{font-style:normal;color:#7b7b7b}.intro{font-size:11px;line-height:2;color:#929292}.classification{font-size:9px;letter-spacing:1px;border:1px solid #4d4d4d;display:inline-flex;margin-top:36px;padding:9px 12px;gap:17px}.classification span{color:#777}.terminal{border:1px solid #363636;background:#0b0b0b;box-shadow:0 30px 90px #000}.terminal-top,.terminal-bottom{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;padding:16px 20px;color:#999}.terminal-top{border-bottom:1px solid #303030}#live{color:#ddd}.viewport{height:350px;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#202020,#0b0b0b 75%)}#camera{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.7}.vignette,.grid{position:absolute;inset:0;pointer-events:none}.vignette{background:radial-gradient(ellipse,transparent 30%,#050505b0)}.grid{background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:35px 35px}.reticle{position:absolute;left:50%;top:48%;width:200px;height:260px;transform:translate(-50%,-50%)}.reticle svg{width:100%;height:100%;fill:none;stroke:#ffffff25;stroke-width:.8}.corner{position:absolute;width:23px;height:23px;border-color:#aaa;border-style:solid}.tl{left:0;top:0;border-width:1px 0 0 1px}.tr{right:0;top:0;border-width:1px 1px 0 0}.bl{left:0;bottom:0;border-width:0 0 1px 1px}.br{right:0;bottom:0;border-width:0 1px 1px 0}.viewport-label,.coordinates{position:absolute;bottom:17px;color:#777;font-size:7px;letter-spacing:1px}.viewport-label{left:20px}.viewport-label i{font-style:normal;color:#ccc}.coordinates{right:20px}.scanline{display:none;position:absolute;left:0;right:0;height:1px;background:white;box-shadow:0 0 22px 4px #fff5;animation:scan 2s linear infinite}.status{display:flex;gap:15px;padding:23px 20px;min-height:130px;border-top:1px solid #292929}.status-icon{color:var(--accent);font-size:27px;padding-top:8px}.status .eyebrow{color:var(--accent);margin:0 0 9px}h2{font-size:17px;font-weight:400;margin:0 0 10px;color:var(--accent)}.status p:last-child{font-size:9px;color:#969696;line-height:1.6;margin:0}.progress{height:2px;background:#242424}#progress{width:0;height:100%;background:var(--accent)}.terminal-bottom{font-size:7px;padding:13px 20px}footer{margin:0 5%;padding:24px 0;border-top:1px solid #242424;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:8px;letter-spacing:1px;color:#777}footer>span:first-child{color:#ccc}button{font:inherit;cursor:pointer}#fullscreen{border:0;color:#aaa;background:none;font-size:23px}#gate{position:absolute;inset:0;background:#050505b8;display:flex;align-items:center;justify-content:center;flex-direction:column;backdrop-filter:blur(3px)}#gate p{font-size:9px;letter-spacing:3px}#start{margin:15px;border:1px solid #888;background:#eee;color:#111;padding:15px 22px;letter-spacing:1px}#start span{margin-left:25px}#gate small{font-size:8px;color:#999;text-align:center;padding:0 15px}#gate[hidden]{display:none}#demo-label{position:absolute;top:13px;width:100%;text-align:center;font-size:8px;color:#bbb}body[data-state=scanning]{--accent:#ddd}body[data-state=registered]{--accent:#51bdcd}body[data-state=scanning] .scanline{display:block}body[data-state=registered] .reticle{border:1px solid #51bdcd55}body[data-state=registered] .reticle svg{stroke:#51bdcd55}@keyframes scan{0%,100%{top:3%}50%{top:97%}}@media(min-width:1500px){main{padding-top:8vh;padding-bottom:8vh}.viewport{height:420px}}@media(max-width:760px){header{height:65px}.secure{font-size:8px}#clock{display:none}main{padding:28px 6%;display:flex;flex-direction:column;gap:28px;align-items:stretch}.identity{position:relative}.logo{width:39px;height:45px;position:absolute;right:0;top:0}.identity>.eyebrow{margin-top:5px}h1{font-size:50px;margin:18px 0}h1 br{display:none}h1 em{display:block}.intro{font-size:10px}.classification{display:none}.viewport{height:330px}footer{font-size:7px;line-height:1.8;flex-wrap:wrap}footer>span:nth-child(2){max-width:75%}}@media(prefers-reduced-motion:reduce){.scanline{animation-duration:5s}}
/* Kiosk tablet: the camera takes the remaining space in either orientation. */
html{height:100%;overflow:hidden}
body{height:100dvh;min-height:0;overflow:hidden;display:grid;grid-template-rows:56px minmax(0,1fr) 48px;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
header{height:auto;margin:0 4%;letter-spacing:1px}
main{width:100%;height:100%;min-height:0;max-width:1400px;margin:0 auto;padding:20px 4%;gap:5%;grid-template-columns:.6fr 1fr;align-items:stretch}
.identity{align-self:center;min-width:0}
.logo{width:70px;height:80px;margin:0 0 26px;position:static}
h1{font-size:clamp(42px,6vw,80px);margin:0;line-height:1.02}
.terminal{min-height:0;min-width:0;display:grid;grid-template-rows:38px minmax(0,1fr) auto 2px 32px;box-shadow:none}
.terminal-top,.terminal-bottom{align-items:center;padding:0 18px}
.viewport{height:auto;min-height:0;container-type:size}
#camera{display:block}
.reticle{height:min(76cqh,380px);width:auto;aspect-ratio:200/260;max-width:70%;top:49%}
.status{min-height:0;padding:16px 18px;align-items:center;gap:12px}
.status>div{min-width:0}
.status-icon{padding:0;flex-shrink:0}
h2{font-size:clamp(15px,2vw,22px);line-height:1.35;overflow-wrap:anywhere;margin-bottom:6px}
.status .eyebrow{font-size:9px;margin-bottom:6px}
.status p:last-child{font-size:11px}
footer{margin:0 4%;padding:0;flex-wrap:nowrap;gap:12px;letter-spacing:0;font-size:9px}
footer>span:first-child{display:none}
footer>span:nth-child(2){max-width:none}
#fullscreen{width:44px;height:44px;flex-shrink:0}
#start{min-height:52px;font-size:13px}
#gate small{font-size:11px;max-width:350px;line-height:1.5}
#gate p,.coordinates{display:none}
@media(orientation:portrait){
 main{display:grid;grid-template-columns:1fr;grid-template-rows:76px minmax(0,1fr);gap:16px;padding:16px 5%}
 .identity{height:76px;display:flex;align-items:center;gap:22px;align-self:stretch}
 .logo{height:65px;width:57px;margin:0}
 h1{font-size:34px;letter-spacing:0}
 h1 br{display:none}h1 em{display:inline}
 .status{padding:20px}
 h2{font-size:22px}
 .reticle{height:min(75cqh,460px)}
}
@media(max-height:600px){
 body{grid-template-rows:42px minmax(0,1fr) 36px}
 main{padding:10px 4%;gap:3%}
 .logo{height:52px;width:46px;margin-bottom:15px}
 h1{font-size:40px}
 .status{padding:10px 14px}
 .status .eyebrow{display:none}
 .status p:last-child{font-size:10px}
 h2{font-size:16px}
 .terminal{grid-template-rows:30px minmax(0,1fr) auto 2px 26px}
 #fullscreen{height:32px}
}
@media(max-width:500px) and (orientation:portrait){
 .wordmark{font-size:9px}.secure{font-size:8px}#clock{display:none}
 main{grid-template-rows:54px minmax(0,1fr);gap:10px}
 .identity{height:54px}.logo{height:48px;width:42px}h1{font-size:27px}
 .status{padding:14px}h2{font-size:18px}
 footer{font-size:8px}
}