.model-control {
  all: unset; position: absolute; inset: 0; display: block; cursor: grab;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.model-control:focus-visible { outline: 3px solid var(--sun, #ffd23f); outline-offset: -6px; border-radius: 18px; }
.model-control.model-dragging, canvas.model-dragging { cursor: grabbing !important; }
.model-hint { position: absolute; left: calc(28px + var(--safe-l, 0px)); bottom: calc(16px + var(--safe-b, 0px)); color: #fff; font-weight: 700; font-size: 14px; text-shadow: 0 2px 0 var(--ink); pointer-events: none; }
.model-emoji { position: absolute; z-index: 2; font: 40px/1.2 system-ui; transform: translate(-50%, -100%); filter: drop-shadow(0 3px 2px #0005); pointer-events: none; }
.model-emoji[hidden] { display: none; }
.preview-wrap { position: relative; }
.preview-wrap canvas { touch-action: none; }
.preview-hint { position: absolute; bottom: 8px; left: 8px; right: 8px; text-align: center; font-size: 12px; font-weight: 700; color: var(--ink); text-shadow: 0 1px 2px #fffc; pointer-events: none; }
@media (max-width: 759px) and (orientation: portrait) { .model-hint { top: 42%; bottom: auto; left: 0; right: 0; text-align: center; font-size: 12px; } }