*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;overflow:hidden;background:#071016;color:#f8fbff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}main{position:fixed;inset:0}#view,#sourceVideo{position:fixed;inset:0;width:100vw;height:100dvh}#view{z-index:1}#sourceVideo{opacity:0;pointer-events:none}#hud{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:2;max-width:720px;border:1px solid rgba(113,242,222,.35);border-radius:8px;padding:10px;background:#040a0fb8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}h1{margin:0 0 8px;font-size:17px}.controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}button{min-height:44px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:#070d13db;color:#fff;font:900 15px/1 system-ui,sans-serif}#playButton,#cameraButton,#scanButton{background:#f0b84c;color:#141006}#cameraButton{background:#75f1d5}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:8px}.metrics div{min-width:0;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:7px 8px;background:#02070bb8}.metrics span{display:block;margin-bottom:3px;color:#ffffffa6;font-size:11px;font-weight:900}.metrics strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}#message{margin:8px 0 0;border-radius:6px;padding:8px 10px;background:#0e9164d1;font-size:13px;font-weight:800;line-height:1.28}@media(max-width:620px){.controls{grid-template-columns:repeat(3,minmax(0,1fr))}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}