:root {
  --p1:#F9A8D3;--p2:#FEF18B;--p3:#99F6E4;--p4:#38BDF8;
}
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
  height:100vh;
  width:100vw;
  overflow:hidden;
  font-family:"Inter",system-ui,sans-serif;
  background:#050608;
  color:#e6f0ff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:none;
  position:relative;
}
canvas {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
.cursor {
  position:fixed;
  width:18px;
  height:18px;
  border-radius:50%;
  background:radial-gradient(circle,var(--p4) 0%,transparent 70%);
  pointer-events:none;
  mix-blend-mode:screen;
  transform:translate(-50%,-50%);
  z-index:10;
}
h1 {
  font-size:2rem;
  margin-bottom:1em;
  background:linear-gradient(90deg,var(--p1),var(--p2),var(--p3),var(--p4));
  -webkit-background-clip:text;
  color:transparent;
  background-size:400% 100%;
  animation:shift 8s linear infinite;
}
@keyframes shift {
  to { background-position:400% 0; }
}

.status-list {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:1em;
  z-index:5;
}
.status-list li {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(14,18,23,0.8);
  border:1px solid #38BDF833;
  border-radius:10px;
  padding:0.8em 1.2em;
  width:260px;
  margin:0 auto;
  backdrop-filter:blur(4px);
}
.name {
  color:#99F6E4;
  font-weight:600;
}
.badge {
  font-size:0.9rem;
  padding:0.3em 0.8em;
  border-radius:8px;
  font-weight:500;
  animation:pulse 2s infinite ease-in-out;
  background:linear-gradient(90deg,#38BDF8,#99F6E4);
  color:#000;
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:0.85; transform:scale(1.05); }
}
footer {
  position:absolute;
  bottom:1em;
  color:#38BDF8AA;
  font-size:0.8rem;
}