/* Sitestove navigation helper (helper.js). 56px target, quick in with a soft landing, exits at 60% on
   ease-in, nothing moves under reduced motion.
   Andreas's decision for Sitestove's own UI, not a DNA change: the helper is a translucent ink circle with a
   backdrop blur, against the DNA's no-radius and no-glass defaults. The circle echoes Sitestove's pilot-light
   dot. No edge ring. Solid ink where backdrop-filter is missing. */
.ss-helper{position:fixed;z-index:90;right:max(16px,calc(env(safe-area-inset-right) + 16px));bottom:max(16px,calc(env(safe-area-inset-bottom) + 16px));
  width:56px;height:56px;padding:0;border:0;margin:0;appearance:none;cursor:pointer;background:#111;color:#f1f0ed;border-radius:50%;
  display:grid;place-items:center;view-transition-name:ss-helper;
  opacity:0;visibility:hidden;transform:translateY(24px);
  transition:opacity .27s cubic-bezier(.895,.03,.685,.22),transform .27s cubic-bezier(.895,.03,.685,.22),visibility 0s linear .27s,background-color .25s}
.ss-helper.is-on{opacity:1;visibility:visible;transform:none;
  transition:opacity .45s cubic-bezier(.165,.84,.44,1),transform .45s cubic-bezier(.165,.84,.44,1),visibility 0s,background-color .25s}
.ss-helper:active{background:#3a3936}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ss-helper{background:rgba(17,17,17,.62);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
  .ss-helper:active{background:rgba(17,17,17,.86)}
}
.ss-helper:active{transform:scale(.985)}
.ss-helper:focus-visible{outline:2px solid #ff4f24;outline-offset:3px}
.ss-helper svg{grid-area:1/1;width:24px;height:24px;fill:currentColor;transition:transform .45s cubic-bezier(.165,.84,.44,1),opacity .3s cubic-bezier(.165,.84,.44,1)}
.ss-helper .ss-h-x{opacity:0;transform:rotate(-90deg) scale(.6)}
.ss-helper.is-close .ss-h-x{opacity:1;transform:none}
.ss-helper.is-close .ss-h-up{opacity:0;transform:rotate(90deg) scale(.6)}
/* hover only where there is a pointer that hovers: on touch a tap would leave it stuck on */
@media (hover:hover){.ss-helper:hover{background:#2a2a28}}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){@media (hover:hover){.ss-helper:hover{background:rgba(17,17,17,.76)}.ss-helper:active{background:rgba(17,17,17,.86)}}}
@media (hover:hover){.ss-helper:not(.is-close):hover .ss-h-up{transform:translateY(-3px)}.ss-helper.is-close:hover .ss-h-x{transform:rotate(90deg)}}
html.ss-lock .ss-helper{opacity:0;visibility:hidden}
::view-transition-group(ss-helper){animation-duration:.6s;animation-timing-function:cubic-bezier(.165,.84,.44,1)}
/* room under every footer for the circle, so at the very bottom nothing sits beneath it (the wordmark's last letter, the last link) */
html footer,html footer.ssf{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
@media print{.ss-helper{display:none}}
@media (prefers-reduced-motion:reduce){.ss-helper,.ss-helper.is-on,.ss-helper svg{transition:none}.ss-helper{transform:none}.ss-helper:hover .ss-h-up,.ss-helper.is-close:hover .ss-h-x{transform:none}}