Unsupported elements in CSS causes all CSS to lose effect

The following svg...

looks like this in chrome...

but when opened in Inkscape looks like this...

<svg xmlns="http://www.w3.org/2000/svg" xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:ns4="http://creativecommons.org/ns#" xmlns:ns6="http://www.ifcopenshell.org/ns"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" id="root" version="1.1"
    width="50mm" height="50mm" viewBox="0 0 50.0 50.0" sodipodi:docname="A00 - UNTITLED.svg"
    inkscape:version="1.4-rc1 (61ec3f2, 2024-09-26)">
    <defs id="defs5" />
    <sodipodi:namedview id="namedview5" pagecolor="#ffffff" bordercolor="#000000"
        borderopacity="0.25" inkscape:showpageshadow="2" inkscape:pageopacity="0.0"
        inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" inkscape:document-units="mm"
        inkscape:zoom="0.51339147" inkscape:cx="401.25326" inkscape:cy="476.24477"
        inkscape:window-width="1920" inkscape:window-height="1017" inkscape:window-x="-8"
        inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="root" />


    <g data-id="204" data-type="schedule" data-document="201" id="g5"
        transform="translate(0,0)">
        <g transform="translate(0,0)" clip-path="url(#1803df12-da55-4fe1-b8e6-7854146fa80c)">
            <defs>
                <style type="text/css">/*

   

                    /**
                    * If you specify a font size in CSS, such as text { font-size: 5; }, all fonts
                    * will be overriden to match that size.
                    *
                    * If your CSS, ODS, XLSX does not specify a font size, the variables below
                    * will specify the default font size.
                    *
                    * If your ODS, XLSX does specify a font size, they will scale linearly based
                    * on the variables below.
                    */

                    :root {
                    /* --font-size-pt: 10; */
                    /* --font-size-px: 3; */
                    --font-width: 0.75;
                    }

                    text.schedule,
                    tspan.schedule {
                    /* 2.5mm */
                    fill: #2c5573 !important;
                    stroke: none !important;
                    font-family: "Garamond";
                    font-size:3.7px !important;
                    }

                    .border {
                    stroke: #2c5573;
                    stroke-width: 0.3;
                    fill: none !important;
                    }
</style>
            </defs>
            <rect class="border" height="4.521199999999999" style="fill: #ffffff;" width="22.5806"
                x="1" y="1" />
            <text class="schedule" dominant-baseline="baseline" font-size="3.0" text-anchor="start"
                x="2" y="4.521199999999999">foo</text>
            <rect class="border" height="4.521199999999999" style="fill: #ffffff;" width="22.5806"
                x="23.5806" y="1" />
            <text class="schedule" dominant-baseline="baseline" font-size="3.0" text-anchor="start"
                x="24.5806" y="4.521199999999999">bar</text>
            <rect class="border" height="4.52882" style="fill: #ffffff;" width="22.5806" x="1"
                y="5.521199999999999" />
            <text class="schedule" dominant-baseline="baseline" font-size="3.0" text-anchor="start"
                x="2" y="9.05002">this</text>
            <rect class="border" height="4.52882" style="fill: #ffffff;" width="22.5806" x="23.5806"
                y="5.521199999999999" />
            <text class="schedule" dominant-baseline="baseline" font-size="3.0" text-anchor="start"
                x="24.5806" y="9.05002">that</text>
        </g>

    </g>

</svg>