diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 0838bac..48a6e86 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -1,7 +1,3 @@
-th {
-    background-color: var(--md-default-fg-color--lightest);
-}
-
 :root > * {
     --cpp-linter-logo-color-green: #40b385;
     --cpp-linter-logo-color-yellow: #ffc20a;
@@ -281,70 +277,3 @@ th {
 .md-tabs__link:hover {
     color: white;
 }
-
-@media screen and (max-width: 76.2344em) {
-    .md-nav--primary .md-nav__title[for="__drawer"] {
-        background-color: #4051b5;
-    }
-}
-
-.md-typeset .admonition.important,
-.md-typeset details.important {
-    border-color: #00b8d4;
-}
-
-.md-typeset .important>.admonition-title::before,
-.md-typeset .important>summary::before {
-    background-color: #00b8d4;
-    -webkit-mask-image: var(--md-admonition-icon--info);
-    mask-image: var(--md-admonition-icon--info);
-}
-
-.md-typeset .important>.admonition-title,
-.md-typeset .important>summary {
-    background-color: #00b8d41a;
-}
-
-.md-banner {
-    color: var(--md-footer-fg-color--lighter)
-}
-
-.md-banner strong {
-    white-space: nowrap
-}
-
-.md-banner a,
-.md-banner strong {
-    color: var(--md-footer-fg-color)
-}
-
-.md-banner a:focus,
-.md-banner a:hover {
-    color: currentcolor
-}
-
-.md-banner a:focus .twemoji,
-.md-banner a:hover .twemoji {
-    background-color: var(--md-footer-fg-color);
-    box-shadow: none
-}
-
-.md-banner .twemoji {
-    border-radius: 100%;
-    box-shadow: inset 0 0 0 .05rem currentcolor;
-    display: inline-block;
-    height: 1.2rem;
-    padding: .25rem;
-    transition: all .25s;
-    vertical-align: bottom;
-    width: 1.2rem
-}
-
-.md-banner .twemoji svg {
-    display: block;
-    max-height: none
-}
-
-a.md-annotation__index {
-    border-radius: 2.2ch;
-}
diff --git a/docs/stylesheets/shared.css b/docs/stylesheets/shared.css
new file mode 100644
index 0000000..04df9ca
--- /dev/null
+++ b/docs/stylesheets/shared.css
@@ -0,0 +1,125 @@
+/*
+ * Styles shared by the cpp-linter docs sites. Each site loads this file from
+ * https://cpp-linter.github.io/stylesheets/shared.css before its own stylesheet,
+ * so rules that only one site needs belong in that site's stylesheet instead.
+ */
+
+th {
+    background-color: var(--md-default-fg-color--lightest);
+}
+
+/* "important" admonitions */
+.md-typeset .admonition.important,
+.md-typeset details.important {
+    border-color: #00b8d4;
+}
+
+.md-typeset .important>.admonition-title::before,
+.md-typeset .important>summary::before {
+    background-color: #00b8d4;
+    -webkit-mask-image: var(--md-admonition-icon--info);
+    mask-image: var(--md-admonition-icon--info);
+}
+
+.md-typeset .important>.admonition-title,
+.md-typeset .important>summary {
+    background-color: #00b8d41a;
+}
+
+/* badges next to inputs and options */
+.md-typeset .mdx-badge {
+    font-size: .85em;
+}
+
+.md-typeset .mdx-badge--right {
+    float: right;
+    margin-left: .35em;
+}
+
+[dir=ltr] .md-typeset .mdx-badge__icon {
+    border-top-left-radius: .1rem;
+    border-bottom-left-radius: .1rem;
+}
+
+[dir=rtl] .md-typeset .mdx-badge__icon {
+    border-top-right-radius: .1rem;
+    border-bottom-right-radius: .1rem;
+}
+
+.md-typeset .mdx-badge__icon {
+    background: var(--md-accent-fg-color--transparent);
+    padding: .2rem;
+}
+
+.md-typeset .mdx-badge__icon:last-child {
+    border-radius: .1rem;
+}
+
+[dir=ltr] .md-typeset .mdx-badge__text {
+    border-top-right-radius: .1rem;
+    border-bottom-right-radius: .1rem;
+}
+
+[dir=rtl] .md-typeset .mdx-badge__text {
+    border-top-left-radius: .1rem;
+    border-bottom-left-radius: .1rem;
+}
+
+.md-typeset .mdx-badge__text {
+    box-shadow: 0 0 0 1px inset var(--md-accent-fg-color--transparent);
+    padding: .2rem .3rem;
+}
+
+/* the "experimental" badge icon: an inline SVG in MkDocs, a ::before mask in Sphinx */
+@keyframes heart {
+
+    0%,
+    40%,
+    80%,
+    to {
+        transform: scale(1);
+    }
+
+    20%,
+    60% {
+        transform: scale(1.15);
+    }
+}
+
+.md-typeset .mdx-badge--heart {
+    color: #ff4281;
+}
+
+.md-typeset .mdx-badge--heart.twemoji {
+    animation: heart 1s infinite;
+}
+
+.md-typeset .mdx-badge--heart::before {
+    background-color: #ff4281;
+}
+
+.md-typeset .mdx-heart::before {
+    animation: heart 1s infinite;
+}
+
+/* code annotation buttons: round, pulsing in the accent color */
+a.md-annotation__index {
+    border-radius: 2.2ch;
+}
+
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 var(--md-accent-fg-color);
+        transform: scale(.95);
+    }
+
+    75% {
+        box-shadow: 0 0 0 .625em transparent;
+        transform: scale(1);
+    }
+
+    to {
+        box-shadow: 0 0 0 0 transparent;
+        transform: scale(.95);
+    }
+}
diff --git a/mkdocs.yml b/mkdocs.yml
index f2e8b61..6c46db5 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -94,6 +94,7 @@ plugins:
         - Announcements
 
 extra_css:
+  - stylesheets/shared.css
   - stylesheets/extra.css
 
 edit_uri_template: https://github.com/cpp-linter/cpp-linter.github.io/edit/main/docs/{path}