* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; background: #000; font-family: Arial, sans-serif; }
body { display: flex; align-items: center; justify-content: center; height: 100dvh; }
#panel { position: relative; width: min(100vw, calc(100dvh * 720 / 1520)); aspect-ratio: 720 / 1520; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
#backdrop { position: absolute; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
#qr { position: absolute; background: white; pointer-events: none; }
#modules, #pulse { position: absolute; inset: 0; width: 100%; height: 100%; }
#pulse { overflow: visible; }
button { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid black; outline-offset: -3px; }
#back { left: 1.5%; top: .5263%; width: 14.5%; height: 7.3684%; }
#status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #fff; background: #000; font-size: 16px; white-space: pre-line; text-align: center; }
[hidden] { display: none !important; }

#offline { display: none !important; }

#local-clock { position:absolute; left:0; right:0; top:93.4210526%; height:2.6315789%; margin:0; display:flex; align-items:center; justify-content:center; background:#000; color:#b9b9b9; line-height:1; font-weight:400; pointer-events:none; }
#info { left:79.6296296%; top:9.8245614%; width:11.6666667%; height:5.5263158%; }

#access-gate { position:fixed; inset:0; z-index:10; display:grid; place-items:center; background:#000; color:#fff; padding:24px; }
#access-form { width:min(100%,280px); display:grid; gap:16px; text-align:center; }
#access-form label { font-size:20px; }
#access-code { width:100%; min-height:56px; border:1px solid #888; border-radius:6px; background:#151515; color:#fff; text-align:center; font-size:28px; letter-spacing:.5em; padding:8px 4px 8px 18px; }
#access-submit { position:static; min-height:48px; border-radius:6px; background:#fff; color:#000; font-size:16px; }
#access-submit:disabled { opacity:.6; cursor:wait; }
#access-error { min-height:1.3em; margin:0; color:#ffb7b7; font-size:14px; }

@font-face { font-family:ViewerRoboto; src:url('/static/webfonts/ViewerRoboto-Regular.woff2') format('woff2'); font-style:normal; font-weight:400; font-display:swap; }
#holder-mask { position:absolute; background:#fff; pointer-events:none; }
#holder-label { position:absolute; margin:0; transform:translate(-50%,-50%); color:#111; font-family:ViewerRoboto,Arial,sans-serif; font-weight:400; line-height:1.3333; text-align:center; white-space:nowrap; pointer-events:none; }

@media(prefers-reduced-motion:reduce){#panel{animation:none!important}}

#access-gate { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; overflow-y:auto; padding:32px 24px; }
.access-content { width:min(100%,320px); margin-block:auto; flex-shrink:0; }
#access-form { width:100%; }
#install-guide { text-align:left; }
#install-device { margin:0 0 12px; color:#b9b9b9; font-size:14px; }
#install-title { margin:0 0 24px; font-size:26px; line-height:1.2; font-weight:600; }
#install-steps { margin:0; padding-left:22px; font-size:16px; line-height:1.55; }
#install-steps li { padding-left:5px; margin-bottom:16px; }
.install-next { margin:24px 0 0; padding-top:20px; border-top:1px solid #333; color:#b9b9b9; font-size:15px; line-height:1.5; }
#access-form .display-name-label { margin-top:8px; text-align:left; font-size:16px; }
.display-name-label span { color:#b9b9b9; font-size:14px; }
#display-name { width:100%; min-height:48px; border:1px solid #888; border-radius:6px; padding:10px 12px; background:#151515; color:#fff; font:inherit; font-size:16px; }
#display-name-help { margin:-6px 0 2px; text-align:left; font-size:13px; line-height:1.45; color:#b9b9b9; }