html, body { height:100%; margin:0; background:#0f0f10; overflow:hidden; }
#app { position:fixed; inset:0; width:100%; height:100dvh; height:100vh; }

.hud{
  position:fixed; left:10px; top:10px; color:#fff;
  font:13px/1.35 system-ui, sans-serif;
  background:rgba(0,0,0,.45);
  padding:10px 12px; border-radius:12px;
  white-space:pre; user-select:none;
  max-width: min(820px, calc(100vw - 20px));
}
.tip{
  position:fixed; left:10px; bottom:10px; color:#fff;
  font:13px/1.35 system-ui, sans-serif;
  background:rgba(0,0,0,.45);
  padding:8px 10px; border-radius:12px;
  max-width:min(820px, calc(100vw - 20px));
}
.badge{ display:inline-block; padding:2px 7px; border-radius:999px; background:rgba(255,255,255,.12); margin-right:6px; }
.btn{
  display:inline-block; padding:4px 8px; border-radius:10px;
  background:rgba(255,255,255,.12); cursor:pointer; margin-right:6px;
}
.btn:hover{ background:rgba(255,255,255,.18); }
.err{
  position:fixed; left:10px; right:10px; top:10px;
  color:#fff; background:rgba(180,0,0,.55);
  padding:10px 12px; border-radius:12px;
  font:13px/1.35 system-ui, sans-serif;
  white-space:pre-wrap;
  display:none;
  z-index: 999999;
}
#app canvas{ touch-action:none; }

/* === Viewer host (pluggable viewer surface) === */
.viewer-host{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* === CSS 3D cube viewer === */
.cube-stage{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: var(--cube-persp, 1200px);
  touch-action: none;
  user-select: none;
}

.cube{
  position: relative;
  width: var(--cube-face, 512px);
  height: var(--cube-face, 512px);
  transform-style: preserve-3d;
}

.cube-face{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  backface-visibility: visible;
  overflow: hidden;
}

/* Face placement. Each face sits at +Z and we rotate it into place. */
.cube-face-pz{ transform: rotateY(180deg) translateZ(calc(var(--cube-face, 512px) / 2)); }
.cube-face-nz{ transform: rotateY(0deg) translateZ(calc(var(--cube-face, 512px) / 2)); }
.cube-face-px{ transform: rotateY(90deg) translateZ(calc(var(--cube-face, 512px) / 2)); }
.cube-face-nx{ transform: rotateY(-90deg) translateZ(calc(var(--cube-face, 512px) / 2)); }
.cube-face-py{ transform: rotateX(-90deg) translateZ(calc(var(--cube-face, 512px) / 2)); }
.cube-face-ny{ transform: rotateX(90deg) translateZ(calc(var(--cube-face, 512px) / 2)); }

.cube-face canvas{ width: 100%; height: 100%; display: block; transform: scaleX(-1); }