*{box-sizing:border-box}html,body{margin:0;background:#fff;color:#222;font-family:Arial,Helvetica,sans-serif}main{width:min(920px,100%);margin:0 auto;padding:28px 16px 56px}h1{margin:0;text-align:center;font-size:1.8rem;font-weight:700;letter-spacing:0}.lede{margin:8px auto 18px;max-width:38rem;text-align:center;color:#555;line-height:1.45;font-size:1rem}.map{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto auto;align-items:center;justify-items:center;column-gap:8px;row-gap:4px}.axis-label{color:#7e7e7e;font-size:clamp(1rem,2.5vw,1.35rem);font-weight:400;line-height:1;-webkit-user-select:none;user-select:none}.top,.bottom{grid-column:2}.left{grid-column:1;grid-row:2}.right{grid-column:3;grid-row:2}.square{grid-column:2;grid-row:2;width:min(560px,100%,calc(100svh - 340px))}.frame{position:relative;width:100%;aspect-ratio:1}canvas{width:100%;height:100%;display:block;cursor:crosshair;touch-action:none;background:#fff}canvas:focus{outline:none}canvas:focus-visible{outline:2px solid #222;outline-offset:4px}.readout{margin:16px 0 0;text-align:center;font-size:1.05rem;min-height:1.3em}.count,.error{margin:6px 0 0;text-align:center}.count{color:#555}.error{color:#9b1c1c}.remove{display:block;margin:14px auto 0;padding:0;border:0;background:none;color:#555;font:inherit;text-decoration:underline;cursor:pointer}.remove:hover{color:#111}.remove[hidden]{display:none}noscript p{text-align:center;color:#9b1c1c}@media(max-width:640px){main{padding-top:20px}h1{font-size:1.45rem}.lede{font-size:.95rem}.map{column-gap:6px}}