Add a header to the RSS page

good god if the experimental astro container api ever deprecates im cooked lmfao

src/components/Header.astro

···
 </header>
 
 <style>
+  /* UPDATE RSS STYLE XML WHEN YOU CHANGE THESE */
   header {
     border-image: var(--box-blr-png) 10 fill / 20px / 20px round;
     margin: 0 20px 20px;

src/pages/rss.style.xml.ts

···
 import BoxTlbr from "/assets/box-tlbr.png";
-import Hr from "/assets/hr.png";
 import Box4x3Mask from "/assets/box-4x3-mask.png";
+import { experimental_AstroContainer } from "astro/container";
+import Header from "/components/Header.astro";
+
+const header = await experimental_AstroContainer
+  .create()
+  .then((x) => x.renderToString(Header))
+  .then((x) =>
+    // match data-astro-cid attributes where there no value
+    // this is because xml hates boolean attributes for some reason. :(
+    x.replaceAll(/data-astro-cid-[a-zA-Z0-9]*(?!=["'])/gm, (m) => m + '=""'),
+  )
+  .then((x) =>
+    // match wbr tags (with data astro cid) and close em
+    x.replaceAll(/<wbr data-astro-cid-[a-zA-Z0-9]*="">/gm, (m) => m + "</wbr>"),
+  );
 
 export async function GET() {
   return new Response(
     `
+<!DOCTYPE XSL [ <!ENTITY shy "­"> ]>
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
   <xsl:output method="html" />
 
···
 
           html,
           body {
+            min-width: 30ch;
+          }
+            
+          .blog {
             width: 30ch;
             margin: auto;
+          }
+
+          .intro {
+            max-width: 60ch;
+            padding-inline: 20px;
+            margin: 20px auto;
           }
 
           img,
···
           a:active {
             text-decoration-style: dashed;
           }
+
+          /* from Header.astro */
+          header {
+            border-image: var(--box-blr-png) 10 fill / 20px / 20px round;
+            margin: 0 20px 20px;
+            padding: 10px 20px;
+            height: 3rem; /* 2rem * 1.5 */
+            /* render over feed bg */
+            z-index: 2;
+
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+
+            @media (max-width: 650px) {
+              flex-direction: column;
+              align-items: start;
+              height: 4.5rem; /* (2rem + 1rem) * 1.5 */
+
+              nav {
+                margin-inline: auto;
+                contain: inline-size;
+                width: 100%;
+                overflow: auto;
+                scrollbar-width: thin;
+              }
+
+              h1 {
+                width: 100%;
+                text-align: center;
+              }
+            }
+
+            &amp; > nav > ul {
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              justify-content: start;
+              gap: 10px;
+              z-index: 999;
+              width: fit-content;
+              margin-inline: auto;
+
+              &amp; > li {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                gap: 10px;
+
+                &amp;::marker {
+                  content: none;
+                }
+
+                &amp; + &amp;::before {
+                  content: "";
+                  background-image: var(--dot-png);
+                  background-size: contain;
+                  width: 9px;
+                  height: 9px;
+                  display: block;
+                }
+              }
+            }
+          }
+
+          nav > ul > li:last-child > details > ul {
+            right: 10px;
+          }
+
+          details {
+            summary {
+              cursor: pointer;
+              text-wrap: nowrap;
+            }
+
+            &amp; > ul {
+              position: absolute;
+              z-index: 99999;
+
+              @media (max-width: 650px) {
+                inset: auto 15px;
+              }
+
+              margin-top: 10px;
+              padding: 20px;
+              padding-left: 40px;
+              &amp; ul {
+                margin-left: 10px;
+              }
+
+              border-image: var(--box-tlbr-png) 10 fill / 20px round;
+            }
+          }
+
+          header h1 {
+            margin-block: 0;
+            position: sticky;
+            inset: 0;
+          }
         </style>
       </head>
 
       <body>
-        <section class="blog">
+        ${header}
+        <section class="intro">
           <h1>Blog Posts</h1>
           <p>If you want to use this page in your RSS reader, simply paste this page's URL in and it'll just work. To view the original RSS, view the page source. The styling of this page is made possible by <a href="https://developer.mozilla.org/en-US/docs/Web/XML/XSLT" target="_blank">XSLT</a></p>
+        </section>
+        <section class="blog">
           <xsl:for-each select="/rss/channel/item">
             <a target="_blank">
               <xsl:attribute name="href">