/*
 * Orange Star Virtual Lab 3D host styles.
 * The renderer also works with a caller-owned canvas; these styles provide the
 * preferred responsive host, accessible focus ring, controls hint and fallback.
 */
.orange-star-lab-3d-host {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 280px;
  overflow: hidden;
  color: #dce9e6;
  background:
    radial-gradient(circle at 50% 35%, rgb(37 137 99 / 10%), transparent 58%),
    linear-gradient(145deg, #111d23, #060d12);
  border: 1px solid #30454d;
  border-radius: 16px;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 4%),
    0 20px 60px rgb(0 0 0 / 24%);
  contain: layout paint style;
}

.vl-stage-canvas > .orange-star-lab-3d-host {
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
  border-radius: 10px;
}

.orange-star-lab-3d-canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
  outline: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.orange-star-lab-3d-canvas.is-dragging {
  cursor: grabbing;
}

.orange-star-lab-3d-canvas:focus-visible {
  box-shadow:
    inset 0 0 0 3px #4bd596,
    inset 0 0 0 7px rgb(75 213 150 / 20%);
}

.orange-star-lab-3d-hint {
  position: absolute;
  z-index: 2;
  left: 16px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
  padding: 7px 11px;
  color: #b9cfca;
  font: 600 12px/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  white-space: nowrap;
  pointer-events: none;
  background: rgb(8 22 27 / 78%);
  border: 1px solid rgb(93 139 143 / 38%);
  border-radius: 9px;
  box-shadow: 0 7px 20px rgb(0 0 0 / 20%);
  backdrop-filter: blur(6px);
}

.orange-star-lab-3d-hint > [aria-hidden="true"] {
  display: grid;
  width: 19px;
  height: 19px;
  color: #65e2a8;
  font-size: 16px;
  place-items: center;
  border: 1px solid rgb(101 226 168 / 42%);
  border-radius: 50%;
}

.orange-star-lab-3d-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .orange-star-lab-3d-host {
    min-height: 250px;
    border-radius: 12px;
  }

  .orange-star-lab-3d-hint {
    right: 10px;
    bottom: 10px;
    left: auto;
    max-width: calc(100% - 20px);
    padding: 6px 9px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orange-star-lab-3d-host *,
  .orange-star-lab-3d-host *::before,
  .orange-star-lab-3d-host *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (forced-colors: active) {
  .orange-star-lab-3d-host {
    border: 2px solid CanvasText;
  }

  .orange-star-lab-3d-canvas:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: -4px;
    box-shadow: none;
  }

  .orange-star-lab-3d-hint {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
    backdrop-filter: none;
  }
}