:root{
  --sf-bg:#000;
  --sf-panel:#030303;
  --sf-radius:24px;
  --sf-side-gap:6mm;
  --sf-next-size:15mm;
  --sf-next-bottom:28mm;
}

*{box-sizing:border-box}

html,body{
  width:100%;
  min-height:100%;
  margin:0;
  background:var(--sf-bg);
  color:#fff;
  overflow:hidden;
}

.sf-page{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:#000;
}

.sf-floating-window{
  position:absolute;
  top:5mm;
  right:var(--sf-side-gap);
  bottom:5mm;
  left:var(--sf-side-gap);
  overflow:hidden;
  border:1px solid transparent;
  border-radius:var(--sf-radius);
  background:
    linear-gradient(var(--sf-panel),var(--sf-panel)) padding-box,
    linear-gradient(115deg,#ff3b30,#ffcc00,#35ff62,#20d8ff,#735cff,#ff39c6,#ff3b30) border-box;
  box-shadow:
    0 0 12px rgba(32,216,255,.20),
    0 0 18px rgba(255,57,198,.13);
  animation:sf-rise .72s cubic-bezier(.2,.8,.25,1) both,
            sf-float 2.4s ease-in-out .72s infinite;
}

.sf-next-button{
  position:absolute;
  z-index:20;
  left:50%;
  bottom:var(--sf-next-bottom);
  width:var(--sf-next-size);
  height:var(--sf-next-size);
  padding:0;
  display:grid;
  place-items:center;
  transform:translateX(-50%);
  border:0;
  border-radius:50%;
  color:#69dc00;
  font-size:7mm;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  background:transparent;
  text-shadow:
    0 0 5px rgba(105,220,0,.85),
    0 0 11px rgba(255,255,255,.35);
  box-shadow:none;
  animation:sf-tick-rotate 2.4s ease-in-out infinite;
}

.sf-next-button:active{
  transform:translateX(-50%) scale(.92);
}

.sf-page.sf-leaving .sf-floating-window{
  animation:sf-exit-up .62s cubic-bezier(.7,0,.8,.3) both;
}

@keyframes sf-rise{
  from{transform:translateY(105%);opacity:0}
  to{transform:translateY(0);opacity:1}
}

@keyframes sf-float{
  0%,100%{translate:0 0}
  50%{translate:0 -2mm}
}

@keyframes sf-tick-rotate{
  0%,100%{rotate:-8deg;filter:brightness(1)}
  50%{rotate:8deg;filter:brightness(1.35)}
}

@keyframes sf-exit-up{
  to{transform:translateY(-110%);opacity:0}
}

@media(prefers-reduced-motion:reduce){
  .sf-floating-window,.sf-next-button{animation:none}
}