diff --git a/.gitignore b/.gitignore
index b71249201..f61a10830 100644
--- a/.gitignore
+++ b/.gitignore
@@ -90,5 +90,5 @@ celerybeat-schedule
 # Generated CSV and SVG files
 include/branches.csv
 include/end-of-life.csv
-include/release-cycle.svg
-include/release-cycle-all.svg
+_static/release-cycle.svg
+_static/release-cycle-all.svg
diff --git a/Makefile b/Makefile
index 3d485ae2d..d4fe89a79 100644
--- a/Makefile
+++ b/Makefile
@@ -22,8 +22,8 @@ REQUIREMENTS = requirements.txt
 _ALL_SPHINX_OPTS = --jobs $(JOBS) $(SPHINXOPTS)
 _RELEASE_CYCLE   = include/branches.csv \
                    include/end-of-life.csv \
-                   include/release-cycle-all.svg \
-                   include/release-cycle.svg
+                   _static/release-cycle-all.svg \
+                   _static/release-cycle.svg
 
 .PHONY: help
 help:
diff --git a/_static/devguide_overrides.css b/_static/devguide_overrides.css
index 5b6d67b09..625a9dda2 100644
--- a/_static/devguide_overrides.css
+++ b/_static/devguide_overrides.css
@@ -6,102 +6,6 @@
     height: 110px;
 }
 
-/* Release cycle chart */
-
-.release-cycle-chart {
-    width: 100%;
-}
-
-.release-cycle-chart .release-cycle-year-line {
-    stroke: var(--color-foreground-primary);
-    stroke-width: 0.8px;
-    opacity: 75%;
-}
-
-.release-cycle-chart .release-cycle-year-text {
-    fill: var(--color-foreground-primary);
-}
-
-.release-cycle-chart .release-cycle-today-line {
-    stroke: var(--color-brand-primary);
-    stroke-width: 1.6px;
-}
-
-.release-cycle-chart .release-cycle-row-shade {
-    fill: var(--color-background-item);
-    opacity: 50%;
-}
-
-.release-cycle-chart .release-cycle-version-label {
-    fill: var(--color-foreground-primary);
-}
-
-.release-cycle-chart .release-cycle-blob {
-    stroke-width: 1.6px;
-    /* default colours, overridden below for individual statuses */
-    fill: var(--color-background-primary);
-    stroke: var(--color-foreground-primary);
-}
-
-.release-cycle-chart .release-cycle-blob-label {
-    /* white looks good on both light & dark */
-    fill: white;
-}
-
-.release-cycle-chart .release-cycle-blob-label.release-cycle-status-security,
-.release-cycle-chart .release-cycle-blob-label.release-cycle-status-bugfix {
-    /* but use black to improve contrast for lighter backgrounds */
-    fill: black;
-}
-
-.release-cycle-chart .release-cycle-blob-label.release-cycle-status-end-of-life,
-.release-cycle-chart .release-cycle-blob-label.release-cycle-status-prerelease,
-.release-cycle-chart .release-cycle-blob-label.release-cycle-status-feature {
-    /* and FG when it's not in a blob */
-    fill: var(--color-foreground-primary);
-}
-
-.release-cycle-chart .release-cycle-status-end-of-life {
-    --status-bg-color: #DD2200;
-    --status-border-color: #FF8888;
-}
-
-.release-cycle-chart .release-cycle-status-security {
-    --status-bg-color: #FFDD44;
-    --status-border-color: #FF8800;
-}
-
-.release-cycle-chart .release-cycle-status-bugfix {
-    --status-bg-color: #00DD22;
-    --status-border-color: #008844;
-}
-
-.release-cycle-chart .release-cycle-status-prerelease {
-    --status-bg-color: teal;
-    --status-border-color: darkgreen;
-}
-
-.release-cycle-chart .release-cycle-status-feature {
-    --status-bg-color: #2222EE;
-    --status-border-color: #008888;
-}
-
-.release-cycle-chart .release-cycle-blob {
-    fill: var(--status-bg-color);
-    stroke: transparent;
-}
-
-.release-cycle-chart .release-cycle-blob-full {
-    fill: var(--status-bg-color);
-    stroke: var(--status-border-color);
-}
-
-.release-cycle-chart .release-cycle-border {
-    fill: transparent;
-    stroke: var(--status-border-color);
-    stroke-width: 1.6px;
-}
-
 .good pre {
   border-left: 3px solid rgba(74, 182, 93, 1);
 }
diff --git a/_tools/generate_release_cycle.py b/_tools/generate_release_cycle.py
index dd0a3a7c6..b7c2afe0e 100644
--- a/_tools/generate_release_cycle.py
+++ b/_tools/generate_release_cycle.py
@@ -198,10 +198,10 @@ def main() -> None:
     versions = Versions()
     assert len(versions.versions) > 10
     versions.write_csv()
-    versions.write_svg(args.today, "include/release-cycle-all.svg")
+    versions.write_svg(args.today, "_static/release-cycle-all.svg")
 
     versions = Versions(limit_to_active=True, special_py27=True)
-    versions.write_svg(args.today, "include/release-cycle.svg")
+    versions.write_svg(args.today, "_static/release-cycle.svg")
 
 
 if __name__ == "__main__":
diff --git a/_tools/release_cycle_template.svg.jinja b/_tools/release_cycle_template.svg.jinja
index d3d5866a0..9f23814a9 100644
--- a/_tools/release_cycle_template.svg.jinja
+++ b/_tools/release_cycle_template.svg.jinja
@@ -4,6 +4,104 @@
     class="release-cycle-chart"
     viewBox="0 0 {{ diagram_width }} {{ diagram_height }}"
 >
+    <style>
+        /* Embedded styles for standalone viewing */
+        .release-cycle-chart {
+            color-scheme: light;
+
+            {# Copy vars from Furo theme if present #}
+            {% for varname, default in {
+                'color-foreground-primary': 'light-dark(#333, #fff)',
+                'color-background-primary': 'light-dark(#fff, #333)',
+                'color-brand-primary': '#4B8BBE',
+                'color-background-item': '#e0e0e0',
+            }.items() %}
+                --svg-{{varname}}: var(--{{varname}}, {{default}});
+            {% endfor %}
+
+            font-family: var(
+                --font-stack,
+                -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
+                Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji);
+            width: 100%;
+
+            --blob-border-width: 1.6px;
+        }
+        .background {
+            fill: var(--svg-color-background-primary);
+        }
+        .release-cycle-year-line {
+            stroke: var(--svg-color-foreground-primary);
+            stroke-width: 0.8px;
+            opacity: 75%;
+        }
+        .release-cycle-today-line {
+            stroke: var(--svg-color-brand-primary);
+            stroke-width: var(--blob-border-width);
+        }
+        .release-cycle-row-shade {
+            fill: var(--svg-color-background-item);
+            opacity: 50%;
+        }
+        .release-cycle-blob {
+            stroke-width: var(--blob-border-width);
+        }
+        .text-main {
+            fill: var(--svg-color-foreground-primary);
+
+            /* use specific colours on known backgrounds */
+            &amp;.release-cycle-status-security,
+            &amp;.release-cycle-status-bugfix {
+                fill: black;
+            }
+        }
+        .text-outline {
+            /* an outline of the background color, in case it's not set
+            correctly */
+            fill: transparent;
+            stroke: var(--svg-color-background-primary);
+            stroke-width: var(--blob-border-width);
+
+            /* use specific colours on known backgrounds */
+            &amp;.release-cycle-status-security,
+            &amp;.release-cycle-status-bugfix {
+                stroke: var(--status-bg-color);
+            }
+        }
+        .release-cycle-status-end-of-life {
+            --status-bg-color: #DD2200;
+            --status-border-color: #FF8888;
+        }
+        .release-cycle-status-security {
+            --status-bg-color: #FFDD44;
+            --status-border-color: #FF8800;
+        }
+        .release-cycle-status-bugfix {
+            --status-bg-color: #00DD22;
+            --status-border-color: #008844;
+        }
+        .release-cycle-status-prerelease {
+            --status-bg-color: teal;
+            --status-border-color: darkgreen;
+        }
+        .release-cycle-status-feature {
+            --status-bg-color: #2222EE;
+            --status-border-color: #008888;
+        }
+        .release-cycle-blob {
+            fill: var(--status-bg-color);
+            stroke: transparent;
+        }
+        .release-cycle-blob-full {
+            fill: var(--status-bg-color);
+            stroke: var(--status-border-color);
+        }
+        .release-cycle-border {
+            fill: transparent;
+            stroke: var(--status-border-color);
+            stroke-width: var(--blob-border-width);
+        }
+    </style>
     <defs>
         <linearGradient id="release-cycle-mask-gradient-{{ id_key }}">
             <stop stop-color="black" offset="0%" />
@@ -11,9 +109,16 @@
         </linearGradient>
     </defs>
 
+    <rect
+        class="background"
+        x="0"
+        y="0"
+        width="{{ diagram_width }}"
+        height="{{ diagram_height }}"
+    />
+
     {% for version in versions %}
         {% set y = version.y * line_height %}
-
         {% if version.y % 2 %}
             <!-- Row shading -->
             <rect
@@ -28,7 +133,7 @@
 
     {% for year in years %}
         <text
-            class="release-cycle-year-text"
+            class="release-cycle-year-text text-main"
             x="{{ (year_to_x(year) + year_to_x(year + 1)) / 2 }}"
             y="{{ diagram_height - line_height }}"
             font-size="{{ SCALE * 0.75 }}"
@@ -74,7 +179,7 @@
     </mask>
 
     {% for version in versions %}
-        <!-- Colourful blob with a label. -->
+        <!-- Colourful blob. -->
 
         {% set top_y = version.y * line_height - 1 * SCALE %}
         {% set height = 1.25 * SCALE %}
@@ -82,8 +187,6 @@
         {% set end_x = date_to_x(version.end_of_life_date) %}
         {% set radius = 0.25 * SCALE %}
 
-        {% set small_text_y = version.y * line_height - 0.1 * SCALE %}
-
         <!-- bugfix/security blobs need to be split between the two phases.
             Draw the rectangle with two path elements instead.
             Thanks Claude.ai for the initial conversion.
@@ -151,32 +254,53 @@
                 mask="url(#release-cycle-mask-{{ id_key }})"
             />
         {% endif %}
+    {% endfor %}
+
+    <!-- A line for today -->
+    <line
+        class="release-cycle-today-line"
+        x1="{{ date_to_x(today) }}"
+        x2="{{ date_to_x(today) }}"
+        y1="0"
+        y2="{{ diagram_height - line_height }}"
+        font-size="{{ SCALE }}"
+    />
+
+    {% for version in versions %}
+        <!-- Label for colourful blob -->
+
+        {% set start_x = date_to_x(version.first_release_date) %}
+        {% set end_x = date_to_x(version.end_of_life_date) %}
+        {% set middle_x = ([end_x, date_to_x(version.start_security_date)]|min)  %}
+        {% set small_text_y = version.y * line_height - 0.1 * SCALE %}
 
         <!-- Add text before/after/inside the blob -->
-        <text
-            class="release-cycle-blob-label release-cycle-status-{{ version.status }}"
-            font-size="{{ SCALE * 0.75 }}"
-            y="{{ small_text_y }}"
-            {% if version.status == "bugfix" %}
-                x="{{ (start_x + middle_x) / 2 }}"
-                text-anchor="middle"
-            {% elif version.status == "security" %}
-                x="{{ (middle_x + end_x) / 2 }}"
-                text-anchor="middle"
-            {% elif version.status == "end-of-life" %}
-                x="{{ end_x + (0.25 * SCALE) }}"
-                text-anchor="start"
-            {% else %}
-                x="{{ start_x - (0.25 * SCALE) }}"
-                text-anchor="end"
-            {% endif %}
-        >
-            {{ version.status }}
-        </text>
+        {% for cls in ('text-outline', 'text-main') %}
+            <text
+                class="release-cycle-blob-label {{cls}} release-cycle-status-{{ version.status }}"
+                font-size="{{ SCALE * 0.75 }}"
+                y="{{ small_text_y }}"
+                {% if version.status == "bugfix" %}
+                    x="{{ (start_x + middle_x) / 2 }}"
+                    text-anchor="middle"
+                {% elif version.status == "security" %}
+                    x="{{ (middle_x + end_x) / 2 }}"
+                    text-anchor="middle"
+                {% elif version.status == "end-of-life" %}
+                    x="{{ end_x + (0.25 * SCALE) }}"
+                    text-anchor="start"
+                {% else %}
+                    x="{{ start_x - (0.25 * SCALE) }}"
+                    text-anchor="end"
+                {% endif %}
+            >
+                {{ version.status }}
+            </text>
+        {% endfor %}
 
         <!-- Legend on the left -->
         <text
-            class="release-cycle-version-label"
+            class="release-cycle-version-label text-main"
             x="{{ 0.5 * SCALE }}"
             y="{{ version.y * line_height }}"
             font-size="{{ SCALE }}"
@@ -184,14 +308,4 @@
             Python {{ version.key }}
         </text>
     {% endfor %}
-
-    <!-- A line for today -->
-    <line
-        class="release-cycle-today-line"
-        x1="{{ date_to_x(today) }}"
-        x2="{{ date_to_x(today) }}"
-        y1="0"
-        y2="{{ diagram_height - line_height }}"
-        font-size="{{ SCALE }}"
-    />
 </svg>
diff --git a/make.ps1 b/make.ps1
index ffda67269..c8ad842c9 100644
--- a/make.ps1
+++ b/make.ps1
@@ -65,7 +65,7 @@ if ($target -Eq "clean") {
         $BUILDDIR,
         $_VENV_DIR,
         "include/branches.csv", "include/end-of-life.csv",
-        "include/release-cycle.svg", "include/release-cycle-all.svg"
+        "_static/release-cycle.svg", "_static/release-cycle-all.svg"
     )
     foreach ($item in $ToClean) {
         if (Test-Path -Path $item) {
diff --git a/versions.rst b/versions.rst
index 0a52829c2..5f3a287ce 100644
--- a/versions.rst
+++ b/versions.rst
@@ -11,7 +11,7 @@ version can be found on the `download page <https://www.python.org/downloads/>`_
 
 
 .. raw:: html
-   :file: include/release-cycle.svg
+   :file: _static/release-cycle.svg
 
 (See :ref:`below <full-chart>` for a chart with older versions.
 Another useful visualization is `endoflife.date/python <https://endoflife.date/python>`_.)
@@ -36,7 +36,7 @@ Unsupported versions
 .. csv-table::
    :header-rows: 1
    :width: 100%
-   :file: include/end-of-life.csv
+   :file: _static/end-of-life.csv
 
 
 .. _full-chart:
@@ -45,7 +45,7 @@ Full chart
 ==========
 
 .. raw:: html
-   :file: include/release-cycle-all.svg
+   :file: _static/release-cycle-all.svg
 
 
 Status key