diff --git a/src/components/d-math.js b/src/components/d-math.js
index 1662b06..81862e5 100644
--- a/src/components/d-math.js
+++ b/src/components/d-math.js
@@ -8,7 +8,24 @@ import { renderMathInElement } from '../helpers/katex-auto-render';
 export const katexJSURL = 'https://distill.pub/third-party/katex/katex.min.js';
 export const katexCSSTag = '<link rel="stylesheet" href="https://distill.pub/third-party/katex/katex.min.css" crossorigin="anonymous">';
 
+export const style = `
+.katex-display {
+  text-align: left;
+  padding: 8px 0 8px 0;
+  margin: 20px 0 20px 24px;
+}
+
+.katex {
+  -webkit-font-smoothing: antialiased;
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 1.18em;
+}
+`;
+
 const T = Template('d-math', `
+
+${katexCSSTag}
+
 <style>
 
 :host {
@@ -20,9 +37,9 @@ const T = Template('d-math', `
   display: block;
 }
 
-</style>
+${style}
 
-${katexCSSTag}
+</style>
 
 <span id="katex-container"></span>
 `);
diff --git a/src/styles/styles-article.css b/src/styles/styles-article.css
index 0c21ce1..f564041 100644
--- a/src/styles/styles-article.css
+++ b/src/styles/styles-article.css
@@ -188,18 +188,6 @@ d-figure {
 
 /* KaTeX */
 
-d-article .katex-display {
-  text-align: left;
-  padding: 8px 0 8px 0;
-  margin: 20px 0;
-}
-
-d-article .katex {
-  -webkit-font-smoothing: antialiased;
-  color: rgba(0, 0, 0, 0.8);
-  font-size: 1.18em;
-}
-
 .katex, .katex-prerendered {
   contain: content;
   display: inline-block;
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 98bde29..27a82fc 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3,8 +3,9 @@ import layout from './styles-layout.css';
 import article from './styles-article.css';
 import print from './styles-print.css';
 import { style as byline } from '../components/d-byline.js';
+import { style as math } from '../components/d-math.js';
 
-export const styles = base + layout + byline + article + print;
+export const styles = base + layout + byline + math + article + print;
 
 export function makeStyleTag(dom) {