.viewer-stage--model {
  cursor: grab;
  touch-action: none;
}

.viewer-stage--model:active {
  cursor: grabbing;
}

.controller-model {
  position: relative;
  z-index: 2;
  width: min(100%, 720px);
  height: 620px;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: #f7b4c5;
}

.viewer-stage--model .viewer-badge {
  top: 44px;
}

.viewer-model-help {
  position: absolute;
  z-index: 4;
  bottom: 34px;
  margin: 0;
  color: #d9c8d2;
  font-size: .72rem;
  letter-spacing: .04em;
  text-align: center;
  pointer-events: none;
}

.model-loading,
.model-error {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #f7b4c5;
  font: 700 .78rem Inter, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.model-loading span {
  padding: 12px 16px;
  border: 1px solid rgba(255, 204, 219, .3);
  border-radius: 999px;
  background: rgba(31, 18, 42, .7);
}

@media (max-width: 900px) {
  .controller-model { height: 480px; }
}

@media (max-width: 640px) {
  .controller-model { height: 390px; }
  .viewer-stage--model .viewer-badge { top: 14px; }
  .viewer-model-help { bottom: 10px; font-size: .66rem; }
}