width cap

public/styles.css

@@ -16,6 +16,16 @@ body {
   margin: 0;
 }
 
+.graphic-document {
+  width: 100%;
+  height: 100%;
+  background: var(--chroma);
+}
+
+.graphic-document.transparent {
+  background: transparent;
+}
+
 .app {
   display: grid;
   min-height: 100vh;
@@ -92,12 +102,12 @@ button {
 
 .controls {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(7, minmax(0, 1fr));
   gap: 10px;
   align-items: end;
 }
 
-.controls label:last-child {
+.checkbox-label {
   display: flex;
   min-height: 42px;
   align-items: center;
@@ -124,6 +134,14 @@ code {
   background: transparent;
 }
 
+.graphic.is-loading .stage {
+  opacity: 0;
+}
+
+.graphic.is-ready .stage {
+  opacity: 1;
+}
+
 .stage {
   position: relative;
   display: grid;
@@ -132,10 +150,14 @@ code {
   margin: 0 auto;
   place-items: center;
   overflow: hidden;
+  opacity: 1;
+  transition: opacity 120ms linear;
 }
 
 .embed {
   display: grid;
+  width: var(--embed-width, auto);
+  height: var(--embed-height, auto);
   max-width: 92%;
   max-height: 92%;
   place-items: center;