:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #000000; color: #c084fc; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 64px 24px; background: #000000; }
.profile { width: min(100%, 480px); }
header { margin-bottom: 56px; }
h1 { margin: 0; font-size: clamp(4rem, 16vw, 6.5rem); font-weight: 900; line-height: .88; letter-spacing: -.065em; }
h1 span { color: #a855f7; }
.handle { margin: 24px 0 0; color: #b181da; font-size: .9375rem; letter-spacing: .08em; }
nav { border-top: 1px solid #402452; }
.social-link { display: flex; align-items: center; gap: 24px; min-height: 88px; padding: 20px 12px; border-bottom: 1px solid #402452; color: inherit; text-decoration: none; font-size: 1.25rem; transition: background .2s ease, padding .2s ease; }
.number { color: #b181da; font-size: .75rem; font-variant-numeric: tabular-nums; }
.arrow { margin-left: auto; font-size: 1.6rem; }
a.social-link:hover { background: #14081e; padding-left: 20px; padding-right: 20px; }
a.social-link:focus-visible { outline: 2px solid #c084fc; outline-offset: 4px; background: #14081e; }
@media (max-width: 360px) { body { padding-inline: 20px; } .social-link { gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .social-link { transition: none; } }