WebC, scoped styles not working

[cfjedimaster]

I've got a WebC component where I'm trying to apply styles. Initially it was just for a div, but I added an H2 to test. Here's the entirety of the component:

<h2>PDF</h2>
<div :id="uid"></div>

<script webc:keep src="https://documentservices.adobe.com/view-sdk/viewer.js"></script>
<template webc:type="11ty" 11ty:type="liquid">
{% assign pdfname = pdf | split:"/" | last %}

<script webc:keep>
let clientID = "912a3ba447664592bfbffb224b74a371";

document.addEventListener("adobe_dc_view_sdk.ready", () => {
  let adobeDCView = new AdobeDC.View({clientId: clientID, divId: "{{uid}}"});
  adobeDCView.previewFile(
   {
      content:   {location: {url: "{{pdf}}"}},
      metaData: {fileName: "{{pdfname}}"}
   });
});
</script>
</template>

<style webc:scoped>
:host div {
  color: blue;
  width: 400px;
  height: 400px;
  background-color: red;
}

:host h2 {
  color: red;
}
</style>

The color and background-color for the div aren't really important, but I was trying to get things working. I included the style in the head of my template:

<style>{{ page.url | webcGetCss }}</style>

I can confirm its showing up in source. But I'm not seeing my styles applied. You can see the complete source here:

https://glitch.com/edit/#!/impossible-early-system