.brand-logo {
  width: 2rem !important;
  height: 2rem !important;
  flex: 0 0 2rem !important;
  overflow: hidden !important;
  border-radius: 0.55rem !important;
  background: transparent url('/miki-app-icon-192.png') center / contain no-repeat !important;
  padding: 0 !important;
  color: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
}

.brand-logo .brand-letter {
  display: none !important;
}

@media (display-mode: standalone) and (min-width: 640px) {
  .miki-site-header {
    position: fixed !important;
    inset: 0 0 auto 0;
    transform: translateY(calc(-100% + 6px));
    opacity: 0;
    border-bottom: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: transform 180ms ease, opacity 150ms ease, background-color 150ms ease;
  }

  .miki-site-header:hover,
  .miki-site-header:focus-within {
    transform: translateY(0);
    opacity: 1;
    background: color-mix(in srgb, var(--miki-surface, #fff) 94%, transparent) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  }
}

@media (display-mode: standalone) and (min-width: 640px) and (prefers-reduced-motion: reduce) {
  .miki-site-header {
    transition: none;
  }
}