:root{
  --bg: #000000;
  --ink:#ffffff;
  --dim:#8f8f96;
  --hot:#ffffff;
  --pad:clamp(20px,3.2vw,52px);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg)}
body{
    font-family: "Satoshi", sans-serif;

  -webkit-font-smoothing:antialiased;
  color:var(--ink);
  cursor:pointer;
  touch-action:none;
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}

#stage{position:fixed;inset:0;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 74%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 74%,transparent 100%)}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.gblur{position:fixed;left:0;right:0;z-index:2;pointer-events:none}
.gblur.top{top:0;height:20%}
.gblur.bot{bottom:0;height:52%}
.gblur span{position:absolute;left:0;right:0;display:block}

.gblur.top span{
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0) 0,#000 60%);
          mask-image:linear-gradient(to top,rgba(0,0,0,0) 0,#000 60%)}
.gblur.top span:nth-child(1){top:40%;bottom:0;
  -webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0) 0,#000 60%,#000 88%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to top,rgba(0,0,0,0) 0,#000 60%,#000 88%,rgba(0,0,0,0) 100%)}
.gblur.top span:nth-child(2){top:20%;bottom:20%;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0) 0,#000 60%,#000 88%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to top,rgba(0,0,0,0) 0,#000 60%,#000 88%,rgba(0,0,0,0) 100%)}
.gblur.top span:nth-child(3){top:0;bottom:40%;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.gblur.top span:nth-child(4){top:0;bottom:60%;
  -webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}
.gblur.top span:nth-child(5){top:0;bottom:80%;
  -webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px)}

.gblur.bot span{
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 60%);
          mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 60%)}
.gblur.bot span:nth-child(1){top:0;bottom:40%;
  -webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 60%,#000 88%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 60%,#000 88%,rgba(0,0,0,0) 100%)}
.gblur.bot span:nth-child(2){top:20%;bottom:20%;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 60%,#000 88%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 60%,#000 88%,rgba(0,0,0,0) 100%)}
.gblur.bot span:nth-child(3){top:40%;bottom:0;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.gblur.bot span:nth-child(4){top:60%;bottom:0;
  -webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}
.gblur.bot span:nth-child(5){top:80%;bottom:0;
  -webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px)}

.scrim{position:fixed;left:0;right:0;z-index:3;pointer-events:none}
.scrim.top{top:0;height:22%;
  background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,0))}
.scrim.bot{bottom:0;height:60%;
  background:linear-gradient(to top,rgba(0,0,0,.96) 0%,rgba(0,0,0,.88) 26%,rgba(0,0,0,.42) 58%,rgba(0,0,0,0) 100%)}

.ui{position:fixed;z-index:4;pointer-events:none}
.ui a{pointer-events:auto}

header{top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:clamp(18px,2.3vw,32px) var(--pad)}
.logo{display:block;line-height:0;color:var(--ink);text-decoration:none}
.logo img{width:clamp(140px,15vw,190px);height:auto;display:block}
.brand{display:flex;align-items:center}
.social{display:flex;align-items:center;gap:clamp(18px,2vw,26px)}
.social a{display:block;opacity:.75;transition:opacity .18s ease,transform .18s ease}
.social a:hover,.social a:focus-visible{opacity:1;transform:translateY(-1px)}
.social img{height:19px;width:auto;display:block}

.hero{left:0;right:0;bottom:0;padding:0 var(--pad) clamp(26px,3.6vw,52px)}
h1{font-weight:600;line-height:1.1;letter-spacing:-.02em;
  font-size:clamp(15px,calc((100vw - 2 * var(--pad)) / 15),32px)}
.foot{margin-top:clamp(18px,2.2vw,28px)}
.foot p{color:var(--dim);font-size:clamp(13px,1.05vw,15px);
  line-height:1.7;max-width:max(62ch,640px)}
:focus-visible{outline:1px solid var(--hot);outline-offset:3px}

#nope{position:fixed;inset:0;display:none;place-items:center;z-index:9;
  color:#7a7a80;font-size:12px;letter-spacing:.08em;line-height:1.9;
  text-align:center;padding:24px}

@media (max-width:420px){
  .logo img{width:150px}
}
@media (max-width:620px){
  .gblur.bot{height:56%}
  .scrim.bot{height:62%}
}