* {margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

body {background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px;}

.bio-container {width: 100%; max-width: 500px; background: white; border-radius: 24px; overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);}

.bio-header {text-align: center; padding: 48px 24px 28px;}

.bio-avatar {width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 20px; background: #e0e0e0 url('/assets/img/sia.png') no-repeat center; background-size: cover; border: 3px solid white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}

.bio-name {font-size: 26px; font-weight: 700; color: #1a202c; margin-bottom: 8px;}

.bio-bio {font-size: 16px; color: #4a5568; line-height: 1.5; font-weight: 500;}

.bio-links {padding: 0 16px 24px;}

.bio-link {display: block; text-decoration: none; margin: 12px 16px; padding: 16px 20px; border-radius: 16px; background: #f8fafc; color: #2d3748; font-weight: 600; font-size: 17px; transition: all 0.2s ease; display: flex; align-items: center; border: 1px solid #edf2f7;}

.bio-link span {text-align: center;}

.bio-link:hover {background: #edf2ff; border-color: #cbd5e0; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);}

.bio-link i {width: 24px; text-align: center; font-size: 18px; margin-right: 14px; color: #4299e1;}

.bio-footer {text-align: center; padding: 16px; font-size: 13px; color: #a0aec0; background: #f8fafc; border-top: 1px solid #edf2f7;}

@media (max-width: 500px) {
	.bio-container {border-radius: 20px;}
	.bio-header {padding: 40px 20px 24px;}
	.bio-name {font-size: 24px;}
	.bio-link {margin: 10px 12px; padding: 14px 16px;   font-size: 16px;}
	}