* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; min-height: 100vh; color: #fff; }
.theme-sunset { background: linear-gradient(160deg, #ff7e5f, #feb47b 50%, #ff6a88); }
.theme-ocean { background: linear-gradient(160deg, #2193b0, #6dd5ed); }
.theme-forest { background: linear-gradient(160deg, #134e5e, #71b280); }
.theme-dark { background: #121212; }
.theme-purple { background: linear-gradient(160deg, #654ea3, #eaafc8); }
.wrap { max-width: 560px; margin: 0 auto; padding: 56px 20px 40px; text-align: center; }
.avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 4px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.25); display: inline-flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 700; }
h1 { font-size: 22px; margin: 14px 0 6px; }
.bio { opacity: .92; margin-bottom: 28px; line-height: 1.5; white-space: pre-line; }
.link { display: flex; align-items: center; gap: 12px; padding: 16px 20px; margin-bottom: 14px; border-radius: 14px;
  background: rgba(255,255,255,.92); color: #222; text-decoration: none; font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,.12); transition: transform .15s, box-shadow .15s; }
.link:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.link .icon { font-size: 20px; width: 28px; }
.link .t { flex: 1; text-align: center; margin-right: 28px; }
.theme-dark .link { background: #1f1f1f; color: #fff; border: 1px solid #333; }
/* Tema futuristik: cyan → biru → magenta di atas hitam */
.theme-neon { background-color: #05060a; background-attachment: fixed;
  background-image: radial-gradient(600px 400px at 15% 10%, rgba(34,230,255,.18), transparent 60%),
    radial-gradient(600px 500px at 90% 90%, rgba(217,70,239,.2), transparent 60%),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 40px 40px; }
.theme-neon h1 { font-size: 26px; letter-spacing: 2px; text-transform: uppercase;
  background: linear-gradient(90deg, #22e6ff, #4f6bff, #d946ef); -webkit-background-clip: text; background-clip: text; color: transparent; }
.theme-neon .bio { color: #b8c0d8; letter-spacing: .5px; }
.theme-neon .avatar { border: 3px solid transparent; background: linear-gradient(#05060a, #05060a) padding-box,
  linear-gradient(135deg, #22e6ff, #4f6bff, #d946ef) border-box; box-shadow: 0 0 30px rgba(79,107,255,.5); color: #22e6ff; }
.theme-neon .link { position: relative; background: rgba(15,18,30,.7); color: #fff; backdrop-filter: blur(8px);
  border: 1px solid transparent; letter-spacing: .5px; box-shadow: none;
  background: linear-gradient(rgba(12,14,24,.85), rgba(12,14,24,.85)) padding-box,
    linear-gradient(90deg, #22e6ff, #4f6bff, #d946ef) border-box; }
.theme-neon .link:hover { transform: translateY(-2px); box-shadow: 0 0 18px rgba(34,230,255,.35), 0 0 32px rgba(217,70,239,.3);
  background: linear-gradient(90deg, rgba(34,230,255,.18), rgba(79,107,255,.18), rgba(217,70,239,.18)) padding-box,
    linear-gradient(90deg, #22e6ff, #4f6bff, #d946ef) border-box; }
.theme-neon .link, .theme-neon .avatar, .theme-neon h1 { animation: rise .6s ease both; }
.theme-neon .link:nth-child(2) { animation-delay: .08s; } .theme-neon .link:nth-child(3) { animation-delay: .16s; }
.theme-neon .link:nth-child(4) { animation-delay: .24s; } .theme-neon .link:nth-child(n+5) { animation-delay: .32s; }
.theme-neon footer { color: #6b7394; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
footer { margin-top: 36px; font-size: 13px; opacity: .75; }
footer a { color: inherit; }