Clean up scenarios; move some styles into .css files

public/assets/images/scenario_template.svg

@@ -1,27 +1,7 @@
 <?xml version="1.0" standalone="no"?>
-<svg viewBox="-10 -10 200 300"
-  xmlns="http://www.w3.org/2000/svg">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300">
   <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/radial.css" type="text/css" />
   <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
-  <style>
-    #background {
-      stroke: #304b75;
-      fill: #bacae3;
-    }
-
-    pattern use {
-      stroke: black;
-      stroke-width: 0.3px;
-    }
-
-    .cw-60-deg {
-      transform: rotate(60deg);
-    }
-
-    .ccw-60-deg {
-      transform: rotate(-60deg);
-    }
-  </style>
   <defs>
     <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
 
@@ -29,8 +9,8 @@
 
     <pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse">
       <use href="#ast-line"/>
-      <use class="cw-60-deg" href="#ast-line"/>
-      <use class="ccw-60-deg" href="#ast-line"/>
+      <use href="#ast-line" transform="rotate(60)"/>
+      <use href="#ast-line" transform="rotate(-60)"/>
 
       <use x="-8.66" y="-15" href="#ast-line"/>
       <use x="-8.66" y="-15" transform="rotate(60 -8.66 -15)" href="#ast-line"/>