.viewer {
  position: absolute;
  inset: 0;
  container-type: size;
  pointer-events: none;
}

.viewport {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100cqw, 100cqh);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

/* Outrank host product-image sizing, including its mobile rules. */
.viewer[data-home-link-viewer] .viewport img.poster,
.viewer[data-home-link-viewer] .viewport .canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  background: transparent;
  transform: none;
}

.viewer[data-home-link-viewer] .viewport img.poster[hidden] { display: none; }
.canvas { opacity: 0; pointer-events: none; touch-action: pan-y pinch-zoom; }
.canvas[data-ready="true"] { opacity: 1; pointer-events: auto; cursor: grab; }
.canvas[data-ready="true"]:active { cursor: grabbing; }

.controls {
  position: absolute;
  right: 10px;
  bottom: 8px;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  color: var(--muted, #a2adb8);
  font-size: 11px;
  line-height: 1.4;
}
.hint { margin-right: 6px; }
.controls button {
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid transparent;
  background: var(--paper, #0c1215);
  color: var(--ink, #fff);
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
}
.controls button:hover { border-color: var(--rule, #3e5468); }
.controls button:focus-visible {
  outline: 2px solid var(--orchid, #d168bc);
  outline-offset: -3px;
}
.canvas:focus,
.canvas:focus-visible { outline: none; }
.instructions {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Keep the deliberately low-resolution drawing crisp when enlarged. */
.canvas { image-rendering: pixelated; }