:root { color-scheme: dark; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { display: grid; grid-template-rows: 1fr; background: #30252d; color: #fff7fb; }
main { position: relative; overflow: hidden; cursor: grab; touch-action: none; }
main.dragging { cursor: grabbing; }
#stage { position: absolute; inset: 0; transform-origin: 0 0; }
#image { position: absolute; max-width: none; max-height: none; user-select: none; -webkit-user-drag: none; background: repeating-conic-gradient(#d8d8d8 0 25%, #fff 0 50%) 50% / 16px 16px; box-shadow: 0 0 0 1px #000; }
#image:not([src]) { display: none; }
#status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; color: #ead8e4; text-align: center; }
#status.hidden { display: none; }

@media (max-width: 480px), (max-height: 260px) {
  #status { padding: 8px; font-size: 12px; }
}