:root {
  --duration: 0.5s;
  --animation: ease;
  --stroke: black;
  --stroke-inverted: white;
  --spline-hover: red;
  --rail-hidden: blue;
  --rail-deck: burlywood;
  --rail-deck-hidden: green;
  --grade: sienna;
  --grade-snow: #bfbfbf;
  --stone-wall: darkgray;
  --tunnel: #333;
  --pile-bridge-new: #c96;
  --pile-bridge-fireproof-red: #c33;
  --pile-bridge-drgw: #633;
  --pile-bridge-creosote: #633;
  --pile-bridge-old: #669;
  --wooden-bridge: goldenrod;
  --steel-bridge: steelblue;
  --steel-truss: lightsteelblue;
  --switch-leg-not-aligned: #666;
  --diamond: yellow;
  --control-point-primary: red;
  --control-point-secondary: blue;
  --control-point-tertiary: green;
  --tree: forestgreen;
  --tree-border: darkgreen;
  --tree-cut: burlywood;
  --tree-cut-border: saddlebrown;
  --brakes-applied: red;
  --engine: purple;
  --tender: black;
  --handcar: #f9f;
  --caboose: #f99;
  --coach: gold;
  --waycar: gold;
  --plow: gold;
  --boxcar: #6f9;
  --boxcar-loaded: #3c0;
  --flatcar-cordwood: #fc6;
  --flatcar-cordwood-loaded: orange;
  --flatcar-hopper: #999;
  --flatcar-hopper-loaded: #333;
  --flatcar-logs: #f99;
  --flatcar-logs-loaded: red;
  --flatcar-stakes: #fc6;
  --flatcar-stakes-loaded: #f90;
  --flatcar-tanker: #99f;
  --flatcar-tanker-loaded: blue;
  --spice-verde: green;
  --spice-lime: #70a800;
  --spice-lemon: #d6d600;
  --spice-mild: orange;
  --spice-piquante: orangered;
  --spice-caliente: red;
  --building-fill: #333;
  --building-stroke: black;
  --platform-fill: plum;
  --platform-stroke: purple;
  --pond-fill: #66f;
  --pond-stroke: darkblue;
  --firewood-camp: #c00;
  --engine-house-lightblue: #66f;
  --engine-house-gold: #ff9;
  --engine-house-red: #f66;
  --engine-house-brown: #633;
  --telegraph-office: #fc0;
  --coaling-tower: #fc0;
  --building-beige: #cc9;
  --building-old: #669;
  --fence-fill: transparent;
  --fence-stroke: black;
  --walkway-stroke: black;
  --walkway-fill: #595959;
}

[data-bs-theme='dark'] {
  --stroke: white;
  --stroke-inverted: black;
  --rail-deck: brown;
  --wooden-bridge: #fc3;
  --switch-leg-not-aligned: #333;
  --control-point-primary: magenta;
  --control-point-secondary: cyan;
  --control-point-tertiary: yellow;
  --building-fill: #666;
  --building-stroke: #999;
  --platform-fill: purple;
  --platform-stroke: plum;
  --pond-fill: darkblue;
  --pond-stroke: #66f;
  --fence-fill: transparent;
  --fence-stroke: white;
  --walkway-stroke: #999;
  --walkway-fill: #8c8c8c;
}

body {
  transition: background-color var(--duration) var(--animation);
}

.studio-controls {
  position: absolute;
  z-index: 10;
}

.map-svg {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  z-index: 1;
}

.locator {
  stroke: var(--spice-caliente);
  fill: none;
  stroke-width: 100;
}

.brush {
  fill: var(--tree);
  stroke: var(--tree-border);
  stroke-width: 100;
  fill-opacity: 0.2;
}

.map-border {
  stroke: var(--stroke);
  fill: none;
  stroke-width: 500;
}

.rail,
.rail-deck,
.bumper,
.grade,
.stone-wall,
.tunnel,
.pile-bridge-0,
.pile-bridge-1,
.pile-bridge-2,
.pile-bridge-3,
.pile-bridge-4,
.pile-bridge-5,
.wooden-bridge,
.steel-bridge {
  fill: none;
}

.rail {
  stroke: var(--stroke);
  stroke-width: 92;
}

.radius-0,
.radius-1,
.radius-2,
.radius-3,
.radius {
  fill: none;
  stroke: var(--stroke);
  stroke-width: 32;
}

.radius-0 { stroke: var(--spice-caliente); }
.radius-1 { stroke: var(--spice-mild); }
.radius-2 { stroke: var(--spice-lime); }
.radius-3 { stroke: var(--spice-verde); }

.radius-0.hidden,
.radius-1.hidden,
.radius-2.hidden,
.radius-3.hidden,
.radius.hidden { stroke: none; }

.rail.hidden {
  stroke: var(--rail-hidden);
  stroke-width: 200;
  opacity: 0.5;
}

.rail-deck {
  stroke: var(--rail-deck);
  stroke-width: 256;
}

.rail-deck.hidden {
  stroke: var(--rail-deck-hidden);
  stroke-width: 350;
  opacity: 0.5;
}

.grade {
  stroke: var(--grade);
}

.grade.snow {
  stroke: var(--grade-snow);
}

.bumper {
  fill: var(--engine-house-red);
}

.stone-wall {
  stroke: var(--stone-wall);
}

.tunnel {
  stroke: var(--tunnel);
}

.pile-bridge-0 {
  stroke: var(--pile-bridge-new);
}

.pile-bridge-1 {
  stroke: var(--pile-bridge-new);
}

.pile-bridge-2 {
  stroke: var(--pile-bridge-fireproof-red);
}

.pile-bridge-3 {
  stroke: var(--pile-bridge-drgw);
}

.pile-bridge-4 {
  stroke: var(--pile-bridge-creosote);
}

.pile-bridge-5 {
  stroke: var(--pile-bridge-old);
}

.wooden-bridge {
  stroke: var(--wooden-bridge);
}

.steel-bridge {
  stroke: var(--steel-bridge);
}

.steel-truss {
  stroke: var(--steel-truss);
}

.grade,
.stone-wall,
.tunnel,
.pile-bridge-1,
.pile-bridge-2,
.pile-bridge-3,
.pile-bridge-4,
.pile-bridge-5,
.wooden-bridge,
.steel-bridge,
.steel-truss {
  stroke-width: 400;
}

.grade { stroke-linecap: round; }
.grade.h05 { stroke-width: 1200; }
.grade.h10 { stroke-width: 2000; }

.rail:hover,
.rail-deck:hover,
.grade:hover,
.stone-wall:hover,
.tunnel:hover,
.pile-bridge-1:hover,
.pile-bridge-2:hover,
.pile-bridge-3:hover,
.pile-bridge-4:hover,
.pile-bridge-5:hover,
.wooden-bridge:hover,
.steel-bridge:hover,
.steel-truss:hover {
  opacity: 0.8;
  stroke: var(--spline-hover);
}

.grade.hidden,
.stone-wall.hidden,
.wooden-bridge.hidden,
.steel-bridge.hidden,
.steel-truss.hidden {
  opacity: 0.5;
}

.rail.hidden:hover,
.rail-deck.hidden:hover,
.grade.hidden:hover,
.stone-wall.hidden:hover,
.wooden-bridge.hidden:hover,
.steel-bridge.hidden:hover,
.steel-truss.hidden:hover {
  opacity: 0.8;
}

.switch-leg {
  fill: none;
  stroke: var(--stroke);
  stroke-width: 92;
}

.switch-leg.not-aligned {
  stroke: var(--switch-leg-not-aligned);
}

.diamond {
  fill: var(--diamond);
}

.control-point-0 { fill: var(--control-point-primary); }
.control-point-1 { fill: var(--control-point-secondary); }
.control-point-2 { fill: var(--control-point-tertiary); }

.control-line-0,
.control-line-1,
.control-line-2 {
  fill: none;
  stroke-width: 32;
}
.control-line-0 { stroke: var(--control-point-primary); }
.control-line-1 { stroke: var(--control-point-secondary); }
.control-line-2 { stroke: var(--control-point-tertiary); }

.control-point-0:hover,
.control-point-1:hover,
.control-point-2:hover {
  opacity: 0.5;
}

.map-svg g#frames g text {
  pointer-events: none;
}

.frame {
  rx: 92;
  stroke-width: 32;
  stroke: var(--stroke);
}

.frame:hover {
  opacity: 0.5;
}

.frame.brakes-applied {
  stroke: var(--brakes-applied);
}

.frame.engine { fill: var(--engine); }
.frame.tender { fill: var(--tender); }
.frame.caboose { fill: var(--caboose); }
.frame.waycar { fill: var(--waycar); }

.frame.boxcar { fill: var(--boxcar); }
.frame.boxcar.cargo-loaded { fill: var(--boxcar-loaded); }
.frame.Coach_DSPRR_1 { fill: var(--coach); }
.frame.flatcar_cordwood { fill: var(--flatcar-cordwood); }
.frame.flatcar_cordwood.cargo-loaded { fill: var(--flatcar-cordwood-loaded); }
.frame.flatcar_hopper { fill: var(--flatcar-hopper); }
.frame.flatcar_hopper.cargo-loaded { fill: var(--flatcar-hopper-loaded); }
.frame.FlatCar_Logs { fill: var(--flatcar-logs); }
.frame.FlatCar_Logs.cargo-loaded { fill: var(--flatcar-logs-loaded); }
.frame.FlatCar_Stakes { fill: var(--flatcar-stakes); }
.frame.FlatCar_Stakes.cargo-loaded { fill: var(--flatcar-stakes-loaded); }
.frame.FlatCar_Tanker { fill: var(--flatcar-tanker); }
.frame.FlatCar_Tanker.cargo-loaded { fill: var(--flatcar-tanker-loaded); }
.frame.hopperBB { fill: var(--flatcar-hopper); }
.frame.hopperBB.cargo-loaded { fill: var(--flatcar-hopper-loaded); }
.frame.OahuWaterCar { fill: var(--flatcar-tanker); }
.frame.OahuWaterCar.cargo-loaded { fill: var(--flatcar-tanker-loaded); }
.frame.plantationcar_boxcar { fill: var(--boxcar); }
.frame.plantationcar_boxcar.cargo-loaded { fill: var(--boxcar-loaded); }
.frame.plantationcar_flatcar { fill: var(--boxcar); }
.frame.plantationcar_flatcar.cargo-loaded { fill: var(--boxcar-loaded); }
.frame.plantationcar_flatcar_logs { fill: var(--flatcar-logs); }
.frame.plantationcar_flatcar_logs.cargo-loaded { fill: var(--flatcar-logs-loaded); }
.frame.plantationcar_flatcar_stakes { fill: var(--flatcar-stakes); }
.frame.plantationcar_flatcar_stakes.cargo-loaded { fill: var(--flatcar-stakes-loaded); }
.frame.plantationcar_flatcar_stakes_bulkhead { fill: var(--flatcar-cordwood); }
.frame.plantationcar_flatcar_stakes_bulkhead.cargo-loaded { fill: var(--flatcar-cordwood-loaded); }
.frame.plantationcar_hopper_large { fill: var(--flatcar-hopper); }
.frame.plantationcar_hopper_large.cargo-loaded { fill: var(--flatcar-hopper-loaded); }
.frame.plantationcar_hopper_medium { fill: var(--flatcar-hopper); }
.frame.plantationcar_hopper_medium.cargo-loaded { fill: var(--flatcar-hopper-loaded); }
.frame.plantationcar_hopper_small { fill: var(--flatcar-hopper); }
.frame.plantationcar_hopper_small.cargo-loaded { fill: var(--flatcar-hopper-loaded); }
.frame.plantationcar_tanker { fill: var(--flatcar-tanker); }
.frame.plantationcar_tanker.cargo-loaded { fill: var(--flatcar-tanker-loaded); }
.frame.plow { fill: var(--plow); }
.frame.SkeletonCar { fill: var(--flatcar-logs); }
.frame.SkeletonCar.cargo-loaded { fill: var(--flatcar-logs-loaded); }
.frame.StockCar { fill: var(--boxcar); }
.frame.StockCar.cargo-loaded { fill: var(--boxcar-loaded); }
.frame.tankcarNCO { fill: var(--flatcar-tanker); }
.frame.tankcarNCO.cargo-loaded { fill: var(--flatcar-tanker-loaded); }
.frame.VentilatedBoxcarCC { fill: var(--boxcar); }
.frame.VentilatedBoxcarCC.cargo-loaded { fill: var(--boxcar-loaded); }
.frame.WaterCar { fill: var(--flatcar-tanker); }
.frame.WaterCar.cargo-loaded { fill: var(--flatcar-tanker-loaded); }

.frame-text {
  dominant-baseline: middle;
  font-size: 50%;
  text-anchor: middle;
}

.frame-text.engine,
.frame-text.tender {
  fill: white;
}

.grade-text-2 { fill: var(--spice-verde); }
.grade-text-3 { fill: var(--spice-lime); }
.grade-text-4 { fill: var(--spice-lemon); }
.grade-text-5 { fill: var(--spice-mild); }
.grade-text-6 { fill: var(--spice-piquante); }
.grade-text-7 { fill: var(--spice-caliente); }

.radius-text-0 { fill: var(--spice-caliente); }
.radius-text-1 { fill: var(--spice-mild); }
.radius-text-2 { fill: var(--spice-lime); }
.radius-text-3 { fill: var(--spice-verde); }

.frame-text,
.grade-text,
.radius-text,
.player {
  fill: var(--stroke);
}

.gizmo line,
.gizmo path,
.industry path {
  stroke: var(--stroke);
  stroke-width: 20;
}

.industry .building {
  fill: var(--building-fill);
  stroke: var(--building-stroke);
}

.industry .platform {
  fill: var(--platform-fill);
  stroke: var(--platform-stroke);
}

.industry .walkway {
  fill: var(--walkway-fill);
  stroke: var(--walkway-stroke);
}

.industry .fence {
  fill: var(--fence-fill);
  stroke: var(--fence-stroke);
}

.industry .pond {
  fill: var(--pond-fill);
  stroke: var(--pond-stroke);
}

.industry.CoalTower .building { fill: var(--coaling-tower); }
.industry.enginehouse_alpine .building { fill: var(--engine-house-lightblue); }
.industry.enginehouse_aspen .building { fill: var(--engine-house-gold); }
.industry.enginehouse_barn .building { fill: var(--engine-house-red); }
.industry.enginehouse_princess .building { fill: var(--engine-house-brown); }
.industry.engineshed_style1 .building { fill: var(--engine-house-red); }
.industry.engineshed_style2 .building { fill: var(--engine-house-brown); }
.industry.engineshed_style3 .building { fill: var(--building-beige); }
.industry.engineshed_style4 .building { fill: var(--building-old); }
.industry.firewooddepot .building { fill: var(--firewood-camp); }
.industry.telegraphoffice .building { fill: var(--telegraph-office); }
.industry.watertower_1870_style1 .building { fill: var(--engine-house-red); }
.industry.watertower_1870_style2 .building { fill: var(--engine-house-brown); }
.industry.watertower_1870_style3 .building { fill: var(--building-beige); }
.industry.watertower_1870_style4 .building { fill: var(--building-old); }
.industry.watertower_kanaskat_style1 .building { fill: var(--engine-house-red); }
.industry.watertower_kanaskat_style2 .building { fill: var(--engine-house-brown); }
.industry.watertower_kanaskat_style3 .building { fill: var(--building-beige); }
.industry.watertower_kanaskat_style4 .building { fill: var(--building-old); }
.industry.WaterTower_Small .building { fill: var(--building-beige); }

.gizmo .x { fill: var(--engine-house-red); }
.gizmo .y { fill: var(--boxcar); }
.gizmo .z { fill: var(--engine-house-lightblue); }

.gizmo path:hover { fill: var(--stroke); }
.gizmo .x:hover { stroke: var(--engine-house-red); }
.gizmo .y:hover { stroke: var(--boxcar); }
.gizmo .z:hover { stroke: var(--engine-house-lightblue); }

image {
  transition: filter var(--duration) var(--animation);
}

[data-bs-theme='dark'] image {
  --webkit-filter: invert(100%);
  filter: invert(100%);
}

.tree {
  fill: var(--tree);
  stroke: var(--tree-border);
  stroke-width: 50;
}

.tree.cut {
  fill: var(--tree-cut);
  stroke: var(--tree-cut-border);
}

.turntable {
  stroke: var(--stroke);
  stroke-width: 20;
  fill: var(--stroke-inverted);
}