html{
  margin:0;padding:0;
  overflow-x:hidden;
  overscroll-behavior:none;
  scrollbar-width:none;
  -webkit-text-size-adjust:100%;
  /* garish fallback so nothing ever reads as empty space before tiles load */
  background:#1a0033 repeating-conic-gradient(#ff00c8 0 25%,#00f0ff 0 50%) 0 0/24px 24px;
}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
body{
  margin:0;padding:0;
  overflow-x:clip;
  background:transparent;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
#c{
  position:relative;
  width:100%;
  min-height:100vh;
  overflow:hidden;
  overflow:clip;
  isolation:isolate;
  /* static (never animated) fallback under the animated tile patchwork: an animated background on
     this page-tall element would invalidate the whole root layer every frame */
  background:
    repeating-linear-gradient(45deg,rgba(255,255,0,.35) 0 6px,transparent 6px 18px),
    repeating-conic-gradient(#ff00c8 0 25%,#00f0ff 0 50%) 0 0/36px 36px,
    #7a00ff;
}
#c>div{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
#c>.g0{z-index:0}
#c>.g1{z-index:1}
#c>.g2{z-index:2}
#c .b{
  position:absolute;left:0;top:0;
  background-repeat:repeat;
  transform-origin:50% 50%;
}
#c img{
  position:absolute;left:0;top:0;
  display:block;
  pointer-events:none;
  max-width:none;
  transform-origin:50% 50%;
  -webkit-user-drag:none;
}
#c img.x{image-rendering:pixelated}
#c img.a1{animation:pu var(--d) ease-in-out var(--l) infinite}
#c img.a2{animation:wo var(--d) ease-in-out var(--l) infinite}
#c img.a3{animation:bo var(--d) ease-in-out var(--l) infinite}
#c img.a4{animation:sk var(--d) ease-in-out var(--l) infinite}
#c img.a5{animation:jt var(--d) steps(1,end) var(--l) infinite}
@keyframes pu{0%,100%{transform:scale(1)}50%{transform:scale(1.075)}}
@keyframes wo{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
@keyframes bo{0%,100%{transform:translateY(0)}50%{transform:translateY(-6%)}}
@keyframes sk{0%,100%{transform:skew(0deg,0deg) scale(1)}50%{transform:skew(5deg,-2deg) scale(1.03)}}
@keyframes jt{0%{transform:none}25%{transform:translate(2%,-1%) rotate(1.5deg)}50%{transform:translate(-1%,1%)}75%{transform:rotate(-1.5deg) scale(1.03)}}
@media (prefers-reduced-motion:reduce){
  #c img{animation:none!important}
}

#q{
  position:fixed;
  right:max(12px,env(safe-area-inset-right,12px));
  bottom:max(12px,env(safe-area-inset-bottom,12px));
  z-index:9999;
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  padding:0 9px;
  box-sizing:border-box;
  border-radius:9999px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:18px;
  font-weight:900;
  line-height:1;
  text-decoration:none;
  color:#060012;
  background:linear-gradient(135deg,#00f0ff 0%,#39ff14 45%,#ff00c8 100%);
  border:2px solid #000;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.7) inset,
    0 3px 8px rgba(0,0,0,0.85),
    0 0 12px rgba(0,240,255,0.8),
    0 0 22px rgba(255,0,200,0.5);
  text-shadow:
    0 1px 0 rgba(255,255,255,0.8),
    0 -1px 0 rgba(0,0,0,0.3);
  cursor:pointer;
  -webkit-user-select:none;user-select:none;
  transform:translateZ(0);
  animation:qFloat 2.8s ease-in-out infinite;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease,filter .18s ease;
}
#q:hover{
  transform:scale(1.18) translateY(-2px);
  filter:brightness(1.15);
  box-shadow:
    0 0 0 1.5px #fff inset,
    0 5px 14px rgba(0,0,0,0.9),
    0 0 18px #00f0ff,
    0 0 32px #ff00c8;
}
#q:active{
  transform:scale(0.95);
}
@keyframes qFloat{
  0%,100%{
    transform:translateY(0) scale(1);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.7) inset,
      0 3px 8px rgba(0,0,0,0.85),
      0 0 12px rgba(0,240,255,0.8),
      0 0 22px rgba(255,0,200,0.5);
  }
  50%{
    transform:translateY(-3.5px) scale(1.04);
    box-shadow:
      0 0 0 1.5px rgba(255,255,255,0.9) inset,
      0 5px 12px rgba(0,0,0,0.9),
      0 0 18px rgba(0,240,255,1),
      0 0 28px rgba(255,0,200,0.7);
  }
}
@media (prefers-reduced-motion:reduce){
  #q{animation:none!important}
}