*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:#fff;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#111;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#surface{position:fixed;inset:0}#surface canvas{position:absolute;inset:0;display:block;width:100%;height:100%}#base{z-index:0}#live{z-index:1}#hud{position:fixed;top:env(safe-area-inset-top,0px);left:0;z-index:2;padding:8px 10px;background:#ffffffe0;border-bottom-right-radius:6px;white-space:pre;font-variant-numeric:tabular-nums;pointer-events:none}#controls{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);left:8px;z-index:2;display:flex;gap:8px}#controls button{font:inherit;padding:8px 12px;border:1px solid #ccc;border-radius:6px;background:#fff;color:inherit}body:not(.measuring) #hud,body:not(.measuring) #controls{display:none}