#bm-colormap { background: #ffffff; color: #000000; font-family: Archivo, Helvetica, Arial, sans-serif; max-width: 960px; margin: 0 auto; line-height: 1.55; }
#bm-colormap * { box-sizing: border-box; }
#bm-colormap .bm-sub { color: #5c5c5c; margin: 0 0 20px 0; font-size: 16px; }
#bm-colormap .bm-frame { border: 3px solid #000000; padding: 3px; }
#bm-colormap .bm-frame-inner { border: 1px solid #000000; padding: 16px; }
#bm-colormap .bm-toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; border-bottom: 2px solid #000000; padding-bottom: 14px; margin-bottom: 14px; }
#bm-colormap .bm-group-label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px; }
#bm-colormap .bm-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
#bm-colormap .bm-swatch { width: 30px; height: 30px; border: 1px solid #000000; padding: 0; cursor: pointer; background-clip: padding-box; }
#bm-colormap .bm-swatch.bm-active { outline: 3px solid #000000; outline-offset: 2px; }
#bm-colormap .bm-swatch:focus-visible { outline: 3px solid #000000; outline-offset: 2px; }
#bm-colormap .bm-custom { width: 30px; height: 30px; border: 1px solid #000000; padding: 0; cursor: pointer; }
#bm-colormap .bm-btn { font-family: inherit; font-size: 14px; font-weight: 700; background: #ffffff; color: #000000; border: 2px solid #000000; padding: 7px 14px; cursor: pointer; }
#bm-colormap .bm-btn:hover { background: #000000; color: #ffffff; }
#bm-colormap .bm-btn:focus-visible { outline: 3px solid #000000; outline-offset: 2px; }
#bm-colormap .bm-spacer { flex: 1 1 auto; }
#bm-colormap .bm-maptitle { display: block; width: 100%; font-family: inherit; font-size: 24px; font-weight: 800; text-align: center; border: none; border-bottom: 1px dashed #c9c9c9; background: transparent; color: #000000; padding: 4px 0; margin: 0 0 10px 0; }
#bm-colormap .bm-maptitle:focus { outline: none; border-bottom: 1px solid #000000; }
#bm-colormap .bm-maptitle::placeholder { color: #c9c9c9; }
#bm-colormap .bm-mapwrap { position: relative; min-height: 120px; }
#bm-colormap svg.bm-map { display: block; width: 100%; height: auto; }
#bm-colormap .bm-state { stroke: #000000; stroke-width: 0.6; cursor: pointer; }
#bm-colormap .bm-state:hover { stroke-width: 1.6; }
#bm-colormap .bm-hoverbox { position: absolute; top: 0; left: 0; background: #000000; color: #ffffff; font-size: 13px; font-weight: 700; padding: 4px 9px; pointer-events: none; display: none; }
#bm-colormap .bm-loading { font-size: 14px; color: #5c5c5c; padding: 20px 0; }
#bm-colormap .bm-statusline { font-size: 13px; color: #5c5c5c; margin-top: 10px; }
#bm-colormap .bm-legend { border-top: 2px solid #000000; margin-top: 14px; padding-top: 14px; }
#bm-colormap .bm-legend-title { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
#bm-colormap .bm-legend-rows { display: flex; flex-wrap: wrap; gap: 8px 20px; }
#bm-colormap .bm-legend-row { display: flex; align-items: center; gap: 8px; }
#bm-colormap .bm-legend-chip { width: 18px; height: 18px; border: 1px solid #000000; flex: 0 0 auto; }
#bm-colormap .bm-legend-input { font-family: inherit; font-size: 14px; border: none; border-bottom: 1px solid #000000; padding: 2px 0; width: 150px; background: transparent; color: #000000; }
#bm-colormap .bm-legend-input:focus { outline: none; border-bottom-width: 2px; }
#bm-colormap .bm-legend-empty { font-size: 14px; color: #5c5c5c; }
#bm-colormap .bm-section { margin-top: 36px; }
#bm-colormap h2 { font-size: 22px; font-weight: 800; border-bottom: 2px solid #000000; padding-bottom: 6px; margin: 0 0 12px 0; }
#bm-colormap p { margin: 0 0 12px 0; font-size: 16px; }
#bm-colormap ul { margin: 0 0 12px 0; padding-left: 22px; }
#bm-colormap li { margin-bottom: 6px; }
#bm-colormap a { color: #000000; text-decoration: underline; text-underline-offset: 2px; }
#bm-colormap a:hover { text-decoration-thickness: 2px; }
#bm-colormap .bm-related { display: flex; flex-wrap: wrap; gap: 8px; }
#bm-colormap .bm-related a { border: 1px solid #000000; padding: 6px 12px; text-decoration: none; font-size: 14px; font-weight: 700; }
#bm-colormap .bm-related a:hover { background: #000000; color: #ffffff; }
#bm-colormap .bm-disclaimer { border: 1px solid #000000; padding: 12px 14px; font-size: 13px; color: #5c5c5c; margin-top: 36px; }
#bm-colormap .bm-hublist { columns: 2; column-gap: 40px; }
@media (max-width: 600px) {
  #bm-colormap .bm-frame-inner { padding: 10px; }
  #bm-colormap .bm-hublist { columns: 1; }
}