@font-face{
  font-family:"Inter";
  src:url(fonts/inter-var.woff2) format("woff2");
  font-weight:100 900;
  font-display:swap;
}

:root{
  --bg:#121119;
  --ink:#f1f0f8;
  --ink-muted:rgba(241,240,248,.78);
  --accent:#7c3aed;
  --accent-l:#a78bfa;
  --glow:rgba(124,58,237,.26);
  --font-sans:"Inter",ui-sans-serif,system-ui,sans-serif;
  --logo:clamp(3.25rem,10vmin,5.5rem);
  --word-h:clamp(2.65rem,8.2vmin,4.5rem);
  --word-w:calc(var(--word-h) * 2.85);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{
  height:100%;
  overflow:hidden;
}
body{
  margin:0;
  min-height:100%;
  min-height:100dvh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.stage{
  position:relative;
  isolation:isolate;
  box-sizing:border-box;
  height:100%;
  height:100dvh;
  max-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(1.5rem,4.5vmin,3rem);
  padding:clamp(1.25rem,5vmin,3.5rem);
  text-align:center;
  overflow:hidden;
}

.glow{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(closest-side at 50% 44%,var(--glow),transparent 74%),
    radial-gradient(ellipse 70% 45% at 50% 100%,rgba(91,33,182,.14),transparent 70%);
}

.mark{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(.85rem,2.2vmin,1.35rem);
  max-width:100%;
}

.logo{
  flex:0 0 auto;
  display:block;
  width:var(--logo);
  height:var(--logo);
}

.word{
  flex:0 0 auto;
  display:block;
  width:var(--word-w);
  height:var(--word-h);
  color:var(--ink);
  max-width:calc(100vw - 4rem);
}

h1{
  margin:0;
  max-width:min(14ch,100%);
  width:100%;
  font:650 clamp(2.35rem,8.4vmin,5.75rem)/1.02 var(--font-sans);
  letter-spacing:-.045em;
  color:var(--ink);
  text-wrap:balance;
  overflow-wrap:anywhere;
}

:focus-visible{
  outline:2px solid var(--accent-l);
  outline-offset:3px;
  border-radius:4px;
}

@media (max-width:480px){
  .stage{gap:clamp(1.15rem,4vmin,1.75rem);padding:1.25rem}
  h1{letter-spacing:-.035em}
}

@media (max-height:520px){
  :root{
    --logo:clamp(2.5rem,12vmin,3.75rem);
    --word-h:clamp(2rem,10vmin,3.1rem);
  }
  .stage{gap:1rem;padding:1rem}
  h1{font-size:clamp(1.85rem,9vmin,3.25rem)}
}