@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');
:root { color-scheme: dark; --ink: #f9f1f3; --muted: #c6b8bd; --pink: #e789ad; --deep: #141114; }
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--deep); }
body { margin: 0; min-height: 100vh; color: var(--ink); font-family: 'DM Sans', sans-serif; background: radial-gradient(ellipse at 50% 25%, #35212c 0, #1c171b 38%, #111012 78%); }
a { color: inherit; }
.page-shell { width: min(100%, 620px); margin: 0 auto; padding: 0 25px 26px; }
.profile { text-align: center; position: relative; padding-bottom: 30px; }
.cover { height: clamp(220px, 62vw, 355px); max-height: 355px; margin: 0 -25px; position: relative; overflow: hidden; background: #37222d; }
.cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; filter: saturate(.8); }
.cover-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,11,14,.05) 25%, rgba(20,17,20,.38) 62%, #1c171b 100%); }
.cover-label { position: absolute; right: 18px; top: 18px; color: #fff8fa; font-size: 10px; letter-spacing: .16em; text-shadow: 0 1px 8px #20121a; }
.avatar { width: 92px; height: 92px; object-fit: cover; border-radius: 50%; margin-top: -57px; position: relative; border: 4px solid #21191e; box-shadow: 0 8px 26px #0b080a88; }
.eyebrow { color: #e8a9bf; font-size: 10px; letter-spacing: .22em; margin: 14px 0 5px; }
h1 { font: 600 clamp(38px, 10vw, 52px)/1.1 'Playfair Display', Georgia, serif; letter-spacing: -.035em; margin: 0; }
h1 span { color: var(--pink); }
.bio { margin: 11px 0 18px; color: #e2d6da; font-size: 15px; }
.socials { display: flex; justify-content: center; align-items: center; gap: 13px; }
.social-link { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #ffffff35; border-radius: 50%; text-decoration: none; color: #fff5f8; transition: transform .18s, background .18s, border-color .18s; }
.social-link:hover { transform: translateY(-2px); background: #ffffff12; border-color: var(--pink); }
.social-link[aria-disabled="true"], .link-card[aria-disabled="true"] { cursor: default; }
.social-link:focus-visible, .link-card:focus-visible { outline: 3px solid #ffbed3; outline-offset: 4px; }
.social-link svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.social-link svg .dot { fill: currentColor; stroke: none; }
.shein-social { font: 600 18px 'Playfair Display', Georgia, serif; }
.links { display: grid; gap: 14px; }
.link-card { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) 24px; align-items: center; gap: 16px; min-height: 98px; padding: 12px 18px 12px 14px; overflow: hidden; border: 1px solid #ffffff26; border-radius: 24px; text-decoration: none; box-shadow: 0 9px 22px #00000025; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.link-card:hover { transform: translateY(-2px); border-color: #f3bfd0a0; box-shadow: 0 13px 28px #00000045; }
.instagram-card { background: linear-gradient(110deg, #f2dce4, #fffafa 55%, #f7e7ed); color: #291a20; }
.shein-card { background: linear-gradient(110deg, #fff, #f7f2f4 58%, #ecdce2); color: #21191d; }
.card-image { width: 58px; height: 58px; border-radius: 17px; overflow: hidden; background: #e7c7d2; }
.card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-copy { display: grid; gap: 4px; text-align: left; min-width: 0; }
.card-title { font: 600 clamp(18px, 4.8vw, 22px)/1.18 'Playfair Display', Georgia, serif; }
.card-subtitle { color: #695a61; font-size: 13px; line-height: 1.35; }
.sparkle { color: #cf668c; font-family: sans-serif; font-size: .75em; }
.card-arrow { color: #765460; font-size: 20px; text-align: right; }
.footer { display: flex; align-items: center; justify-content: center; gap: 9px; color: #b9abb0; font-size: 12px; letter-spacing: .03em; padding-top: 44px; }
.footer-mark { display: grid; place-items: center; width: 26px; height: 26px; color: white; background: linear-gradient(145deg, #ec9db8, #a85274); border-radius: 50% 50% 50% 12px; font: 600 15px 'Playfair Display', Georgia, serif; }
.heart { color: #e789ad; }
@media (min-width: 700px) { body { padding: 24px 0; } .page-shell { border: 1px solid #ffffff0d; border-radius: 30px; overflow: hidden; background: #171316a6; box-shadow: 0 24px 90px #00000050; padding-bottom: 34px; } .cover { border-radius: 30px 30px 0 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }