:root { --cream:#fffaf7; --blush:#ffe4e6; --pink:#f6b7c4; --peach:#ffb38e; --hot:#d96b7d; --brown:#724a4d; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--cream); color:var(--brown); }
body { font-family:var(--font-geist-sans), Arial, sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.28; background-image:radial-gradient(#f4b8bd 0.7px, transparent 0.7px); background-size:15px 15px; }
main { position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; padding:48px 20px; }
.card { position:relative; z-index:2; width:min(100%, 500px); text-align:center; padding:34px 28px 42px; border:1px solid rgba(255,255,255,.76); border-radius:42px; background:linear-gradient(145deg,rgba(255,255,255,.52),rgba(255,226,225,.24)); box-shadow:0 30px 80px rgba(128,67,75,.14), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(229,151,159,.18); backdrop-filter:blur(28px) saturate(145%); -webkit-backdrop-filter:blur(28px) saturate(145%); overflow:hidden; }
.card::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; background:linear-gradient(125deg,rgba(255,255,255,.36) 0%,rgba(255,255,255,.06) 34%,rgba(255,203,205,.12) 72%,rgba(255,255,255,.28) 100%); }
.share { position:absolute; right:22px; top:18px; width:38px; height:38px; border:1px solid rgba(255,255,255,.85); border-radius:50%; background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(255,220,221,.28)); color:var(--brown); box-shadow:0 6px 18px rgba(116,68,74,.09),inset 0 1px 0 #fff; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); font-weight:800; letter-spacing:1px; cursor:pointer; }
.avatar { position:relative; width:110px; height:110px; margin:0 auto 18px; padding:5px; border-radius:50%; background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(255,214,216,.24)); border:1px solid rgba(255,255,255,.92); box-shadow:0 13px 30px rgba(137,73,80,.16),inset 0 1px 1px rgba(255,255,255,1),inset 0 -2px 4px rgba(220,139,148,.18); backdrop-filter:blur(18px) saturate(155%); -webkit-backdrop-filter:blur(18px) saturate(155%); transform:rotate(-2deg); overflow:hidden; }
.avatar::after { content:""; position:absolute; inset:5px; z-index:1; border-radius:50%; pointer-events:none; box-shadow:inset 0 2px 2px rgba(255,255,255,.72),inset 0 -1px 1px rgba(114,74,77,.12); }
.avatar img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 43%; transform:rotate(2deg); }
h1 { margin:0; font:720 29px/1.1 var(--font-geist-sans),Arial,sans-serif; color:#6a4145; letter-spacing:-.045em; }
h1 span { font-size:.72em; vertical-align:.08em; }
.handle { margin:6px 0 14px; color:var(--hot); font:600 12px/1 var(--font-geist-mono), monospace; }
.bio { margin:0 auto 28px; color:#8e6a6b; font:450 14px/1.5 var(--font-geist-sans),Arial,sans-serif; letter-spacing:-.012em; }
nav { display:grid; gap:13px; }
nav a { position:relative; min-height:61px; display:grid; grid-template-columns:35px 1fr 35px; align-items:center; padding:8px 11px; color:#704b4e; background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,223,222,.28)); border:1px solid rgba(255,255,255,.9); border-radius:20px; box-shadow:0 9px 24px rgba(138,75,83,.1),inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(222,143,153,.16); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); text-decoration:none; font:650 14px/1.25 var(--font-geist-sans), sans-serif; transition:transform .22s ease,box-shadow .22s ease,background .22s ease; overflow:hidden; }
nav a:nth-child(2n) { background:linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,211,204,.25)); }
nav a:hover, nav a:focus-visible { outline:none; transform:translateY(-3px) scale(1.012); background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(255,222,220,.38)); box-shadow:0 14px 30px rgba(138,75,83,.15),inset 0 1px 0 #fff; }
.link-icon { width:32px; height:32px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.72); border-radius:50%; background:rgba(255,231,232,.48); box-shadow:inset 0 1px 0 #fff,0 3px 8px rgba(149,85,91,.08); color:var(--hot); font-size:18px; }
.arrow { color:#d58d98; font-size:19px; transition:transform .18s; }
nav a:hover .arrow { transform:translateX(3px); }
.peach-field { position:absolute; inset:-60px; display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-rows:180px; gap:45px 70px; transform:rotate(-7deg) scale(1.08); pointer-events:none; opacity:.2; }
.peach-field span { position:relative; place-self:center; width:94px; height:96px; }
.peach-field span::before { content:""; position:absolute; inset:24px 5px 2px 5px; border-radius:48% 52% 45% 42% / 47% 48% 52% 55%; background:radial-gradient(ellipse at 25% 24%,rgba(255,245,224,.8) 0 8%,transparent 10%),radial-gradient(ellipse at 34% 30%,rgba(255,239,220,.58) 0 7%,transparent 9%),linear-gradient(135deg,#ffb09f 5%,#f88f88 58%,#ee6f74 100%); box-shadow:inset -7px -5px 0 rgba(210,74,86,.24),inset 8px 5px 12px rgba(255,255,255,.18); transform:rotate(-4deg); }
.peach-field span::after { content:""; position:absolute; z-index:2; width:28px; height:54px; left:39px; top:33px; border-left:4px solid rgba(214,89,94,.5); border-bottom:3px solid rgba(214,89,94,.42); border-radius:0 0 0 90%; transform:rotate(10deg); }
.peach-field span i,.peach-field span i::after { position:absolute; z-index:3; display:block; content:""; background:linear-gradient(135deg,#7fa257,#587d43); box-shadow:inset 2px 2px 3px rgba(255,255,255,.18); }
.peach-field span i { width:33px; height:17px; top:13px; left:48px; border-radius:100% 0 100% 0; transform:rotate(-22deg); }
.peach-field span i::after { width:13px; height:32px; left:-12px; top:-13px; border-radius:100% 0 100% 0; transform:rotate(-31deg); }
.peach-field span:nth-child(3n+2) { transform:rotate(19deg) scale(.7); }
.peach-field span:nth-child(4n) { transform:rotate(-17deg) scale(1.2); }
@media (max-width:700px) { .peach-field { grid-template-columns:repeat(4,1fr); grid-auto-rows:145px; gap:35px; } }
@media (max-width:520px) { main { padding:28px 13px; place-items:start center; } .card { padding:26px 14px 34px; border-radius:32px; } .share { right:14px; top:14px; } nav a { min-height:58px; border-radius:18px; } .peach-field { grid-template-columns:repeat(3,1fr); opacity:.17; } }
@media (prefers-reduced-motion:reduce) { * { transition:none!important; } }