Calc2

frontend/app/assets/css/_prose.scss

@@ -69,6 +69,58 @@
     p { margin: 0.2em 0; }
   }
 
+  // math callout boxes — ```theorem, ```example, … (see utils/markdown.ts):
+  // the blockquote's shape, but the left edge wears the kind's colour, and
+  // the label row is a native <details> toggle — the box folds away under it.
+  .md-box {
+    @each $kind in example theorem corollary definition proof proposition lemma {
+      &.md-box--#{$kind} { --md-box: var(--box-#{$kind}); }
+    }
+
+    border-left-color: var(--md-box);
+    background: color-mix(in srgb, var(--md-box) 6%, transparent);
+
+    .md-box-title {
+      display: flex;
+      align-items: center;
+      gap: 0.6em;
+      margin: 0;
+      color: var(--md-box);
+      font-weight: 730;
+      font-size: 0.85em;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      cursor: pointer;
+      user-select: none;
+      list-style: none;
+      transition: margin-bottom 0.15s ease;
+
+      &::-webkit-details-marker { display: none; }
+
+      // the caret: points down while open, turns aside when the box folds
+      &::before {
+        content: '';
+        flex: none;
+        width: 0.42em;
+        height: 0.42em;
+        border-right: 2px solid currentColor;
+        border-bottom: 2px solid currentColor;
+        transform: rotate(45deg);
+        transition: transform 0.15s ease;
+      }
+    }
+
+    details[open] .md-box-title { margin-bottom: 0.4em; }
+
+    // the fold's intent lands on the <details> the moment it is clicked
+    // (see MarkdownView): the label closes in and the caret turns at the
+    // *start* of the fold, while [open] itself settles only as it ends
+    details[data-open='0'] .md-box-title { margin-bottom: 0; }
+
+    details:not([open]) .md-box-title::before,
+    details[data-open='0'] .md-box-title::before { transform: rotate(-45deg); }
+  }
+
   hr { border: 0; border-top: 1px solid var(--border); margin: 2.4em 0; }
 
   table {