@font-face{
  font-family:"Space Mono";
  src:url("/fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --ground:#121010;
  --bone:#ECE6DC;
  --muted:#AFA599;
  --hot:#EC3B83;
  --mono:"Space Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme:dark;background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--bone);font-family:var(--mono)}

#wave{position:fixed;inset:0;width:100%;height:100%;display:block}

.stage{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  justify-items:center;
  padding:24px max(24px,env(safe-area-inset-right)) max(36px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
}

svg.defs{position:absolute}

h1{margin:0;align-self:center;font-size:inherit;font-weight:inherit;line-height:0}

/* The lockup is always solid and visible. Motion only ever adds to it. */
.mark{position:relative;display:block}
.mark svg{position:relative;display:block;width:100%;height:auto;overflow:visible}
.mark .word{fill:var(--bone)}
.mark .x{filter:drop-shadow(0 0 7px rgba(236,59,131,.6))}
.mark-wide{width:min(80vw,1120px)}
.mark-tall{display:none;width:min(84vw,560px)}

.glow{
  position:absolute;
  width:var(--gs);
  aspect-ratio:1;
  left:var(--gx);
  top:var(--gy);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(236,59,131,.46),rgba(236,59,131,.13) 46%,rgba(236,59,131,0));
  animation:breathe 7s ease-in-out infinite alternate;
  pointer-events:none;
}
.mark-wide .glow{--gx:4.43%;--gy:50%;--gs:32%}
.mark-tall .glow{--gx:7.11%;--gy:22%;--gs:58%}

@keyframes breathe{from{opacity:.62}to{opacity:1}}

.soon{
  margin:0;
  font-size:12px;
  line-height:1;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}

@media (max-aspect-ratio:1/1),(max-width:760px){
  .mark-wide{display:none}
  .mark-tall{display:block}
}

@media (prefers-reduced-motion:reduce){
  .glow{animation:none}
}