/* Versioned alongside viewer.js; keep selector-specific styles local to v1. */
.stoapack-viewer {
  display: block;
  width: 100%;
  color: #25241f;
  font: inherit;
}
.stoapack-viewer__canvas {
  display: block;
  width: 100%;
  height: auto;
  min-height: 240px;
  background: #f4f2ed;
  border: 1px solid #d5d0c5;
  border-radius: 8px;
  touch-action: none;
  cursor: grab;
}
.stoapack-viewer__canvas:active { cursor: grabbing; }
.stoapack-viewer__canvas:focus-visible,
.stoapack-viewer__controls button:focus-visible,
.stoapack-viewer__step input:focus-visible {
  outline: 3px solid #67568a;
  outline-offset: 3px;
}
.stoapack-viewer__controls,
.stoapack-viewer__step {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .65rem;
  padding: .65rem 0;
}
.stoapack-viewer__controls button {
  padding: .45rem .8rem;
  border: 1px solid #b9b2a6;
  border-radius: 5px;
  background: #eeece5;
  color: #25241f;
  font: inherit;
  cursor: pointer;
}
.stoapack-viewer__controls button:hover { background: #e2ded4; }
.stoapack-viewer__hint { color: #535149; font-size: .875rem; }
.stoapack-viewer__step label { font-weight: 600; }
.stoapack-viewer__step input { flex: 1; min-width: 120px; accent-color: #67568a; }
.stoapack-viewer__live { color: #39382f; font-size: .875rem; min-width: 13rem; }
stoapack-viewer[data-viewer-error] .stoapack-viewer__canvas { display: none; }
stoapack-viewer > svg { display: block; width: 100%; height: auto; }
stoapack-viewer [data-static-fallback][hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .stoapack-viewer__canvas { scroll-behavior: auto; }
}
@media (max-width: 767px) {
  .stoapack-viewer__canvas { min-height: 205px; }
  .stoapack-viewer__live { flex-basis: 100%; }
}