html, body { margin: 0; height: 100%; background: #000; }
body { display: flex; align-items: flex-start; justify-content: center; }

/* the Director stage: 640 x 760 */
#stage {
  position: relative; width: 640px; height: 760px; overflow: hidden; background: #000;
  /* the original's pixel font, used when it is installed */
  font: 8px/11px "kroeger 05_53", "kroeger 05_55", Silkscreen, Verdana, sans-serif;
  -webkit-font-smoothing: none; font-smooth: never; text-rendering: optimizeSpeed;
  user-select: none; cursor: default;
}

/* sprite 1 and the movie-in-a-window share the same place: (0, 60), 640 x 360 */
#flash, #miaw { position: absolute; left: 0; top: 60px; width: 640px; height: 360px; z-index: 1; }
#miaw { z-index: 200; display: none; background: #000; }
#miaw canvas { display: block; width: 640px; height: 360px; }

.sprite { position: absolute; box-sizing: border-box; white-space: pre; overflow: hidden; }
.sprite.field, .sprite.button, .sprite.text.boxed { text-align: center; }
.sprite.button { border-radius: 4px; }
.sprite.text { white-space: pre-wrap; overflow: visible; line-height: 12px; }
.sprite.text.boxed { line-height: 12px; }
.sprite.field[contenteditable="true"] { outline: none; cursor: text; user-select: text; }
.sprite.bitmap canvas { display: block; }