.desktop-scroll-progress {
    display: block;
    position: fixed;
    z-index: 40;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--bg-inverted, #202522);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
  }
  body:has(dialog[open]) .desktop-scroll-progress { visibility: hidden; }
.back-to-top,
.message-sally {
  background: var(--text-primary, #181818);
  border-color: var(--text-primary, #181818);
  color: var(--bg-primary, #F0EBDE);
  position: fixed;
  z-index: 35;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(24, 24, 24, .45);
  border-radius: 2px;
  background: rgba(240, 235, 222, .88);
  color: var(--text-primary);
  font: 400 10px/1 var(--font-mono);
  letter-spacing: .06em;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms;
}
.back-to-top.is-visible,
.message-sally.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.message-sally {
  left: calc(16px + env(safe-area-inset-left, 0px));
  right: auto;
  padding-inline: 14px;
  font-weight: 500;
  cursor: default;
}
.back-to-top:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }
body:has(dialog[open]) .back-to-top,
body:has(dialog[open]) .message-sally { visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .back-to-top,
  .message-sally { transition: none; }
}