diff --git a/docs/README.md b/docs/README.md
index 7c8b69b..c4c0acc 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,10 +1,16 @@
 ## barkeep
 
-Small C++ header to display async counters and progress bars. Use it by
-including `barkeep.h` in your project.
+Small, single C++ header to display async animations, counters, and progress bars.
+Use it by including `barkeep.h` in your project.
+__barkeep__ also has [python bindings](https://pypi.python.org/pypi/barkeep).
 
-[![build](https://github.com/oir/barkeep/actions/workflows/build-test.yml/badge.svg)](https://github.com/oir/barkeep/actions/workflows/build-test.yml)
+
+<img src="img/C++.svg" height="22"> [![build](https://github.com/oir/barkeep/actions/workflows/build-test.yml/badge.svg)](https://github.com/oir/barkeep/actions/workflows/build-test.yml)
 [![Coverage Status](https://coveralls.io/repos/github/oir/barkeep/badge.svg?branch=main)](https://coveralls.io/github/oir/barkeep?branch=main)
+![c++17](https://img.shields.io/badge/std-c++17-blue.svg)  <br/>
+<img src="img/python.svg" height="22"> [![build](https://github.com/oir/barkeep/actions/workflows/build-wheels.yml/badge.svg)](https://github.com/oir/barkeep/actions/workflows/build-wheels.yml)
+[![PyPi](https://img.shields.io/badge/python-3.9_|_3.10_|_3.11_|_3.12-blue.svg)](https://pypi.python.org/pypi/barkeep)
+
 
 ---
 
@@ -127,8 +133,8 @@ including `barkeep.h` in your project.
 
   `no_tty` achieves two things:
   
-  - Change the delimiter from `\r` to `\n` to avoid wonky looking output in your log files
-  - Change the default interval to a minute to avoid overwhelming logs (in the example above, we set the interval ourselves explicitly)
+  - Change the delimiter from `\r` to `\n` to avoid wonky looking output in your log files.
+  - Change the default interval to a minute to avoid overwhelming logs (in the example above, we set the interval ourselves explicitly).
 
 See `demo.cpp` for more examples. 
 
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
index 4b95ed0..26119f6 100644
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -1,7 +1,6 @@
 
 * [Home](README.md)
 
-
 __API__
 * [Namespaces](api/Namespaces/)
 * [Classes](api/Classes/)
\ No newline at end of file
diff --git a/docs/img/C++.svg b/docs/img/C++.svg
new file mode 100644
index 0000000..51ae875
--- /dev/null
+++ b/docs/img/C++.svg
@@ -0,0 +1,223 @@
+<svg role="img" viewBox="0 0 24 24" fill="#444444" xmlns="http://www.w3.org/2000/svg" ml-update="aware" style="--ml-zoom: 1 !important;" ml-is-active=""><title>C++</title><path d="M22.394 6c-.167-.29-.398-.543-.652-.69L12.926.22c-.509-.294-1.34-.294-1.848 0L2.26 5.31c-.508.293-.923 1.013-.923 1.6v10.18c0 .294.104.62.271.91.167.29.398.543.652.69l8.816 5.09c.508.293 1.34.293 1.848 0l8.816-5.09c.254-.147.485-.4.652-.69.167-.29.27-.616.27-.91V6.91c.003-.294-.1-.62-.268-.91zM12 19.11c-3.92 0-7.109-3.19-7.109-7.11 0-3.92 3.19-7.11 7.11-7.11a7.133 7.133 0 016.156 3.553l-3.076 1.78a3.567 3.567 0 00-3.08-1.78A3.56 3.56 0 008.444 12 3.56 3.56 0 0012 15.555a3.57 3.57 0 003.08-1.778l3.078 1.78A7.135 7.135 0 0112 19.11zm7.11-6.715h-.79v.79h-.79v-.79h-.79v-.79h.79v-.79h.79v.79h.79zm2.962 0h-.79v.79h-.79v-.79h-.79v-.79h.79v-.79h.79v.79h.79z"/><svg id="midnight-lizard-filters" style="height: 0px; width: 0px; position: absolute;"><filter id="ml-blue-filter" color-interpolation-filters="sRGB" x="0" y="0" width="99999" height="99999"/><filter id="ml-content-filter" color-interpolation-filters="sRGB" x="0" y="0" width="99999" height="99999"/><filter id="pdf-bg-filter" color-interpolation-filters="sRGB" x="0" y="0" width="99999" height="99999"><feComponentTransfer><feFuncR type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"/><feFuncG type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"/><feFuncB type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"/></feComponentTransfer><feColorMatrix result="selectedColor" type="matrix" values="1 0 0 0 0&#xA;                                               0 1 0 0 0&#xA;                                               0 0 1 0 0&#xA;                                               1 1 1 1 -3"/><feFlood flood-color="rgb(240, 240, 240)"/><feComposite operator="in" in2="selectedColor"/><feComposite operator="over" in2="SourceGraphic"/></filter></svg><style xmlns="" id="midnight-lizard-dynamic-values">:root { 
+--ml-main-background-color:rgb(34, 36, 37);
+--ml-main-background-color-filtered:rgb(34, 36, 37);
+--ml-main-alt-background-color:rgb(24, 26, 27);
+--ml-main-alt-background-color-filtered:rgb(24, 26, 27);
+--ml-main-trans-background-color:rgba(34, 36, 37, 0.5);
+--ml-main-trans-alt-background-color:rgba(24, 26, 27, 0.3);
+--ml-main-text-color:rgb(209, 203, 199);
+--ml-main-trans-text-color:rgba(232, 229, 227, 0.6);
+--ml-main-text-color-filtered:rgb(209, 203, 199);
+--ml-main-border-color:rgb(123, 107, 101);
+--ml-main-trans-border-color:rgba(140, 122, 115, 0.3);
+--ml-main-range-fill-color:rgb(87, 74, 69);
+--ml-main-selection-color:rgb(12, 128, 223);
+--ml-main-selection-text-color:rgb(255, 255, 255);
+--ml-main-selection-shadow-color:rgba(0, 0, 0, 0.8);
+--ml-main-button-background-color:rgb(23, 27, 28);
+--ml-main-button-border-color:rgb(112, 97, 92);
+--ml-main-red-button-background-color:rgb(46, 5, 5);
+--ml-main-scrollbar-thumb-hover-color:rgb(107, 100, 97);
+--ml-main-scrollbar-thumb-normal-color:rgb(86, 80, 78);
+--ml-main-scrollbar-thumb-active-color:rgb(75, 70, 68);
+--ml-main-scrollbar-track-color:rgb(34, 36, 37);
+--ml-main-scrollbar-marks-color:rgb(209, 203, 199);
+--ml-main-scrollbar-shadow-color:rgba(0, 0, 0, 0.3);
+--ml-main-scrollbar-size:10px;
+--ml-main-moz-scrollbar-width:auto;
+--ml-main-moz-scrollbar-track-color:rgb(24, 26, 27);
+--ml-main-link-color:rgb(117, 182, 234);
+--ml-main-link-color-hover:rgb(144, 196, 238);
+--ml-main-link-color-active:rgb(113, 179, 234);
+--ml-main-visited-color:rgb(160, 117, 234);
+--ml-main-visited-color-hover:rgb(179, 144, 238);
+--ml-main-visited-color-active:rgb(157, 113, 234);
+--ml-main-scrollbar-marks-color-original:rgb(209, 203, 199);
+--ml-main-scrollbar-thumb-hover-color-original:rgb(107, 100, 97);
+--ml-main-scrollbar-thumb-normal-color-original:rgb(86, 80, 78);
+--ml-main-scrollbar-thumb-active-color-original:rgb(75, 70, 68);
+--ml-main-scrollbar-track-color-original:rgb(34, 36, 37);
+--ml-main-moz-scrollbar-track-color-original:rgb(24, 26, 27);
+--ml-main-scrollbar-shadow-color-original:rgba(0, 0, 0, 0.3);
+--ml-main-scrollbar-marks-color-filtered:rgb(209, 203, 199);
+--ml-main-scrollbar-thumb-hover-color-filtered:rgb(107, 100, 97);
+--ml-main-scrollbar-thumb-normal-color-filtered:rgb(86, 80, 78);
+--ml-main-scrollbar-thumb-active-color-filtered:rgb(75, 70, 68);
+--ml-main-scrollbar-track-color-filtered:rgb(34, 36, 37);
+--ml-main-moz-scrollbar-track-color-filtered:rgb(24, 26, 27);
+--ml-main-scrollbar-shadow-color-filtered:rgba(0, 0, 0, 0.3);
+--ml-background-saturation-limit:0.7;
+--ml-background-contrast:0.5;
+--ml-background-lightness-limit:0.14;
+--ml-background-gray-saturation:0.05;
+--ml-background-gray-hue:200;
+--ml-background-replace-all-hues:false;
+--ml-background-hue-gravity:0;
+--ml-highlighted-background-saturation-limit:0.91;
+--ml-highlighted-background-contrast:0.06;
+--ml-highlighted-background-lightness-limit:0.4;
+--ml-highlighted-background-gray-saturation:0.05;
+--ml-highlighted-background-gray-hue:200;
+--ml-highlighted-background-replace-all-hues:false;
+--ml-highlighted-background-hue-gravity:0;
+--ml-button-background-saturation-limit:0.8;
+--ml-button-background-contrast:0.04;
+--ml-button-background-lightness-limit:0.17;
+--ml-button-background-gray-saturation:0.1;
+--ml-button-background-gray-hue:190;
+--ml-button-background-replace-all-hues:false;
+--ml-button-background-hue-gravity:0;
+--ml-text-selection-saturation-limit:0.9;
+--ml-text-selection-contrast:0;
+--ml-text-selection-lightness-limit:0.46;
+--ml-text-selection-gray-saturation:0.9;
+--ml-text-selection-gray-hue:207;
+--ml-text-selection-replace-all-hues:true;
+--ml-text-selection-hue-gravity:0;
+--ml-text-saturation-limit:0.9;
+--ml-text-contrast:0.66;
+--ml-text-lightness-limit:0.9;
+--ml-text-gray-saturation:0.1;
+--ml-text-gray-hue:22;
+--ml-text-replace-all-hues:false;
+--ml-text-hue-gravity:0;
+--ml-highlighted-text-saturation-limit:1;
+--ml-highlighted-text-contrast:0.79;
+--ml-highlighted-text-lightness-limit:1;
+--ml-highlighted-text-gray-saturation:0.1;
+--ml-highlighted-text-gray-hue:22;
+--ml-highlighted-text-replace-all-hues:false;
+--ml-highlighted-text-hue-gravity:0;
+--ml-link-saturation-limit:0.8;
+--ml-link-contrast:0.55;
+--ml-link-lightness-limit:0.75;
+--ml-link-gray-saturation:0.74;
+--ml-link-gray-hue:207;
+--ml-link-replace-all-hues:false;
+--ml-link-hue-gravity:0.8;
+--ml-link-active-saturation-limit:0.8;
+--ml-link-active-contrast:0.55;
+--ml-link-active-lightness-limit:0.68;
+--ml-link-active-gray-saturation:0.74;
+--ml-link-active-gray-hue:207;
+--ml-link-active-replace-all-hues:false;
+--ml-link-active-hue-gravity:0.8;
+--ml-link-hover-saturation-limit:0.8;
+--ml-link-hover-contrast:0.61;
+--ml-link-hover-lightness-limit:0.83;
+--ml-link-hover-gray-saturation:0.74;
+--ml-link-hover-gray-hue:207;
+--ml-link-hover-replace-all-hues:false;
+--ml-link-hover-hue-gravity:0.8;
+--ml-visited-link-saturation-limit:0.8;
+--ml-visited-link-contrast:0.55;
+--ml-visited-link-lightness-limit:0.75;
+--ml-visited-link-gray-saturation:0.74;
+--ml-visited-link-gray-hue:262;
+--ml-visited-link-replace-all-hues:true;
+--ml-visited-link-hue-gravity:0;
+--ml-visited-link-hover-saturation-limit:0.8;
+--ml-visited-link-hover-contrast:0.61;
+--ml-visited-link-hover-lightness-limit:0.83;
+--ml-visited-link-hover-gray-saturation:0.74;
+--ml-visited-link-hover-gray-hue:262;
+--ml-visited-link-hover-replace-all-hues:true;
+--ml-visited-link-hover-hue-gravity:0;
+--ml-visited-link-active-saturation-limit:0.8;
+--ml-visited-link-active-contrast:0.55;
+--ml-visited-link-active-lightness-limit:0.68;
+--ml-visited-link-active-gray-saturation:0.74;
+--ml-visited-link-active-gray-hue:262;
+--ml-visited-link-active-replace-all-hues:true;
+--ml-visited-link-active-hue-gravity:0;
+--ml-text-shadow-saturation-limit:0.8;
+--ml-text-shadow-contrast:0.8;
+--ml-text-shadow-lightness-limit:1;
+--ml-text-shadow-gray-saturation:0.1;
+--ml-text-shadow-gray-hue:16;
+--ml-text-shadow-replace-all-hues:false;
+--ml-text-shadow-hue-gravity:0;
+--ml-border-saturation-limit:0.8;
+--ml-border-contrast:0.3;
+--ml-border-lightness-limit:0.5;
+--ml-border-gray-saturation:0.1;
+--ml-border-gray-hue:16;
+--ml-border-replace-all-hues:false;
+--ml-border-hue-gravity:0;
+--ml-button-border-saturation-limit:0.64;
+--ml-button-border-contrast:0.15;
+--ml-button-border-lightness-limit:0.4;
+--ml-button-border-gray-saturation:0.1;
+--ml-button-border-gray-hue:16;
+--ml-button-border-replace-all-hues:false;
+--ml-button-border-hue-gravity:0;
+--ml-scrollbar-hover-saturation-limit:0.05;
+--ml-scrollbar-hover-contrast:0;
+--ml-scrollbar-hover-lightness-limit:0.4;
+--ml-scrollbar-hover-gray-saturation:0.05;
+--ml-scrollbar-hover-gray-hue:16;
+--ml-scrollbar-hover-replace-all-hues:false;
+--ml-scrollbar-hover-hue-gravity:0;
+--ml-scrollbar-normal-saturation-limit:0.05;
+--ml-scrollbar-normal-contrast:0;
+--ml-scrollbar-normal-lightness-limit:0.32;
+--ml-scrollbar-normal-gray-saturation:0.05;
+--ml-scrollbar-normal-gray-hue:16;
+--ml-scrollbar-normal-replace-all-hues:false;
+--ml-scrollbar-normal-hue-gravity:0;
+--ml-scrollbar-active-saturation-limit:0.05;
+--ml-scrollbar-active-contrast:0;
+--ml-scrollbar-active-lightness-limit:0.28;
+--ml-scrollbar-active-gray-saturation:0.05;
+--ml-scrollbar-active-gray-hue:16;
+--ml-scrollbar-active-replace-all-hues:false;
+--ml-scrollbar-active-hue-gravity:0;
+--ml-image-saturation-limit:0.9;
+--ml-image-contrast:0.66;
+--ml-image-lightness-limit:0.8;
+--ml-image-gray-saturation:0.1;
+--ml-image-gray-hue:22;
+--ml-image-replace-all-hues:false;
+--ml-image-hue-gravity:0;
+--ml-svg-background-saturation-limit:0.8;
+--ml-svg-background-contrast:0.5;
+--ml-svg-background-lightness-limit:0.5;
+--ml-svg-background-gray-saturation:0.1;
+--ml-svg-background-gray-hue:190;
+--ml-svg-background-replace-all-hues:false;
+--ml-svg-background-hue-gravity:0;
+--ml-background-image-saturation-limit:0.8;
+--ml-background-image-contrast:0.5;
+--ml-background-image-lightness-limit:0.4;
+--ml-background-image-gray-saturation:0.05;
+--ml-background-image-gray-hue:200;
+--ml-background-image-replace-all-hues:false;
+--ml-background-image-hue-gravity:0;
+--ml-video-saturation-limit:1;
+--ml-video-contrast:0.5;
+--ml-video-lightness-limit:1;
+--ml-video-gray-saturation:0;
+--ml-video-gray-hue:0;
+--ml-video-replace-all-hues:false;
+--ml-video-hue-gravity:0;
+--ml-browser:Firefox!important;
+--ml-app-id:{8fbc7259-8015-4172-9af1-20e1edfbbd3a};
+--ml-version:10.7.1;
+--ml-content-filter:'';
+--ml-blue-filter:'';
+--pdf-bg-filter:url("#pdf-bg-filter");
+--ml-invert:1!important;
+--ml-is-active:1!important;
+--ml-text-filter:saturate(0.9) brightness(0.8);
+--ml-contrast-text-filter:saturate(0.9) brightness(0.8);
+--ml-highlighted-text-filter:saturate(0.9) brightness(0.8);
+--ml-dynamic-content-text-filter:saturate(0.9) brightness(0.8);
+--ml-dynamic-content-contrast-text-filter:saturate(0.9) brightness(0.8);
+--ml-dynamic-content-highlighted-text-filter:saturate(0.9) brightness(0.8);
+--ml-image-filter:saturate(0.9) brightness(0.8);
+--ml-image-revert-filter:saturate(1.2);
+--ml-bg-image-revert-filter:saturate(1.1);
+--ml-button-revert-filter:saturate(1.1);
+--ml-text-revert-filter:saturate(1.2);
+--ml-video-revert-filter:saturate(1.3);
+--ml-bg-revert-filter:none; }</style></svg>
diff --git a/docs/img/python.svg b/docs/img/python.svg
new file mode 100644
index 0000000..93fb27f
--- /dev/null
+++ b/docs/img/python.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" fill="#444444" xmlns="http://www.w3.org/2000/svg"><title>Python</title><path d="M14.25.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09zm13.09 3.95l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08z"/></svg>
diff --git a/docs/index.html b/docs/index.html
index c605535..8a6c3e8 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -7,9 +7,7 @@
   <meta name="description" content="Description">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.cdnfonts.com/css/sf-mono" rel="stylesheet">
 </head>
 <body>
   <div id="app"></div>
@@ -50,10 +48,9 @@
     :root {
       --base-font-family : "Helvetica Neue", "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
       --base-font-size   : 16px;
+      --code-font-family : "SF Mono", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
       --code-font-size   : 13px;
-      --code-font-family : "Fira Mono";
       --code-font-weight : 500;
-      --code-font-size   : 13px;
 
       --sidebar-name-font-weight : 400;
       --sidebar-name-text-align  : left;