1article math {
 2  font-family: "STIX Two Math", var(--font-stix-two-math), 'Cambria Math',
 3    'DejaVu Math TeX Gyre', 'Libertinus Math', math, var(--kp-font-serif),
 4    ui-serif, serif, var(--kp-font-emoji);
 5
 6  &[display="block"] {
 7    /* MathML overflow is not supported in Firefox */
 8    /* See https://bugzilla.mozilla.org/show_bug.cgi?id=1928784 */
 9    overflow-x: auto;
10    overflow-y: hidden;
11
12    margin-block: 1em;
13  }
14
15  /* Ported from Typst's generated equation CSS. */
16  /* See https://github.com/typst/typst/blob/094b9634d2aa506757d342103411a33a347e3012/crates/typst-html/src/mathml.rs */
17
18  /* Alignment */
19  mtable.right-align > mtr > mtd,
20  mtable > mtr > mtd.right-align,
21  mtable.left-align > mtr > mtd.right-align,
22  mtable.aligned > mtr > mtd:nth-child(odd) {
23    justify-items: end;
24    text-align: right;
25  }
26  mtable.cases > mtr > mtd,
27  mtable.left-align > mtr > mtd,
28  mtable > mtr > mtd.left-align,
29  mtable.aligned > mtr > mtd:nth-child(even),
30  &:is(:not([display])) > mtable.multiline-equation > mtr > mtd {
31    justify-items: start;
32    text-align: left;
33  }
34  mtable.cases > mtr > mtd,
35  mtable.aligned > mtr > mtd,
36  mtable > mtr > mtd.flushed,
37  mtable > mtr > mtd.left-flush {
38    padding-left: 0;
39  }
40  mtable.cases > mtr > mtd,
41  mtable.aligned > mtr > mtd,
42  mtable > mtr > mtd.flushed,
43  mtable > mtr > mtd.right-flush {
44    padding-right: 0;
45  }
46
47  /* Tables */
48  mtable {
49    math-style: inherit;
50  }
51  mtd {
52    math-depth: auto-add;
53    math-style: compact;
54    math-shift: compact;
55  }
56
57  /* Equations */
58  mtable.multiline-equation > mtr > mtd {
59    math-depth: inherit;
60    math-style: inherit;
61    math-shift: inherit;
62    padding: 0;
63  }
64  & > mtable.multiline-equation > mtr:not(:last-child) > mtd {
65    padding-bottom: 0.5em;
66  }
67
68  /* Fractions */
69  mfrac {
70    padding-inline: 0;
71    margin-inline: 0.1em;
72  }
73
74  /* Accents */
75  mover[accent="true" i] > :first-child {
76    font-feature-settings: "dtls";
77  }
78  mover.dotted[accent="true" i] > :first-child {
79    font-feature-settings: "dtls" 0;
80  }
81
82  /* Other rules for scriptlevel, displaystyle and math-shift */
83  munder > :nth-child(2),
84  munderover > :nth-child(2) {
85    math-shift: compact;
86  }
87  munder[accentunder="true" i] > :not(:first-child),
88  mover[accent="true" i] > :not(:first-child) {
89    math-depth: inherit;
90    math-style: inherit;
91    math-shift: inherit;
92  }
93}