html, body { margin: 0; min-height: 100%; background: var(--art-background); }
body { color: #353535; font: 10px/16px Verdana, sans-serif; }
.page-title {
  position: absolute; top: 16px; left: 16px; z-index: 1;
  width: max-content; margin: 0; font: inherit; text-align: left; white-space: nowrap;
  /* Anchor the end of the rotated line at the top-left inset. */
  transform-origin: top left;
  transform: rotate(-90deg) translateX(-100%);
  opacity: 0.2;
}
.page-title:hover, .page-title:focus-within { opacity: 1; }
.page-title a { color: inherit; text-decoration: none; }
.page-title a:hover, .page-title a:focus-visible { text-decoration: underline; }
main { width: 531px; max-width: 100%; margin: 0 auto; }
#stage-frame { width: 531px; height: 566px; overflow: hidden; }
#stage { width: 531px; height: 566px; transform-origin: top left; --dirplayer-embed-background: var(--art-background); }
.art-header, embed { display: block; }
#stage button { transform: scale(var(--control-scale, 1)); }
.art-footer {
  margin-left: 48px;
  padding-bottom: 16px;
  color: var(--footer-text);
  font: x-small/normal Arial, Helvetica, sans-serif;
}
.art-footer a:link { color: var(--footer-link); }
.art-footer a:visited { color: var(--footer-visited); }
.art-footer a:active { color: var(--footer-active); }