*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{display:flex;align-items:center;justify-content:center;padding:20px;background:#0a0a12;-webkit-font-smoothing:antialiased;overflow:hidden}
.bg{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;filter:blur(4px) brightness(0.85) saturate(1.1);transform:scale(1.03)}
.bg-overlay{position:fixed;inset:0;z-index:0;background:rgba(0,0,0,0.05)}
.card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:480px;min-height:100vh;padding:40px 0;margin:0 auto;text-align:center}
.avatar{width:112px;height:112px;border-radius:50%;object-fit:cover;box-shadow:0 20px 60px rgba(0,0,0,0.3);display:block;margin:0 auto 16px;background:#1a1a2e;user-drag:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none;flex-shrink:0}
.name{font-size:22px;font-weight:700;color:#fff;letter-spacing:4px;text-shadow:0 2px 20px rgba(0,0,0,0.3);margin-bottom:6px;text-align:center;width:100%}
.subtitle{font-size:14px;color:rgba(255,255,255,0.8);text-shadow:0 2px 12px rgba(0,0,0,0.2);letter-spacing:1px;margin-bottom:28px;min-height:24px;text-align:center;width:100%}
.subtitle .cursor{display:inline-block;width:2px;height:16px;background:rgba(255,255,255,0.7);vertical-align:text-bottom;margin-left:2px;animation:blink 0.8s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;align-items:center;width:100%}
.link-btn{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.06);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);border:1px solid rgba(255,255,255,0.06);text-decoration:none;transition:transform 0.2s;cursor:pointer;touch-action:manipulation}
.link-btn img{width:28px;height:28px;display:block;object-fit:contain}
.link-btn:active{transform:scale(0.95)}
.tooltip{position:fixed;bottom:120px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(0,0,0,0.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff;padding:12px 24px;border-radius:14px;font-size:15px;font-weight:500;letter-spacing:1px;opacity:0;transition:all 0.4s cubic-bezier(0.22,1,0.36,1);pointer-events:none;z-index:100;border:1px solid rgba(255,255,255,0.06);box-shadow:0 12px 40px rgba(0,0,0,0.3);white-space:nowrap;line-height:1.6;text-align:center}
.tooltip.show{opacity:1;transform:translateX(-50%) translateY(0)}
.tooltip .copy-hint{font-size:12px;color:rgba(255,255,255,0.3);margin-left:12px}
@media(max-width:480px){.avatar{width:88px;height:88px}.name{font-size:20px;letter-spacing:2px}.link-btn{width:48px;height:48px}.link-btn img{width:24px;height:24px}.links{gap:12px}.tooltip{font-size:13px;padding:10px 18px;bottom:100px}.subtitle{font-size:13px}}