.stl-viewer {
  width: 100%;
  max-width: 600px;
  margin: 2.5rem auto;
  text-align: center;
}
.stl-viewer figcaption { margin-bottom: .75rem; }
.stl-viewer__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.stl-viewer__stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}
.stl-viewer__stage canvas:active { cursor: grabbing; }
.stl-viewer__status {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 1rem;
  margin: 0;
  pointer-events: none;
}
.stl-viewer__status[hidden] { display: none; }
.stl-viewer__controls[hidden] { visibility: hidden; }
.stl-viewer__controls {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: .4rem;
  margin: .75rem 0;
}
.stl-viewer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #aaa;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font: inherit;
  cursor: pointer;
}
.stl-viewer button:hover { background: #eee; }
.stl-viewer button:focus-visible,
.stl-viewer a:focus-visible { outline: 2px solid #333; outline-offset: 3px; }
.stl-viewer canvas:focus-visible { outline: 2px solid #333; outline-offset: -4px; }
.stl-viewer button img { display: block; width: 20px; height: 20px; margin: 0; border: 0; }
.stl-viewer__download { display: inline-block; padding: .3rem 0; }