:root{font-family:Arial,sans-serif;color:#283e4c;background:#f5f7f8}*{box-sizing:border-box}body{margin:0}header{padding:16px 22px;background:white;border-bottom:1px solid #dce4e8}h1{font-size:19px;margin:0 0 6px;overflow-wrap:anywhere}header p{font-size:13px;margin:0;color:#5b6e7a}.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 22px;background:#fff}button,.back{border:1px solid #c9d6dd;border-radius:6px;background:#fff;padding:9px 12px;color:#294a60;font-size:13px;text-decoration:none;cursor:pointer}.toolbar label{font-size:13px;display:flex;align-items:center;gap:5px;margin-left:4px}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #227cb5;outline-offset:2px}#stage{position:relative;height:max(340px,calc(100dvh - 244px));min-height:340px;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}#loading{position:absolute;inset:45% 20px auto;text-align:center;color:#536878;pointer-events:none}#dimension-labels{position:absolute;inset:0;pointer-events:none}#dimension-labels span{position:absolute;transform:translate(-50%,-50%);font-size:13px;white-space:nowrap;background:#ffffffed;border:1px solid #c7d8e2;padding:4px 6px;border-radius:4px}footer{padding:10px 22px 14px;background:#fff;font-size:12px;line-height:1.5;color:#5b6e7a}footer p{margin:0 0 4px}details summary{cursor:pointer;color:#365b73}details p{padding-top:5px;max-width:850px}@media(max-width:540px){header{padding:12px 16px}h1{font-size:17px}.toolbar{padding:8px 16px;gap:6px}button,.back{padding:8px;font-size:12px}.toolbar label{font-size:12px}footer{padding:10px 16px}#stage{height:max(360px,calc(100dvh - 280px))}}