Switch to scss to reduce css bundle size, switch to cyan colour theme

site.scss

@@ -0,0 +1,53 @@
+@use "node_modules/@picocss/pico/scss/pico" with (
+  $theme-color: "cyan",
+  $modules: (
+    "content/code": false,
+    "content/embedded": true,
+    "content/figure": false,
+    "content/miscs": false,
+    "content/table": false,
+    "forms/checkbox-radio-switch": false,
+    "forms/input-color": false,
+    "forms/input-date": false,
+    "forms/input-file": false,
+    "forms/input-range": false,
+    "forms/input-search": false,
+    "components/card": false,
+    "components/dropdown": false,
+    "components/loading": false,
+    "components/group": false,
+    "components/modal": false,
+    "components/progress": false,
+    "components/tooltip": false,
+    "layout/grid": false,
+    "layout/landmarks": false,
+    "layout/overflow-auto": false,
+    "utilities/accessibility": false,
+    "utilities/reduce-motion": false,
+  )
+);
+
+.closed-on-mobile {
+  display: none;
+}
+
+@media (min-width: 992px) {
+  main.responsive-nav {
+    --block-spacing-horizontal: calc(var(--spacing) * 1.75);
+    grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
+    display: grid;
+    grid-template-columns: 200px auto;
+  }
+
+  .closed-on-mobile {
+    display: block;
+  }
+
+  main > aside nav {
+    position: fixed;
+    width: 200px;
+    max-height: calc(100vh - 5.5rem);
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}