:root{
  --bg:#f7fbff;--text:#111;--muted:#5b6670;--accent:#0b66ff;
}
@media(prefers-color-scheme:dark){
  :root{--bg:#061526;--text:#e9f0ff;--muted:#9fb0d9;--accent:#6ea8ff;}
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;background:var(--bg);color:var(--text);min-height:100vh}
#bg{position:fixed;inset:0;z-index:0}
.topnav{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:12px 28px;background:rgba(255,255,255,0.5);backdrop-filter: blur(8px);z-index:6}
.topnav .brand a{font-weight:700;color:var(--text);text-decoration:none}
.container{position:relative;z-index:5;max-width:1100px;margin:40px auto;padding:0 20px}
.hero{display:flex;gap:24px;align-items:center;padding:24px 0}
.avatar{width:120px;height:120px;border-radius:10px;object-fit:cover}
.hero-text h1{margin:0;font-size:32px}
.muted{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:18px}
.card{background:rgba(255,255,255,0.6);padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(16,24,40,0.06)}
@media(max-width:900px){.hero{flex-direction:column;text-align:center}.cards{grid-template-columns:1fr}.topnav{padding:10px}}
.pub{padding:8px 0;border-bottom:1px solid rgba(0,0,0,0.04)}
a.cta{color:var(--accent);font-weight:600;text-decoration:none}
#ufo-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ufo {
  position: absolute;
  width: auto;
  height: auto;
  opacity: 0.85;
  animation: float 8s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255,255,220,0.8));
}

@keyframes float {
  0% { transform: translateY(0) translateX(0) rotate(0deg); }
  50% { transform: translateY(-10px) translateX(8px) rotate(2deg); }
  100% { transform: translateY(0) translateX(0) rotate(0deg); }
}