Getting somewhere

Styles/main.css

@@ -0,0 +1,20 @@
+/* Error: Can't find stylesheet to import.
+ *   ,
+ * 4 | / @use "~@material/theme" with (
+ * 5 | |   $primary: $fxl-orange,
+ * 6 | |   $on-primary: $fxl-gray
+ * 7 | | );
+ *   | '-^
+ *   '
+ *   main.scss 4:1  root stylesheet */
+
+body::before {
+  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
+      "Droid Sans Mono", monospace, monospace;
+  white-space: pre;
+  display: block;
+  padding: 1em;
+  margin-bottom: 1em;
+  border-bottom: 2px solid black;
+  content: "Error: Can't find stylesheet to import.\a   \2577 \a 4 \2502  \250c  @use \"~@material/theme\" with (\a 5 \2502  \2502    $primary: $fxl-orange,\a 6 \2502  \2502    $on-primary: $fxl-gray\a 7 \2502  \2502  );\a   \2502  \2514 \2500 ^\a   \2575 \a   main.scss 4:1  root stylesheet";
+}

Styles/main.scss

@@ -6,7 +6,9 @@ $fxl-orange: #ff6e40;
   $on-primary: $fxl-gray
 );
 
+@use "@material/button/styles";
 @use "@material/icon-button/icon-button";
+@use "@material/linear-progress";
 @use "@material/top-app-bar/mdc-top-app-bar";
 @use "@material/typography/mdc-typography";
 
@@ -18,17 +20,43 @@ html, body {
 
 body {
   @include icon-button.core-styles;
-  
+
   display: flex;
   flex-direction: column;
-  
+
   main {
     display: flex;
     flex: 1;
     flex-direction: column;
+
+    header {
+      ul {
+        align-content: center;
+        display: flex;
+        justify-content: center;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        li {
+          margin: 0 0.25em;
+        }
+      }
+    }
+
+    article {
+      display: flex;
+      flex: 1;
+      text-align: center;
+
+      canvas {
+        margin: 2em auto;
+      }
+    }
   }
-  
+
   footer {
+    background-color: $fxl-orange;
     font-size: smaller;
     text-align: center;
   }