main { position: relative; }

.custom-notes {
  width: min(calc(100% - 48px), 780px);
  margin: 36px auto 0;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
}

.custom-note { margin: 0 0 18px; white-space: pre-wrap; line-height: 1.35; }
.custom-note--paper { color: #f4f1ea; }
.custom-note--red { color: #d7272a; }
.custom-note--small { font-size: 13px; }
.custom-note--medium { font-size: 16px; }
.custom-note--large { font-size: 20px; }
.custom-note--left { text-align: left; }
.custom-note--center { text-align: center; }
.custom-note--right { text-align: right; }
.custom-free-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.custom-note--free { position: absolute; width: min(360px, 82vw); margin: 0; transform: translate(-50%, -50%); pointer-events: none; }
.editor-preview .custom-note--free { padding: 6px; outline: 1px dashed #d7272a; background: rgba(16, 16, 15, 0.72); pointer-events: auto; cursor: grab; touch-action: none; }
.editor-preview .custom-note--free.is-dragging { cursor: grabbing; user-select: none; }

@media (max-width: 780px) {
  .custom-notes { width: calc(100% - 40px); margin-top: 28px; }
  .custom-note--small { font-size: 12px; }
  .custom-note--medium { font-size: 14px; }
  .custom-note--large { font-size: 17px; }
}