big commit

static/css/main.css

@@ -255,14 +255,12 @@ th-literate-program {
     .tree summary:hover {
 
         & pre,
-        & th-literate-program {
+        & th-literate-program:not([data-mode="output"]) {
             background-color: var(--shaded-against-background-twice);
         }
     }
 }
 
-
-
 pre>code,
 th-literate-program>code {
     padding: 0;
@@ -276,7 +274,8 @@ th-literate-program {
 
 /* And don't let code examples fly off and overflow the window */
 
-pre {
+pre,
+th-literate-program {
     min-width: 0;
     width: auto;
     overflow: auto;
@@ -554,30 +553,6 @@ th-literate-program[data-mode="input"] {
 }
 
 th-literate-program[data-mode="output"] {
-    position: relative;
-
-    & code {
-        display: block;
-    }
-
-    & code.error {
-        color: var(--error-color);
-    }
-
-    &::after {
-        content: 'Output';
-
-        padding: 8px;
-
-        position: absolute;
-        right: 0;
-        top: 0;
-
-        opacity: 50%;
-    }
-}
-
-th-literate-program[data-mode="graphics"] {
     padding: 0;
     background: none;
     border: none;
@@ -593,6 +568,10 @@ th-literate-program[data-mode="graphics"] {
         display: none;
     }
 
+    & pre>code {
+        display: block;
+    }
+
     & pre.error {
         color: var(--error-color);
         position: relative;
@@ -614,6 +593,27 @@ th-literate-program[data-mode="graphics"] {
             opacity: 50%;
         }
     }
+
+    & pre.console {
+        position: relative;
+
+        &:empty {
+            display: none;
+        }
+
+        &::after {
+            content: 'Console';
+
+            padding: 8px;
+
+            position: absolute;
+            right: 0;
+            top: 0;
+
+            color: var(--text-color);
+            opacity: 50%;
+        }
+    }
 }
 
 /* Syntax highlighting */

static/css/tairu.css

@@ -1,28 +1,4 @@
 .tileset-cardinal-directions-demo th-bc {
-    & ul {
-        display: flex;
-        flex-direction: row;
-    }
-
-    & ul.tileset-demo {
-        margin-top: 16px;
-    }
-
-    & ul.tileset-demo::after {
-        display: none !important;
-    }
-
-    & li.full-image {
-        flex-shrink: 0;
-    }
-
-    & li.tileset-pieces {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        justify-content: center;
-    }
-
     & .horizontal-tile-strip {
         display: flex;
         flex-direction: row;

static/css/tree.css

@@ -218,8 +218,8 @@ th-bc {
     flex-grow: 1;
 
     /* Bit of a hack to make <pre>s in <th-bc> have scrollbars proper. */
-    &:has(pre) {
-        overflow: auto;
+    &:has(pre, th-literate-program) {
+        overflow: hidden;
     }
 }