/* Unison mark — static SVG helpers + 3D viewer chrome.
   3D spinner: public/assets/js/unison-mark-3d.js (animated GLB clips or procedural).
   Tokens: --unison-metal-* in root.css.
   Small sizes (favicon / sidebar): keep SVG — do not mount WebGL. */

.unison-mark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.unison-mark--static .unison-frame,
.unison-mark--static .unison-core,
.unison-mark--static .unison-outer,
.unison-mark--static .unison-inner,
.unison-mark--static .unison-seg {
  transform: none;
}

/* —— 3D host —— */
.unison-mark-3d-host {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 160px;
}

.unison-mark-3d-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

.unison-mark-3d-empty {
  position: absolute;
  left: 50%;
  bottom: 0.35rem;
  transform: translateX(-50%);
  width: min(100%, 280px);
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: rgba(10, 14, 16, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e8eaee;
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}

.unison-mark-3d-empty strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
  color: #f7f8fa;
}

.unison-mark-3d-empty span {
  display: block;
  color: #9aa3ad;
}

.unison-mark-3d-empty code {
  font-size: 0.9em;
  color: #c9ced4;
}