contain code-block overflow with bordered horizontal scroll on mobile

Long code lines can overflow narrow screens and trigger horizontal page scrolling.
For code, wrapping/breaking tokens is undesirable because it hurts copy/paste and
readability fidelity.

Style `pre` as an explicit container (background, border, radius, padding) and
enable `overflow-x: auto` so overflow is contained inside the code block instead
of the page.

The container styling, especially the border, is intentional and important: it
makes the block read as a distinct container, which makes it easier to recognize
when it is scrollable.

Style inline `code` to match the visual language, and reset `pre code` background
and padding so nested code does not get double styling.

Result: on mobile, overflowing code stays unbroken and scrolls within a clearly
visible bounded container; on desktop, behavior remains normal when no overflow occurs.

Author: ritorhymes

assets/sass/main.scss

@@ -27,6 +27,22 @@ big {
 small {
   font-size: 70%;
 }
+pre {
+  background-color: rgb(247, 243, 239);
+  border: 1px solid #c5bbb0;
+  border-radius: 0.5em;
+  padding: 1em;
+  overflow-x: auto;
+}
+code {
+  background-color: rgb(247, 243, 239);
+  padding: 0.1em 0.3em;
+  border-radius: 0.25em;
+}
+pre code {
+  background-color: transparent;
+  padding: 0;
+}
 div.feature-matrix {
   table {
     border-collapse: collapse;