:root{font-family:system-ui,sans-serif;color:#35422f;background:#f0f1e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}#app{height:100dvh;display:flex;flex-direction:column}header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(5px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 5px max(16px,env(safe-area-inset-left));font-size:13px;font-weight:600;border-bottom:1px solid #dce0d2}main{flex:1;min-height:0;position:relative;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}canvas:focus-visible{outline:2px solid #718361;outline-offset:-2px}.view-switch{display:flex;gap:6px}button{min-width:72px;min-height:44px;padding:10px 12px;border:1px solid #d3d9c9;border-radius:7px;background:#fafbf6eb;color:#65735a;font:500 12px system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}button.active{background:#536848;color:#fff;border-color:#536848}button:focus-visible{outline:2px solid #536848;outline-offset:2px}.plot-size{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));padding:7px 10px;border-radius:5px;background:#fafbf6dc;font-size:12px;pointer-events:none}#loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px}#measurements{position:absolute;inset:0;pointer-events:none;overflow:hidden}.measurement{position:absolute;transform:translate(-50%,-50%);padding:4px 6px;border:1px solid #c9d4bf;border-radius:4px;background:#fafbf6f2;color:#3e5535;font-size:11px;font-weight:600;white-space:nowrap}button.icon{min-width:44px;padding:10px;font-size:18px;line-height:1}.corner{position:absolute;transform:translate(-50%,-50%);min-width:18px;padding:1px 4px;border-radius:9px;background:#536848;color:#fff;font-size:11px;font-weight:700;text-align:center}