@keyframes wyrm-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes wyrm-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
.wyrm-tile {
  position: absolute;
  width: 256px;
  height: 256px;
  fill: none;
  stroke: black;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.wyrm-tile * {
  pointer-events: painted;
}
.wyrm-county {
  fill: #677;
  stroke-width: 0.2;
  stroke-dasharray: 1 2;
}
.wyrm-city {
  fill: #677;
  stroke-width: 0.2;
}
.wyrm-water {
  fill: #b5c0d0;
  fill-opacity: 0.8;
  stroke: none;
}
.wyrm-lake {
  fill: #b5c0d0;
  fill-opacity: 0.8;
  stroke: none;
}
.wyrm-pond {
  fill: #b5c0d0;
  fill-opacity: 0.8;
  stroke: none;
}
.wyrm-river {
  fill: #b5c0d0;
  fill-opacity: 0.8;
  stroke: none;
}
.wyrm-wetland {
  fill: #b8d0bd;
  fill-opacity: 0.8;
  stroke: none;
}
.wyrm-leisure {
  fill: #88cc88;
  fill-opacity: 0.6;
  stroke-width: 0.1;
}
.wyrm-cemetery {
  fill: #aaccaa;
  fill-opacity: 0.6;
  stroke-width: 0.1;
}
.wyrm-building {
  fill: #bca9a9;
  fill-opacity: 0.7;
  stroke: #baa;
  stroke-width: 0.5;
}
.wyrm-retail {
  fill: #b99;
  fill-opacity: 0.25;
  stroke: none;
}
.wyrm-parking {
  fill: #cca;
  fill-opacity: 0.6;
  stroke: none;
}
.wyrm-path {
  stroke-opacity: 0.5;
  stroke-dasharray: 1 3;
}
.wyrm-railway {
  stroke: #642;
  stroke-opacity: 0.6;
  stroke-width: 2.5;
  stroke-dasharray: 1 1.5;
  stroke-linecap: butt;
  stroke-linejoin: butt;
}
.wyrm-motorway {
  /* #ffd9a9, 60% opacity over #667777 => #d3ba98 */
  stroke: #d3ba98;
  stroke-width: 3;
}
.wyrm-trunk {
  /* #ffe0a9, 60% opacity over #667777 => #d3bf98 */
  stroke: #d3bf98;
  stroke-width: 2.75;
}
.wyrm-primary {
  /* #ffeaa9, 60% opacity over #667777 => #d3c698 */
  stroke: #d3c698;
  stroke-width: 2.5;
}
.wyrm-secondary {
  /* #fff4a9, 60% opacity over #667777 => #d3ce98 */
  stroke: #d3ce98;
  stroke-width: 2.25;
}
.wyrm-tertiary {
  /* #ffffa9, 60% opacity over #667777 => #ded698 */
  stroke: #ded698;
  stroke-width: 2.0;
}
.wyrm-road {
  /* #cccccc, 60% opacity over #667777 => #adb0b0 */
  stroke: #adb0b0;
  stroke-width: 1;
}
.wyrm-segment {
  fill: #aaa;
  stroke-width: 0.2;
}
.wyrm-controller {
  fill: #88bbff;
  stroke-width: 0.5;
}
.wyrm-tag_reader {
  fill: #88bbff;
  stroke-width: 0.5;
}
.wyrm-weather_sensor {
  fill: #88bbff;
  stroke-width: 0.5;
}
.wyrm-beacon {
  fill: #4488ee;
  stroke-width: 0.5;
}
.wyrm-ramp_meter {
  fill: #4488ee;
  stroke-width: 0.5;
}
.wyrm-camera {
  fill: #88bbff;
  stroke-width: 0.5;
}
.wyrm-lcs {
  fill: #4488ee;
  stroke-width: 0.5;
}
.wyrm-dms {
  fill: #4488ee;
  stroke-width: 0.5;
}
.wyrm-incident {
  fill: #ff4444;
  stroke-width: 0.5;
}