:root {
  --back-to-top-size: 46px;
  --back-to-top-gap: 12px;
  --back-to-top-offset-x: calc(18px + env(safe-area-inset-right, 0px));
  --back-to-top-offset-y: calc(18px + env(safe-area-inset-bottom, 0px));
  --feedback-widget-bottom-extra: 0px;
}

html.is-back-to-top-visible {
  --feedback-widget-bottom-extra: calc(var(--back-to-top-size) + var(--back-to-top-gap));
}

.site-back-to-top {
  position: fixed;
  right: var(--back-to-top-offset-x);
  bottom: var(--back-to-top-offset-y);
  z-index: 70;
  display: inline-grid;
  place-items: center;
  width: var(--back-to-top-size);
  height: var(--back-to-top-size);
  padding: 0;
  color: #1267d8;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(147, 197, 253, 0.8);
  border-radius: 8px;
  box-shadow:
    0 16px 36px rgba(15, 23, 42, 0.16),
    0 0 0 4px rgba(96, 165, 250, 0.12);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 220ms ease;
  pointer-events: none;
  backdrop-filter: blur(14px);
}

.site-back-to-top[hidden] {
  display: none;
}

.site-back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.site-back-to-top:hover,
.site-back-to-top:focus-visible {
  color: #ffffff;
  background: #1267d8;
  border-color: rgba(18, 103, 216, 0.86);
  box-shadow:
    0 18px 42px rgba(18, 103, 216, 0.32),
    0 0 0 7px rgba(96, 165, 250, 0.16);
  outline: none;
}

.site-back-to-top svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-theme="dark"] .site-back-to-top {
  color: #8ec5ff;
  background: rgba(13, 20, 32, 0.9);
  border-color: rgba(96, 165, 250, 0.28);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.34),
    0 0 0 4px rgba(96, 165, 250, 0.1);
}

[data-theme="dark"] .site-back-to-top:hover,
[data-theme="dark"] .site-back-to-top:focus-visible {
  color: #ffffff;
  background: #1a73e8;
  border-color: rgba(96, 165, 250, 0.58);
}

@media (max-width: 760px) {
  :root {
    --back-to-top-size: 44px;
    --back-to-top-gap: 10px;
    --back-to-top-offset-x: calc(16px + env(safe-area-inset-right, 0px));
    --back-to-top-offset-y: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}