/* Nobal Sanat — the machine viewer's own chrome. v2.0.0 */
.nsc3d{
  position:relative; width:100%; height:100%; overflow:hidden;
  background:#111418; cursor:grab; touch-action:none;
}
.nsc3d.is-held{ cursor:grabbing; }
.nsc3d canvas{ display:block; width:100%; height:100%; }

.nsc3d__hint{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%); z-index:2;
  font-size:11px; line-height:1.9; color:#8D97A4; pointer-events:none;
  white-space:nowrap; opacity:.85; transition:opacity .35s ease;
  text-shadow:0 1px 6px rgba(0,0,0,.8);
}
.nsc3d.is-held .nsc3d__hint{ opacity:0; }

/* the move pad: a phone has no middle mouse button */
.nsc3d__pad{
  position:absolute; right:14px; bottom:14px; z-index:3;
  display:grid; grid-template-columns:repeat(3,30px); grid-template-rows:repeat(3,30px);
  width:90px; height:90px; border-radius:50%;
  background:rgba(14,17,21,.62); border:1px solid rgba(231,236,242,.18);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  touch-action:none;
}
.nsc3d__pad button{
  appearance:none; border:0; background:none; padding:0; margin:0; cursor:pointer;
  display:grid; place-items:center; color:#CBD3DB; line-height:0;
  transition:color .15s ease;
}
.nsc3d__pad button:nth-child(1){ grid-area:1/2; }
.nsc3d__pad button:nth-child(2){ grid-area:2/1; }
.nsc3d__pad button:nth-child(3){ grid-area:2/2; }
.nsc3d__pad button:nth-child(4){ grid-area:2/3; }
.nsc3d__pad button:nth-child(5){ grid-area:3/2; }
.nsc3d__pad button svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.nsc3d__pad button i{ width:9px; height:9px; border:1.5px solid currentColor; border-radius:50%; display:block; }
.nsc3d__pad button:hover,
.nsc3d__pad button.is-on{ color:#FFC61E; }
.nsc3d__pad button:focus-visible{ outline:2px solid #FFC61E; outline-offset:-2px; border-radius:50%; }

.nsc3d.is-bad{ display:grid; place-items:center; }
.nsc3d.is-bad::after{
  content:attr(data-err);
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; color:#C86A6A;
  padding:10px 14px; border:1px dashed #5B3B3B; border-radius:8px; max-width:80%;
  text-align:center; direction:ltr;
}
@media (max-width:560px){
  .nsc3d__pad{ right:10px; bottom:10px; width:80px; height:80px; grid-template-columns:repeat(3,26px); grid-template-rows:repeat(3,26px); }
  .nsc3d__hint{ font-size:10px; }
}
@media (prefers-reduced-motion:reduce){ .nsc3d__hint{ transition:none; } }