html, body {
  height: 100%;
  margin: 0;
  background: #000;
}

.topbar{
  position: fixed; /* garante referência pro absolute */
  inset: 0 0 auto 0;
  height: 120px;
  padding: 18px 20px;
  pointer-events: auto;
  overflow: visible;
  z-index: 10;
}

.logo-nome,
.logo-hydra{
  position: absolute;
  top: 18px;
  max-height: 84px;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: auto;
}

.logo-nome{
  left: 5px;
  top: -60px;
  transform: scale(3);
  transform-origin: top left;
}

.logo-hydra{
  right: 20px;
  transform: scale(3);
  transform-origin: top right;
}

.img--broken{
  outline: 1px dashed rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
  min-width: 120px;
  min-height: 40px;
}