:root{
  --bg:#fff;
  --text:#000;
  --muted:#777;
  --dot:#000;
  --logo-light-display:block;
  --logo-dark-display:none;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#000;
    --text:#fff;
    --muted:#b9b9b9;
    --dot:#fff;
    --logo-light-display:none;
    --logo-dark-display:block;
  }
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  text-align:center;
}

.center{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:24px 16px;
}

.logo{
  width:min(520px,86vw);
  height:auto;
  display:block;
}

.logo.light{display:var(--logo-light-display);}
.logo.dark{display:var(--logo-dark-display);}

.title{
  font-size:22px;
  font-weight:500;
  letter-spacing:0.3px;
  margin-top:28px;
  display:inline-flex;
  user-select:none;
}

.title span{
  display:inline-block;
  transition:transform 0.18s ease;
  will-change:transform;
}

.title span:hover{transform:translateY(-3px);}

.dots{display:flex;gap:8px;margin-top:12px;}

.dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--dot);
  animation:bounce 1.1s infinite ease-in-out;
}

.dot:nth-child(2){animation-delay:0.15s;}
.dot:nth-child(3){animation-delay:0.30s;}

@keyframes bounce{
  0%,80%,100%{transform:translateY(0);opacity:0.4;}
  40%{transform:translateY(-5px);opacity:1;}
}

footer{
  padding:70px 20px 60px;
  font-size:13px;
  font-weight:400;
  line-height:1.8;
  color:var(--muted);
}

footer p{margin-bottom:6px;}

a{color:inherit;text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}