:root{
  --holo:linear-gradient(100deg,#19e3ff,#3a5bff 18%,#c026ff 36%,#ff2bb0 50%,#ffe600 68%,#25ff9a 84%,#19e3ff);
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:#000;color:#fff;overflow:hidden;overscroll-behavior:none}
body{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:125%;-webkit-font-smoothing:antialiased}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:pointer;outline:0}
#stage.grab{cursor:grabbing}
#fallback{position:fixed;left:50%;top:44%;width:min(86vw,760px);transform:translate(-50%,-50%)}

main{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,4vh,44px);
  padding:0 0 0 clamp(28px,5vw,88px);width:min(44vw,720px)}
h1 img{display:block;width:100%;height:auto}
.foot{display:flex;flex-direction:column;gap:clamp(22px,4vh,38px)}
.line{font-size:clamp(15px,1.25vw,20px);line-height:1.45;font-weight:500;color:#dfe2ee;max-width:32em}
.line b{font-weight:800;background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}

nav{display:flex;gap:clamp(12px,1.4vw,20px);pointer-events:auto}

/* buttons are staples: a crown and two legs, and they bite down on hover */
.staple{position:relative;flex:0 0 auto;min-width:clamp(92px,8.6vw,128px);height:64px;padding:0 18px;border:0;background:none;color:#fff;
  font:800 16px/1 Archivo,Arial,sans-serif;font-stretch:125%;letter-spacing:.08em;text-decoration:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.staple::before{content:"";position:absolute;inset:0 0 0 0;border-radius:7px 7px 0 0;padding:6px 6px 0;background:var(--holo);background-size:220% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  transition:transform .16s cubic-bezier(.3,1.8,.5,1),background-position .5s ease;transform-origin:50% 0;
  filter:drop-shadow(0 0 7px rgba(190,70,255,.55))}
.staple span{position:relative;transform:translateY(5px);transition:transform .16s cubic-bezier(.3,1.8,.5,1)}
.staple:hover::before,.staple:focus-visible::before{transform:translateY(5px) scaleY(.82);background-position:100% 0}
.staple:hover span,.staple:focus-visible span{transform:translateY(9px)}
.staple:active::before{transform:translateY(9px) scaleY(.62)}
.staple:active span{transform:translateY(11px)}
.staple:focus-visible{outline:2px solid #fff;outline-offset:5px;border-radius:7px}
.staple.soon{opacity:.62}

small{position:fixed;left:0;right:0;bottom:max(12px,env(safe-area-inset-bottom));text-align:center;font-size:11px;letter-spacing:.04em;color:#70747f;pointer-events:none}

#toast{position:fixed;left:50%;top:26px;transform:translate(-50%,-16px);padding:10px 16px;border-radius:6px;background:#fff;color:#000;font-weight:800;font-size:13px;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;white-space:nowrap}
#toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:620px),(max-aspect-ratio:1/1){
  main{width:100%;padding:max(26px,env(safe-area-inset-top)) 20px max(40px,env(safe-area-inset-bottom));justify-content:space-between;align-items:center;gap:0;text-align:center}
  h1 img{width:min(80vw,440px);margin:0 auto}
  .foot{align-items:center;gap:20px}
  .line{font-size:clamp(14px,3.9vw,18px);max-width:25em}
  nav{justify-content:center;gap:12px}
  .staple{min-width:0;flex:1 1 0;max-width:112px;height:58px;font-size:15px}
}
@media (max-height:520px) and (min-width:621px){
  .line{font-size:14px}
  .staple{height:50px}
}
@media (prefers-reduced-motion:reduce){
  .staple::before,.staple span{transition:none}
}