Fix <code> block and inline styles

assets/styles/monokai.css

@@ -1,5 +1,5 @@
 :root {
-    --highlight-background-color: rgb(var(--super-lt-gray));
+    --highlight-background-color: rgb(250, 250, 250);
     --highlight-foreground-color: var(--foreground-body-color);
 }
 

assets/styles/root/002_colors.css

@@ -205,7 +205,7 @@
     border: 1px solid var(--separator-color);
   }
 
-  .highlight code {
+  figure.code code {
     background-color: inherit;
   }
 

assets/styles/root/002_layout.css

@@ -86,6 +86,11 @@
     margin: 0;
   }
 
+  p code {
+    padding-block-start: 0.1em;
+    padding-inline: 0.25em;
+  }
+
   code.nobg {
     display: inline-block;
     margin: 0;
@@ -124,12 +129,13 @@
     }
   }
 
-  figure.code .line > .ln {
-    grid-column: gutter-start;
+  figure.code {
+    grid-column: content-start / content-end;
   }
 
-  figure.code .line > .cl {
-    grid-column: content-start / content-end;
+  figure.code pre {
+    overflow: auto;
+    padding: 1rem;
   }
 
   figure > .container {

assets/styles/root/010_interactions.css

@@ -5,7 +5,7 @@
 }
 
 @layer root {
-  .highlight .ln a {
+  figure.code .ln a {
     -webkit-user-select: none;
     -moz-use-select: none;
     -ms-user-select: none;

assets/styles/root/050_typography.css

@@ -59,7 +59,7 @@
         text-align: center;
     }
 
-    figure .highlight .cl {
+    figure.code .cl {
         white-space: pre-wrap;
     }