*{margin:0;padding:0;box-sizing:border-box;font-family:"Segoe UI",sans-serif}

body{
  height:100vh;
  background:radial-gradient(circle at top,#0f2027,#000);
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  color:#fff;
}

canvas{position:fixed;inset:0;z-index:0}

.cursor-glow{
  position:fixed;
  width:300px;
  height:300px;
  background:radial-gradient(circle,rgba(0,255,255,.15),transparent 60%);
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:1;
}

.card{
  width:380px;
  padding:28px;
  border-radius:26px;
  background:rgba(15,25,30,.92);
  backdrop-filter:blur(14px);
  text-align:center;
  z-index:2;
  box-shadow:0 0 60px rgba(0,255,255,.35);
}

.avatar{
  width:120px;height:120px;
  margin:0 auto 12px;
  border-radius:50%;
  padding:4px;
  background:linear-gradient(45deg,cyan,gold)
}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}

h1{font-size:26px;min-height:34px}
/* .role{font-size:13px;color:#ffd700;margin-bottom:10px;display:block} */
.role small {
  display: block;
  font-size: 11px;
  opacity: 0.7;
  margin-top: 4px;
}

p{font-size:14px;line-height:1.6;margin-bottom:14px}

.chatbox{
  background:#111;
  border-radius:12px;
  padding:10px;
  margin-bottom:14px;
}
.chatlog{
  max-height:120px;
  overflow-y:auto;
  font-size:13px;
  text-align:left;
}
.bot{color:#00ffff;margin-bottom:6px}
.user{color:#ffd700;margin-bottom:6px}

.chatbox input{
  width:100%;
  margin-top:6px;
  padding:6px;
  border:none;
  border-radius:8px;
  outline:none;
}

.github{
  width:100%;
  margin:10px 0;
}

iframe{
  width:100%;
  border-radius:12px;
  border:none;
  margin-bottom:10px;
}

.social{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-bottom:10px;
}
.social a{font-size:22px;color:white}
.social a:hover{color:gold}

.actions{
  display:flex;
  justify-content:center;
  gap:12px;
}
.actions button{
  width:42px;height:42px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:linear-gradient(45deg,cyan,gold)
}

.fps{
  position:fixed;
  bottom:10px;
  left:10px;
  font-size:12px;
  opacity:.6;
}

body.light{
  background:radial-gradient(circle,#f5f5f5,#ccc);
  color:#111;
}