*{box-sizing:border-box}body{margin:0;font:14px/1.5 system-ui;color:#102e43;background:#f1f6fa}#map{height:360px;width:100%;background:#d8e5ee}#map.is-drawing{touch-action:none}.tools{display:flex;flex-wrap:wrap;gap:8px;padding:12px;background:#fff;border-block:1px solid #d2dce5}button{font:700 14px/1.3 system-ui;min-height:46px;padding:12px 16px;border:2px solid transparent;border-radius:9px;background:#e9eef4;color:#163247;cursor:pointer;box-shadow:0 2px 3px #102e4318}#draw{background:#155cba;color:#fff}#corners{background:#663ca6;color:#fff}#finish{background:#15703b;color:#fff}#clear{background:#b42332;color:#fff}#undo,#cancel{border-color:#b7c5d2}button:hover:not(:disabled){filter:brightness(.9)}button:disabled{opacity:.46;cursor:not-allowed;box-shadow:none}button:focus-visible{outline:3px solid #102e43;outline-offset:3px}#map-status,.hint{padding:12px 16px;margin:0}#map-status{min-height:52px;font-weight:650}.hint{font-size:13px;background:#fff}@media(max-width:540px){.tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}button{padding:10px 8px;font-size:13px}#finish{grid-column:1/-1;grid-row:2}#map{height:330px}}

body{height:100vh;display:flex;flex-direction:column}#map{height:auto;flex:1 0 220px;min-height:220px}.tools,#map-status,.help{flex-shrink:0}.help{background:#fff}.help summary{padding:10px 16px;cursor:pointer;font-weight:650}.hint{padding-top:0}#map-status{min-height:52px}

.rotation{display:flex;gap:6px;justify-content:center;padding:6px;background:#fff;flex-shrink:0}.rotation button{min-height:36px;padding:7px 12px;font-size:13px}button[hidden]{display:none}#remove-last{color:#a32432;border-color:#dfb8bd;background:#fff}

#map-status{min-height:0;padding:8px 12px;font-size:13px}.tools{gap:6px;padding:8px}#map{min-height:380px;flex-basis:380px}.help summary{padding:6px 12px;font-size:12px}@media(max-width:540px){.tools{padding:6px;gap:6px}#map{min-height:400px;flex-basis:400px}}