* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 14px/1.4 system-ui, sans-serif; }
#map { position: absolute; left: 320px; top: 0; bottom: 0; right: 0; }
#panel { position: absolute; left: 0; top: 0; width: 320px; bottom: 0; padding: 12px;
         overflow: auto; background: #fff; border-right: 1px solid #ddd; }
#panel h2 { margin: 0 0 8px; font-size: 16px; }
#panel small { color: #666; font-weight: normal; }
#toggles { margin-bottom: 8px; }
#toggles label { display: inline-block; margin: 2px 6px 2px 0; }
.legend { margin-top: 8px; color: #555; font-size: 12px; }
.swatch { display: inline-block; width: 12px; height: 12px; vertical-align: middle; margin: 0 1px; }
.hint { color: #888; }
#detail table { border-collapse: collapse; margin-top: 6px; }
#detail td { padding: 1px 8px 1px 0; }
#detail td:first-child { color: #555; }