[data-idst-harness3d] {
  position: relative;
  display: block;
  isolation: isolate;
  inline-size: 100%;
  block-size: 508px;
  min-block-size: 320px;
  overflow: hidden;
  background: #080a0c;
  contain: layout paint;
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

[data-idst-harness3d]:active { cursor: grabbing; }

[data-idst-harness3d]:focus-visible {
  outline: 1px solid #91a0aa;
  outline-offset: -3px;
}

[data-idst-harness3d] > .idst-harness3d-canvas {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100% !important;
  block-size: 100% !important;
  max-inline-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  pointer-events: none;
}

.idst-harness3d-dimensions {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  pointer-events: none;
}

.idst-harness3d-dimension-line {
  fill: none;
  stroke: #a0abb1;
  stroke-width: 0.7;
  opacity: 0.82;
  vector-effect: non-scaling-stroke;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.idst-harness3d-dimension-backplate { fill: #080a0c; fill-opacity: 0.86; }

.idst-harness3d-dimension-label {
  fill: #ced4d8;
  font: 10.5px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0;
}

.idst-harness3d-dimension-note {
  position: absolute;
  z-index: 2;
  inset-inline: 14px;
  inset-block-end: 13px;
  display: block;
  color: #a3acb2;
  font: 9px/1.5 Arial, sans-serif;
  letter-spacing: 0.015em;
  text-align: right;
  pointer-events: none;
}

@media (max-width: 399px) {
  .idst-harness3d-dimension-label { font-size: 10px; }
}

@media (max-width: 1024px) {
  [data-idst-harness3d] { block-size: 480px; }
}

@media (max-width: 880px) {
  [data-idst-harness3d] {
    block-size: 420px;
    min-block-size: 300px;
  }
}