.print-type-visual.has-model {
  display: flex;
  flex-direction: column;
  height: 365px;
  padding: 10px 12px 0;
}

.print-model-viewport {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  perspective: 850px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  direction: ltr;
}

.print-model-viewport.is-dragging { cursor: grabbing; }

.print-model-viewport::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 8px;
  left: calc(50% - 75px);
  bottom: 18px;
  border-radius: 50%;
  background: #5447351a;
  filter: blur(8px);
  pointer-events: none;
}

.print-model-viewport:focus-visible,
.print-model-controls button:focus-visible {
  outline: 2px solid #606348;
  outline-offset: 3px;
}

.print-model {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--pitch, -10deg)) rotateY(var(--yaw, -28deg));
}

.print-model.is-settling { transition: transform 350ms cubic-bezier(.2,.7,.2,1); }

.print-model-block {
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translate3d(var(--x), var(--y), var(--z));
}

.print-model-face {
  position: absolute;
  backface-visibility: hidden;
  background-color: #e8e2d3;
}

.print-model-face--front,
.print-model-face--back {
  width: var(--w);
  height: var(--h);
  left: calc(var(--w) / -2);
  top: calc(var(--h) / -2);
}

.print-model-face--front { transform: translateZ(calc(var(--d) / 2)); }
.print-model-face--back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }

.print-model-face--left,
.print-model-face--right {
  width: var(--d);
  height: var(--h);
  left: calc(var(--d) / -2);
  top: calc(var(--h) / -2);
}

.print-model-face--left { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.print-model-face--right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }

.print-model-face--top,
.print-model-face--bottom {
  width: var(--w);
  height: var(--d);
  left: calc(var(--w) / -2);
  top: calc(var(--d) / -2);
}

.print-model-face--top { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.print-model-face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }

/* The patterns describe fabric weave and wood grain on actual model surfaces. */
.print-material-canvas .print-model-face {
  background-image: repeating-linear-gradient(0deg, transparent 0 2px, #91866d09 2px 3px),
    repeating-linear-gradient(90deg, transparent 0 2px, #ffffff18 2px 3px);
}

.print-material-wood .print-model-face,
.print-material-stretcher .print-model-face--back {
  background-color: #b38a58;
  background-image: repeating-linear-gradient(var(--grain-angle, 92deg), #7c522618 0 1px, transparent 1px 5px, #e2bb8420 5px 8px);
}

.print-material-wood .print-model-face--front {
  box-shadow: inset 1px 1px 1px #ead3a9, inset -1px -1px 1px #8b633d;
}

.print-material-stretcher .print-model-face { background-color: #e7dfcd; }
.print-material-stretcher .print-model-face--back { background-color: #b38a58; }
.print-material-paper .print-model-face { background-color: #f3eddf; }
.print-material-panel .print-model-face { background-color: #78634c; }
.print-material-panel .print-model-face--front { background-color: #eee8da; }
.print-material-panel .print-model-face--back {
  background-color: #aa8356;
  background-image: repeating-linear-gradient(2deg, transparent 0 5px, #68472322 5px 6px);
}
.print-model-face--left { filter: brightness(.84); }
.print-model-face--right { filter: brightness(.92); }
.print-model-face--bottom { filter: brightness(.72); }
.print-model-face--top { filter: brightness(1.04); }

.print-model-hint {
  margin: 0;
  color: #624a33;
  font-size: 12px;
  text-align: center;
  line-height: 1.6;
}

.print-model-controls {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
}

.print-model-controls button {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #606348;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.print-model-controls button:hover { background: #e3e1d5; }
.print-model-controls button:active { background: #d8d7c8; }

@media (max-width: 760px) {
  .print-type-visual.has-model { height: 350px; }
}

@media (prefers-reduced-motion: reduce) {
  .print-model.is-settling { transition: none; }
}