.server-announcement {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 4px);
  left: max(8px, env(safe-area-inset-left, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
  height: 30px;
  z-index: 90;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  color: #fff;
  background: rgba(12, 17, 19, .38);
  border-radius: 3px;
  contain: layout paint;
}
.server-announcement__text {
  position: absolute;
  left: 100%;
  display: block;
  width: max-content;
  white-space: nowrap;
  font: 500 14px/30px "Noto Sans SC", "Microsoft YaHei", sans-serif;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
  animation: server-announcement-scroll var(--announcement-duration, 30s) linear var(--announcement-delay, 0s) both;
  /* The owner explicitly chose a scrolling notice. theme.css's reduced-motion
     1ms rule would move its text off-screen immediately and hide the whole pass.
     Keep this notice's reading time; other UI animations retain their preference. */
  animation-duration: var(--announcement-duration, 30s) !important;
  will-change: transform;
}
@keyframes server-announcement-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - 100vw)); }
}