/* Shared brand lettering for the app, startup screen, and guide. */
[data-theme="dark"] img[src$="/karpo-logo.svg"] {
  filter: brightness(0) invert(1);
}

.brand-wordmark {
  display: inline-block;
  width: 94px;
  aspect-ratio: 1367 / 276;
  vertical-align: baseline;
  background-color: currentColor;
  -webkit-mask: url('/petaoss-wordmark.svg') center / contain no-repeat;
  mask: url('/petaoss-wordmark.svg') center / contain no-repeat;
}
.header-title .brand-wordmark, .brand .brand-wordmark { display: block; }
@media (max-width: 768px) {
  .brand-wordmark { width: 76px; }
}
@media (max-width: 360px) {
  .brand-wordmark { width: 62px; }
}