html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

#frame {
  position: relative;
  padding: 1.6em;
  font-family: 'Times New Roman', serif;
}
#frame main { text-align: left; }

.border {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  line-height: 1;
  white-space: pre;
  margin: 0;
  pointer-events: none;
  user-select: none;
}
.border-top   { top: 0; left: 0; right: 0; }
.border-bot   { bottom: 0; left: 0; right: 0; }
.border-left  { top: 0; bottom: 0; left: 0; }
.border-right { top: 0; bottom: 0; right: 0; }

.punct-slot { display: inline-block; width: 0; }
.punct {
  position: fixed;
  margin: 0;
  will-change: transform;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.punct:active { cursor: grabbing; }