*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#071016;color:#f7fbff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}main,#view,#sourceVideo{position:fixed;inset:0}#view,#sourceVideo{width:100vw;height:100dvh}#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:760px;border:1px solid rgba(117,241,213,.36);border-radius:8px;padding:10px;background:#040a0fc2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}h1{margin:0 0 8px;font-size:17px}.controls,.metrics{display:grid;gap:8px}.controls{grid-template-columns:repeat(6,minmax(0,1fr))}.metrics{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:8px}button{min-height:44px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:#080e14e0;color:#fff;font:900 15px/1 system-ui,sans-serif}#cameraButton,#aiDepthButton,#scanButton{background:#75f1d5;color:#081014}#aiDepthButton{background:#95b8ff}#demoButton{background:#f0b84c;color:#141006}#uiToggleButton{background:#080e14e0}.metrics div{min-width:0;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:7px 8px;background:#02070bbd}.metrics span{display:block;margin-bottom:3px;color:#ffffffa8;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:680px){.controls,.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}body.ui-compact #hud{left:10px;right:10px;bottom:max(8px,env(safe-area-inset-bottom));max-width:none;padding:8px;background:#040a0f94}body.ui-compact h1,body.ui-compact .metrics,body.ui-compact #message,body.ui-compact #cameraButton,body.ui-compact #demoButton{display:none}body.ui-compact .controls{grid-template-columns:1fr 1fr 1fr 1fr}body.ui-compact button{min-height:42px;font-size:14px}body[data-step=start] #hud{inset:50% 22px auto;transform:translateY(-50%)}body[data-step=start] h1,body[data-step=start] .metrics,body[data-step=start] #message,body[data-step=start] #demoButton,body[data-step=start] #aiDepthButton,body[data-step=start] #scanButton,body[data-step=start] #resetButton,body[data-step=start] #uiToggleButton{display:none}body[data-step=start] .controls{display:block}body[data-step=start] #cameraButton{display:block;width:100%;min-height:58px;font-size:21px}body[data-step=start][data-demo=true] .controls{display:grid;grid-template-columns:1fr 1fr}body[data-step=start][data-demo=true] #demoButton{display:block}body.ui-compact[data-step=scan] #aiDepthButton,body.ui-compact[data-step=scan] #cameraButton,body.ui-compact[data-step=scan] #demoButton{display:none}body.ui-compact[data-step=scan] .controls{grid-template-columns:1fr .72fr .72fr}body.ui-compact[data-step=refine] #cameraButton,body.ui-compact[data-step=refine] #demoButton{display:none}body.ui-compact[data-step=refine] .controls{grid-template-columns:1fr 1fr .72fr .72fr}body.ui-compact[data-step=locked] #cameraButton,body.ui-compact[data-step=locked] #demoButton,body.ui-compact[data-step=locked] #scanButton{display:none}body.ui-compact[data-step=locked] .controls{grid-template-columns:1fr .72fr .72fr}body.ui-compact[data-step=rescan] #cameraButton,body.ui-compact[data-step=rescan] #demoButton{display:none}body.ui-compact[data-step=rescan] .controls{grid-template-columns:1fr 1fr .72fr .72fr}