.mp-postcard {
  position: absolute;
  left: var(--mp-photo-x, 67.27%);
  top: var(--mp-photo-y, 15.65%);
  width: var(--mp-photo-width, 11.75%);
  height: var(--mp-photo-height, 9.75%);
  transform: translate(-50%, -50%) rotate(var(--mp-photo-rotation, -6deg)) scale(var(--mp-photo-scale, 1));
  overflow: hidden;
  pointer-events: none;
  border-radius: .12cqw;
  box-shadow: inset 0 0 0 1px #604d36;
}
.mp-postcard img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--mp-photo-crop-x, 50%) var(--mp-photo-crop-y, 50%);
}
/* Preserve the actual tack from the board artwork above the photo. */
.mp-postcard-pin {
  position: absolute;
  inset: 0;
  background: inherit;
  clip-path: ellipse(.66% .95% at 61.53% 12.16%);
  pointer-events: none;
}
.mp-postcard-editor {
  position: fixed;
  z-index: 2401;
  top: max(2px, calc(50dvh - min(35.25vw, 46dvh, 390px) - 26px));
  left: max(12px, calc(50vw - min(47vw, 61.333dvh, 520px) + 12px));
  width: min(250px, calc(100vw - 28px));
  font: 12px/1.4 'Exo 2', sans-serif;
  color: #e7edf0;
}
.mp-postcard-editor:not(.is-visible) { display: none; }
.mp-postcard-editor summary {
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid #53616a;
  border-radius: 4px;
  background: rgba(20, 36, 47, .9);
  color: #bccbd3;
  cursor: pointer;
  opacity: .72;
}
.mp-postcard-editor summary:hover,
.mp-postcard-editor[open] summary { opacity: 1; }
.mp-postcard-editor-body { margin-top: 5px; padding: 12px; border: 1px solid #75838a; border-radius: 5px; background: #15232d; }
.mp-postcard-editor label { display: grid; grid-template-columns: 70px 1fr 48px; gap: 6px; align-items: center; margin-bottom: 7px; }
.mp-postcard-editor input { width: 100%; min-width: 0; accent-color: #80bfdc; }
.mp-postcard-editor output { text-align: right; font-variant-numeric: tabular-nums; }
.mp-postcard-editor button { padding: 6px 9px; margin: 0 6px 8px 0; border: 1px solid #75838a; border-radius: 4px; background: #294455; color: #fff; cursor: pointer; font: inherit; }
.mp-postcard-editor textarea { width: 100%; height: 74px; resize: vertical; background: #0e1921; color: #cbe1ed; font: 10px/1.4 monospace; }
.mp-postcard-editor small { display: block; margin-bottom: 8px; }
@media (max-width: 700px) and (orientation: portrait), (max-width: 900px) and (max-height: 560px) {
  .mp-postcard {
    position: relative;
    left: auto;
    top: auto;
    width: 160px;
    height: 100px;
    margin: 2px auto 20px;
    border: 6px solid #cbb794;
    transform: rotate(-6deg);
  }
  .mp-postcard-pin { display: none; }
  .mp-postcard-editor { top: max(0px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); }
}