/* OTTO vector wordmark. Decoration: the element is aria-hidden and never takes text selection. */
.vwm {
  position: relative;
  width: min(100%, calc(55svh * 1238.09 / 358.637));
  aspect-ratio: 1238.09 / 358.637;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}

.vwm-fallback,
.vwm-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.vwm[data-wordmark="live"] .vwm-fallback,
.vwm[data-wordmark="still"] .vwm-fallback {
  visibility: hidden;
}

/* "62, 57": a handle's place, set in the top-left corner inside its square by wordmark.js. */
.vwm-readout {
  position: absolute;
  top: 0;
  left: 0;
  font: 600 0.75rem/1 var(--sans, "IBM Plex Sans", system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  color: var(--amber, #ffc61a);
  white-space: nowrap;
  pointer-events: none;
  visibility: hidden;
}

.vwm[data-wordmark="live"] .vwm-readout,
.vwm[data-wordmark="still"] .vwm-readout {
  visibility: visible;
}