/* The original kami.im header emblem from assets/css/z.css and header.html. */
.brand.brand-original {
  min-width: 60px;
  width: 60px;
  height: 60px;
  gap: 0;
}
.brand-emblem {
  display: block;
  flex: none;
  width: 60px;
  height: 60px;
}
.header-messages {
  position: relative;
}
.header-unread-count {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border: 2px solid #fbf3f9;
  border-radius: 20px;
  background: #c987a5;
  color: #fff;
  font-size: 8px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.brand-original .logo,
.brand-original .logo span {
  display: block;
  border: 1px solid transparent;
  border-radius: 50%;
  padding: 5px;
  animation: original-logo-rotate 88s infinite linear;
  will-change: transform;
}
.brand-original .logo {
  width: 60px;
  height: 60px;
}
.brand-original .logo span:hover {
  animation-play-state: paused;
}
.brand-original .logo .lo1 {
  background: rgba(255, 255, 255, 0.2);
}
.brand-original .logo .lo2 {
  background: rgba(255, 255, 255, 0.3);
  border-top-color: rgba(252, 88, 188, 1);
  border-right-color: rgba(252, 88, 188, 0.8);
  border-bottom-color: rgba(22, 22, 22, 1);
  border-left-color: rgba(22, 22, 22, 0.8);
}
.brand-original .logo .lo3 {
  background: rgba(255, 255, 255, 0.5);
  border-left-color: #fff;
  border-bottom-color: rgba(244, 18, 18, 1);
  border-right-color: rgba(75, 150, 255, 1);
  border-top-color: rgba(244, 223, 46, 1);
}
.brand-original .logo .lo4 {
  background: rgba(255, 255, 255, 0.8);
}
@keyframes original-logo-rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (max-width: 700px) {
  .brand.brand-original {
    min-width: 48px;
    width: 48px;
    height: 48px;
    flex: 1;
  }
  .brand-emblem {
    transform: scale(0.8);
    transform-origin: left center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-original .logo,
  .brand-original .logo span {
    animation: none;
  }
}
/* A quiet, unique account mark; no label or tooltip is added to the name. */
.madoka-mark {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  vertical-align: -0.16em;
  margin-inline-start: 0.3em;
  flex-shrink: 0;
}
.comment-reply-target {
  font-size: inherit;
  color: var(--text-muted, #9b7d8d);
}