.c12-back-to-top {
  position: fixed;
  z-index: 4;
  inset-inline-end: max(1rem, env(safe-area-inset-right));
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  place-content: center;
  gap: 3px;
  width: 44px;
  height: 60px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.c12-back-to-top[hidden] { display: none; }
.c12-back-to-top:hover { background: rgb(104 124 128 / 10%); }
.c12-back-to-top:focus-visible { outline: 2px solid #d48100; outline-offset: 3px; }
.c12-back-to-top .tile { display: block; width: 9px; height: 9px; background: var(--tile-color); }
.c12-back-to-top .tile:nth-child(odd) { --tile-color: #f2a714; --tile-flash: #88969a; }
.c12-back-to-top .tile:nth-child(even) { --tile-color: #88969a; --tile-flash: #f2a714; }
.c12-back-to-top.is-climbing .tile { animation: c12-climb .48s ease-in-out both; }
.c12-back-to-top.is-climbing .tile:nth-child(4) { animation-delay: 0ms; }
.c12-back-to-top.is-climbing .tile:nth-child(3) { animation-delay: 100ms; }
.c12-back-to-top.is-climbing .tile:nth-child(2) { animation-delay: 200ms; }
.c12-back-to-top.is-climbing .tile:nth-child(1) { animation-delay: 300ms; }
@keyframes c12-climb {
  0%, 100% { background: var(--tile-color); transform: translateY(0); }
  50% { background: var(--tile-flash); transform: translateY(-2px); }
}
body:has(dialog[open]) .c12-back-to-top { visibility: hidden; }
@media (max-width: 600px) {
  .c12-back-to-top {
    inset-inline-end: max(0px, env(safe-area-inset-right));
    justify-content: end;
    padding-inline-end: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c12-back-to-top.is-climbing .tile { animation: none; }
}
@media print { .c12-back-to-top { display: none; } }