don't load fathom script unless on production

components/CodeBlock/CodeBlock.tsx

@@ -9,7 +9,7 @@ const Block = styled("div", {
   margin: "1em auto",
   color: "$codeText",
 
-  [`& ${Code}`]: {
+  [`${Code}`]: {
     display: "block",
     overflowX: "auto",
     padding: "1em",

components/NoteTitle/NoteTitle.tsx

@@ -9,7 +9,7 @@ const Title = styled("h1", {
   lineHeight: 1.3,
   fontWeight: 700,
 
-  "& code": {
+  code: {
     margin: "0 0.075em",
   },
 

components/VNC/VNC.tsx

@@ -12,10 +12,10 @@ const Display = styled(
     maxWidth: "800px",
 
     // these are injected by noVNC after connection, so we can't target them directly:
-    "& div": {
+    div: {
       background: "none !important",
 
-      "& canvas": {
+      canvas: {
         cursor: "inherit !important",
       },
     },

components/Video/Video.tsx

@@ -13,7 +13,7 @@ const Player = styled(ReactPlayer, {
   top: 0,
   left: 0,
 
-  "& video": {
+  video: {
     borderRadius: "$rounded",
   },
 });

components/YouTubeEmbed/YouTubeEmbed.tsx

@@ -14,7 +14,7 @@ const Player = styled(ReactPlayer, {
   left: 0,
 
   // target both the lazy thumbnail preview *and* the actual YouTube embed
-  "& .react-player__preview, & iframe": {
+  ".react-player__preview, iframe": {
     borderRadius: "$rounded",
   },
 });