:root { --ink:#172020; --paper:#f3f1e9; --acid:#d9ff50; --orange:#ff6b3d; --line:rgba(23,32,32,.15); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:Manrope,system-ui,sans-serif; display:flex; flex-direction:column; align-items:center; overflow-x:hidden; }
.page-shell { width:min(100%, 590px); padding:54px 24px 32px; position:relative; }
.sun { position:absolute; width:310px; height:310px; right:-174px; top:-119px; border-radius:50%; background:var(--acid); z-index:-1; }
.profile { text-align:center; margin:0 auto 34px; }
.logo-frame { margin:0 auto 23px; width:94px; height:94px; padding:7px; overflow:hidden; border:3px solid var(--ink); border-radius:50%; background:#fff; box-shadow:7px 7px 0 var(--orange); }
.logo-frame img { display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.eyebrow { margin:0 0 9px; font:500 10px/1.2 "DM Mono", monospace; letter-spacing:.14em; }
h1 { margin:0; font-size:48px; line-height:1; letter-spacing:-.07em; font-weight:800; }
.bio { max-width:375px; margin:17px auto 0; font-size:15px; line-height:1.55; }
.links { display:grid; gap:12px; }
.link { min-height:68px; border:1px solid var(--ink); background:rgba(255,255,255,.48); color:var(--ink); display:flex; align-items:center; gap:17px; padding:12px 16px; text-decoration:none; border-radius:14px; font-weight:700; font-size:15px; transition:transform .18s ease, background .18s ease, box-shadow .18s ease; }
.link:hover,.link:focus-visible { transform:translate(-3px,-3px); background:var(--acid); box-shadow:5px 5px 0 var(--ink); outline:none; }
.link-icon { width:37px; height:37px; flex:0 0 37px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--acid); font:500 13px/1 "DM Mono",monospace; }
.link-text { flex:1; }.arrow { font-size:22px; font-weight:400; }
.qr-callout { display:flex; align-items:center; gap:16px; margin:35px 0 0; padding:17px; border:1px dashed var(--ink); border-radius:14px; background:#fffdf7; }
.qr-callout img { background:#fff; padding:5px; border:1px solid var(--line); border-radius:5px; image-rendering:pixelated; }.qr-callout .eyebrow { margin-bottom:5px; }.qr-callout p:last-child { margin:0; font-size:13px; }
footer { width:100%; padding:18px 24px 28px; text-align:center; font:400 10px/1.5 "DM Mono",monospace; letter-spacing:.08em; }
@media (max-width:420px) { .page-shell{padding-top:42px}.logo-frame{width:84px;height:84px}h1{font-size:43px}.link{min-height:64px} }